/* ================= HEADER ================= */
header {position:fixed;top:0;left:0;width:100%;height:50px;background:#fff;z-index:9999;border-bottom:1px solid #ddd;}
#theader {display:flex;justify-content:space-between;align-items:center;width:100%;height:50px;padding:0 12px;box-sizing:border-box;gap:10px;}
.header-left a {font-size:16px;font-weight:bold;color:#7b7b7b;text-decoration:none;display:flex;align-items:center;}
.logo-text {color:#1abc9c;font-weight:bold;margin-right:4px;font-size:16px;}
.header-right {display:flex;align-items:center;gap:8px;margin-left:auto;}
.icon-btn img {width:26px;height:26px;cursor:pointer;}
.user-info {display:none;}
.logout-btn {padding:8px 10px;background:#1abc9c;color:white;border-radius:6px;text-decoration:none;font-size:13px;}
.logout-btn:hover {background:#16a085;}
.menu-toggle {display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:20px;cursor:pointer;}

/* ================= BASE ================= */
input {font-size: 16px;}
body {margin:0;font-family:Arial;margin-top:50px;font-size:15px;}
.container {display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 50px);}

/* ================= LOGIN ================= */
#centerindex {position:static;width:100%;height:auto;margin:0;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
#centerindex .logininput {width:100%;max-width:320px;height:45px;border:1px solid #ccc;border-radius:6px;font-size:18px;color:#555;}
#titleindex {text-align:center;font-size:26px;color:#498af2;margin-bottom:20px;}
#enter {width:100%;max-width:320px;height:45px;background:#498af2;border-radius:6px;color:white;font-weight:bold;font-size:18px;border:1px solid #3d7fed;}
#enter:hover {cursor:pointer;background:#3178ed;}
input[type="email"],input[type="password"] {text-align: center;}

/* ================= SIDEBAR / TREE ================= align-self: stretch; en sidebar si no llega hasta abajo */
.sidebar {font-size:14px;width:85%;max-width:320px;position:fixed;left:-100%;top:50px;height:calc(100% - 50px);background:#2c3e50;color:white;padding:12px;overflow-y:auto;box-sizing:border-box;z-index:9999;transition:left 0.3s ease;}
.sidebar.open {left:0;}
.sidebar h3 {margin:0;font-size:14px;}
#tree ul {list-style:none;padding-left:10px;}
.tree-row {display:flex;align-items:center;cursor:pointer;padding:10px;border-radius:6px;}
.tree-row:hover {background:#34495e;}
.tree-selected,.tree-selected:hover {background:#1abc9c!important;color:white;}
.arrow {width:18px;display:inline-block;font-size:12px;}
.icon {width:22px;margin-right:6px;position:relative;top:-1px;}
.tree-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.tree-header h3 {margin:0;font-size:14px;line-height:28px;}
.tree-buttons {display:flex;gap:6px;}
.tree-buttons button {width:32px;height:32px;border:none;border-radius:6px;background:#34495e;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.tree-buttons button:hover {background:#1abc9c;}
.tree-children {display:none;margin-left:10px;}
.tree-item {font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tree-actions {display:flex;gap:6px;}
.add-folder,.delete-folder {opacity:1;cursor:pointer;}
.delete-folder {color:#e74c3c;}
.tree-search {width:100%;box-sizing:border-box;padding:10px;margin-bottom:12px;border-radius:6px;border:none;outline:none;margin-top:10px;font-size:14px;}

/* ================= CONTENT ================= */
.content {flex:1;padding:10px;background:#ecf0f1;width:100%;box-sizing:border-box;}
.search-container {width:100%;margin-bottom:12px;}
#buscador {width:100%;padding:10px;box-sizing:border-box;border:1px solid #ccc;border-radius:6px;font-size:14px;}

/* ================= TABLA ================= */
#tabla {display:none;}
.cards-container {display:flex;flex-direction:column;gap:12px;padding:10px;}
.card-item {background:white;border-radius:10px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,0.08);border-left:4px solid #1abc9c;}
.card-item.selected-row {border: 2px solid #1abc9c;background: #e8f8f5;}
.card-item {background:white;border-radius:10px;padding:14px;margin-bottom:14px;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.card-header {font-weight:bold;font-size:16px;margin-bottom:10px;}
.card-body {display:flex;flex-direction:column;gap:8px;font-size:14px;}
.card-row {display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #eee;}
.card-row:last-child {border-bottom:none;}
.card-label {font-size:12px;color:#888;}
.card-footer {margin-top:12px;display:flex;justify-content:center;}
.card-btn {width:90%;padding:12px;border:none;border-radius:8px;background:#34495e;color:white;font-size:14px;cursor:pointer;}
.card-btn:hover {background:#2c3e50;}
.card-acciones {display:flex;gap:8px;}
.card-acciones button {width:36px;height:36px;border:none;border-radius:8px;background:#ecf0f1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;}
.card-acciones button:hover {background:#d0d7da;}

/* ================= BADGES ESTADO ================= */
.estado {display:inline-block;padding:4px 10px;border-radius:14px;font-size:13px;font-weight:600;line-height:1;}
.estado.pendiente {background:#e74c3c;color:white;}
.estado.finalizado {background:#1abc9c;color:white;}

/* ================= ACCIONES ================= */
.acciones {text-align:left;padding-left:6px;}
.acciones button {width:36px;height:36px;border:none;border-radius:8px;background:#ecf0f1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;}
.acciones button:hover {background:#d0d7da;}
.menu-wrapper {position:relative;}

/* ================= DROPZONE ================= */
#dropzone {border:2px dashed #bbb;padding:20px;text-align:center;margin-bottom:12px;background:white;border-radius:8px;cursor:pointer;transition:0.2s;font-size:14px;}
#dropzone.dragover {border-color:#1abc9c;background:#ecfdf5;color:#1abc9c;}
#dropzone svg {width:32px;fill:#e67e22;margin-bottom:8px;}
.file-progress {margin-top:12px;font-size:13px;}
.bar-container {width:100%;background:#eee;border-radius:6px;height:10px;margin-top:6px;}
.bar {height:10px;background:#1abc9c;width:0%;border-radius:6px;}
#resultados-container {margin-top:12px;}
#btnLimpiar {display:none;margin-top:12px;padding:10px;border:none;background:#e67e22;color:white;border-radius:6px;cursor:pointer;margin-bottom:20px;width:100%;font-size:14px;}

/* ================= NOTIFICACIONES ================= */
.noti {position:fixed;top:60px;left:10px;right:10px;padding:14px;border-radius:10px;color:white;font-size:14px;z-index:9999;display:none;box-shadow:0 6px 20px rgba(0,0,0,0.2);animation:slideInMobile 0.25s ease;text-align:center;}
.noti.error {background:#e74c3c;}
.noti.success {background:#1abc9c;}
.noti.warning {background:#f39c12;}
@keyframes slideInMobile {from {transform:translateY(-20px);opacity:0;} to {transform:translateY(0);opacity:1;}}

/* ================= MENU CONTEXTUAL ================= */
#menuGlobal {display:none;position:fixed;bottom:0;left:0;width:100%;background:white;border-radius:12px 12px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,0.2);z-index:9999;overflow:hidden;animation:menuSlideUp 0.2s ease;}
#menuGlobal div {padding:14px 16px;font-size:15px;cursor:pointer;transition:0.2s;text-align:left;}
#menuGlobal div:hover {background:#f4f6f7;}
#menuGlobal div + div {border-top:1px solid #eee;}
@keyframes menuSlideUp {from {transform:translateY(100%);} to {transform:translateY(0);}}

/* ================= MODAL ================= */
.modal {display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:10000;justify-content:center;align-items:center;padding:10px;}
.modal-content {background:white;border-radius:14px;padding:18px;width:100%;max-width:none;box-shadow:0 10px 40px rgba(0,0,0,0.2);animation:modalFadeMobile 0.2s ease;}
#modalTitulo {margin:0 0 12px 0;font-size:18px;font-weight:600;color:#2c3e50;text-align:left;}
#modalBody {margin-bottom:15px;font-size:14px;color:#555;}
#modalBody input {width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;outline:none;box-sizing:border-box;font-size:14px;}
#modalBody input:focus {border-color:#1abc9c;box-shadow:0 0 0 2px rgba(26,188,156,0.2);}
.modal-actions {display:flex;flex-direction:column;gap:10px;}
#modalCancel {background:#ecf0f1;border:none;padding:12px;border-radius:8px;cursor:pointer;font-size:14px;width:100%;}
#modalCancel:hover {background:#d0d7da;}
#modalOk {background:#1abc9c;border:none;color:white;padding:12px;border-radius:8px;cursor:pointer;font-size:14px;width:100%;}
#modalOk:hover {background:#16a085;}
@keyframes modalFadeMobile {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}}

/* ================= PANEL LATERAL ================= */
.panel-lateral {position:fixed;top:0;right:-100%;width:100%;height:100%;background:white;box-shadow:-3px 0 10px rgba(0,0,0,0.2);transition:right 0.3s ease;z-index:9999;display:flex;flex-direction:column;}
.panel-lateral.open {right:0;}
.panel-header {padding:12px;background:#34495e;color:white;display:flex;justify-content:space-between;align-items:center;font-size:15px;}
#panelContenido {padding:12px;overflow-y:auto;flex:1;}

/* ================= PANEL CONTENIDO ================= */
.panel-section {display:flex;flex-direction:column;gap:12px;}
.panel-label {font-size:13px;color:#888;margin:0;}
.panel-doc {font-size:14px;background:#f5f5f5;padding:10px;border-radius:6px;word-break:break-word;}
.select-estado {padding:10px;border-radius:6px;border:1px solid #ccc;font-size:14px;}
.panel-actions {margin-top:12px;}
.btn-guardar {background:#1abc9c;border:none;color:white;padding:12px;border-radius:6px;cursor:pointer;font-size:14px;width:100%;}
.btn-guardar:hover {background:#16a085;}
#listaNotas {margin-top:12px;padding:0;overflow-y:auto;overflow-x:hidden;}
.nota-input-container {position:sticky;top:0;z-index:5;background:#ecf0f1;padding:12px;border-bottom:1px solid #ddd;}
.nota-input-container textarea {width:100%;height:90px;resize:none;border:1px solid #ccc;border-radius:8px;padding:10px;box-sizing:border-box;display:block;overflow-x:hidden;font-size:14px;}
.nota-input-container textarea:focus {outline:none;border-color:#1abc9c;}
.nota-input-container button {margin-top:8px;width:100%;background:#1abc9c;border:none;padding:12px;color:white;border-radius:8px;cursor:pointer;font-size:14px;}
.nota-input-container button:hover {background:#16a085;}
.nota-item {background:#ffffff;border-radius:10px;padding:12px;margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,0.06);border-left:4px solid #3498db;transition:0.2s;}
.nota-item:hover {transform:none;}
.nota-abierta {border-left-color:#e74c3c;}
.nota-cerrada {border-left-color:#1abc9c;opacity:0.9;}
.nota-header {display:flex;justify-content:space-between;font-size:12px;color:#777;margin-bottom:6px;}
.nota-texto {font-size:14px;margin-bottom:10px;line-height:1.5;word-break:break-word;}
.nota-footer {display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.nota-badge {font-size:11px;padding:4px 8px;border-radius:12px;font-weight:bold;}
.badge-abierta {background:#ffe5e5;color:#e74c3c;}
.badge-cerrada {background:#e8f8f5;color:#1abc9c;}
.nota-acciones {display:flex;gap:8px;}
.nota-acciones button {border:none;background:#ecf0f1;border-radius:6px;cursor:pointer;padding:8px 10px;font-size:12px;}
.nota-acciones button:hover {background:#d0d7de;}

/* ================= ESTADOS DE JAVASCRIPT ================= */
.hidden {display:none !important;}
.visible {display:block !important;}
.flex {display:flex !important;}
.estado-ok {color:#1abc9c;}
.estado-error {color:#e74c3c;}

/* ================= OVERLAY ================= */
.overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9998;display:none;backdrop-filter:blur(2px);}
.overlay.show {display:block;}

/* ================= OPCIONES ================= */
.cards-opciones{width:80%;max-width:1000px;margin:0 auto;padding-bottom:50px;padding-top:60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;animation:fadeInUp 0.6s ease;}
.card-opcion{background:#fff;border-radius:10px;padding:20px;text-align:center;text-decoration:none;color:#2c3e50;box-shadow:0 2px 6px rgba(0,0,0,0.1);transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease,color 0.25s ease;}
.card-opcion:hover{transform:translateY(-8px) scale(1.03);background:#1abc9c;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.2);}
.card-opcion:active{transform:scale(0.97);}
.card-opcion .icon{font-size:35px;margin-bottom:10px;transition:transform 0.3s ease;}
.card-opcion:hover .icon{transform:scale(1.2) rotate(5deg);}
.card-opcion .title{font-weight:bold;transition:letter-spacing 0.3s ease;}
.card-opcion:hover .title{letter-spacing:0.5px;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ================= PANEL DE USUARIOS ================= */
.usuario-container{width:95%;margin:0 auto;padding-top:30px;display:flex;flex-direction:column;gap:20px;}
.bloque{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.bloque h3{margin-bottom:15px;}
.bloque form{display:grid;grid-template-columns:1fr;gap:10px;}
.bloque input,.bloque select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;}
.bloque button,.acciones-usuario button,.acciones-mis-datos button{width:100%;height:38px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;cursor:pointer;font-size:14px;}
.btn-verde{background:#1abc9c;color:#fff;}
.btn-verde:hover{background:#16a085;}
.btn-rojo{background:#e57373;color:#fff;}
.btn-rojo:hover{background:#d65c5c;}
.usuario-card{display:flex;flex-direction:column;padding:15px;border-radius:10px;border:1px solid #eee;background:#fafafa;gap:10px;margin-bottom:12px;}
.usuario-card form{display:grid;grid-template-columns:1fr;gap:10px;}
.usuario-card input,.usuario-card select{width:100%;padding:8px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;}
.usuario-card span{font-size:12px;color:#888;}
.acciones-usuario{display:flex;flex-direction:column;gap:8px;margin-top:5px;}
.acciones-mis-datos{display:flex;flex-direction:column;gap:8px;margin-top:15px;}
.paginacion{margin-top:20px;margin-bottom:30px;text-align:center;}
.paginacion a{display:inline-block;margin:3px;padding:6px 8px;background:#ecf0f1;border-radius:6px;text-decoration:none;color:#2c3e50;font-size:13px;}
.paginacion a:hover{background:#1abc9c;color:#fff;}
.paginacion a.activo{background:#3498db;color:#fff;font-weight:bold;}
.flash {margin: 10px auto;padding: 12px 20px;border-radius: 6px;font-weight: bold;max-width: 600px;text-align: center;box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
.flash.success { background: #2ecc71; color: white; }
.flash.error   { background: #e74c3c; color: white; }
.flash.warning { background: #f39c12; color: white; }