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

/* ================= BASE ================= */
body {margin: 0;font-family: Arial;}
.container {display: flex;position: absolute;top: 60px;left: 0;right: 0;bottom: 0;}

/* ================= LOGIN ================= */
#centerindex {position:absolute;left:50%;top:50%;width:392px;height:300px;margin-top:-150px;margin-left:-196px;text-align:right;}
#centerindex .logininput {text-align:center;width:390px;height:40px;border:1px solid gray;border-radius:5px;font-size:24px;color:gray;}
#titleindex {text-align:center;font-size:36px;color:#498af2;}
#enter {width:100px;height:40px;background-color:#498af2;border-radius:5px;color:white;font-weight:bold;font-size:24px;border:1px solid #3d7fed;}
#enter:hover {cursor:pointer;background-color:#3178ed;}
input[type="email"],input[type="password"] {text-align: center;}

/* ================= SIDEBAR / TREE ================= */
.sidebar {font-size:12px;width:400px;min-width:300px;max-width:500px;background:#2c3e50;color:white;padding:10px;overflow-y:auto;overflow-x:hidden;flex-shrink: 0;}
.sidebar h3 {margin:0;}
#tree ul {list-style:none;padding-left:15px;}
.tree-row {display:flex;align-items:center;cursor:pointer;padding:4px;border-radius:4px;}
.tree-row:hover {background:#34495e;}
.tree-selected,.tree-selected:hover {background:#1abc9c!important;color:white;}
.arrow {width:15px;display:inline-block;}
.icon {width:20px;margin-right:5px;position:relative;top:-2px;}
.tree-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.tree-header h3 {margin:0;font-size:12px;line-height:28px;}
.tree-buttons {display:flex;gap:5px;}
.tree-buttons button {width:28px;height:28px;border:none;border-radius:4px;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:15px;}
.tree-item {font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tree-actions {display:flex;gap:6px;}
.add-folder,.delete-folder {opacity:0;cursor:pointer;}
.tree-row:hover .add-folder,.tree-row:hover .delete-folder {opacity:1;}
.delete-folder {color:#e74c3c;}
.tree-search {width:100%;box-sizing:border-box;padding:6px;margin-bottom:10px;border-radius:4px;border:none;outline:none;margin-top:10px;}
.menu-toggle {display:none;}

/* ================= CONTENT ================= */
.content {flex: 1;min-width: 0;padding: 15px;background: #ecf0f1;overflow-y: auto;overflow-x: hidden;scrollbar-gutter: stable;scrollbar-gutter: stable both-edges;}
.content-header {position: sticky;top: 0;z-index: 10;background: #ecf0f1;padding-bottom: 10px;}
.search-container {width:100%;margin-bottom:10px;}
#buscador {width:100%;padding:8px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;}

/* ================= TABLA ================= */
.tabla-wrapper {width: 100%;overflow-x: auto;}
table {width:100%;border-collapse:collapse;background:white;font-size:12px;table-layout: auto}
/* #tabla td:first-child,#tabla th:first-child {width:35%;font-weight:bold;} */
#tabla td:first-child, #tabla th:first-child {max-width: 300px; overflow: hidden;text-overflow: ellipsis;}
#tabla th:nth-child(5),#tabla td:nth-child(5),#tabla th:nth-child(6),#tabla td:nth-child(6) {width:80px;text-align:center;}
/* td,th {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} */
td, th {white-space: normal;}

th {background:#34495e;color:white;padding:8px;text-align:left;cursor:pointer;user-select:none;border-bottom:1px solid #2c3e50;}
th:hover {background:#2c3e50;}
td {padding:8px;border-bottom:1px solid #ccc;text-align:left;vertical-align:middle;}
#tabla tbody tr:hover td {background:#f5f5f5;}
#tabla tbody tr.selected-row td {background:#1abc9c!important;color:white;}
#tabla tbody tr td {transition:background 0.2s;}

/* ================= BADGES ESTADO ================= */
.estado {display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500;}
.estado.pendiente {background:#e74c3c;color:white;}
.estado.finalizado {background:#1abc9c;color:white;}

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

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

/* ================= NOTIFICACIONES ================= */
.noti {position:fixed;top:80px;right:20px;padding:12px 16px;border-radius:8px;color:white;font-size:13px;z-index:9999;display:none;box-shadow:0 6px 20px rgba(0,0,0,0.2);animation:slideIn 0.3s ease;}
.noti.error {background:#e74c3c;}
.noti.success {background:#1abc9c;}
.noti.warning {background:#f39c12;}
@keyframes slideIn {from {transform:translateX(120%);opacity:0;} to {transform:translateX(0);opacity:1;}}

/* ================= MENU CONTEXTUAL ================= */
#menuGlobal {display:none;position:fixed;background:white;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,0.2);min-width:180px;z-index:9999;overflow:hidden;animation:menuFade 0.15s ease;}
#menuGlobal div {padding:10px 14px;font-size:13px;cursor:pointer;transition:0.2s;}
#menuGlobal div:hover {background:#f4f6f7;}
#menuGlobal div + div {border-top:1px solid #eee;}
@keyframes menuFade {from {opacity:0;transform:translateY(-5px);} to {opacity:1;transform:translateY(0);}}
.menu-sep {height:1px;background:#eee;margin:5px 0;}


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

/* ================= PANEL LATERAL ================= */
.panel-lateral {position:fixed;top:0;right:-400px;width:400px;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:10px;background:#34495e;color:white;display:flex;justify-content:space-between;align-items:center;}
#panelContenido {padding:10px;overflow-y:auto;flex:1;}

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

/* ================= OPCIONES ================= */
.cards-opciones{width:70%;max-width:1000px;margin:0 auto;padding-bottom:50px;padding-top:150px;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:80%;max-width:1100px;margin:0 auto;padding-top:90px;display:flex;flex-direction:column;gap:25px;}
.bloque{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.bloque h3{margin-bottom:15px;}
.bloque form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.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{height:36px;min-width:110px;display:flex;align-items:center;justify-content:center;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:0.2s;}
.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:18px;border-radius:10px;border:1px solid #eee;background:#fafafa;gap:12px;margin-bottom:15px;}
.usuario-card form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
.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;gap:10px;margin-top:5px;}
.acciones-mis-datos{display:flex;gap:12px;margin-top:15px;}
.paginacion{margin-top:25px;margin-bottom:40px;text-align:center;}
.paginacion a{display:inline-block;margin:4px;padding:6px 10px;background:#ecf0f1;border-radius:6px;text-decoration:none;color:#2c3e50;}
.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; }