/* === ESTILOS BASE PURA (CERO CÓDIGO DE IMPRESIÓN / CERO SOMBRAS) === */
:root {
    --bg-global: #0f0f0f; 
    --box-bg: rgba(28, 28, 28, 0.90);
    --box-header: rgba(15, 15, 15, 1);
    --box-border: rgba(255, 255, 255, 0.12);
    --input-bg: rgba(10, 10, 10, 0.8);
    --text-main: #FFFFFF;
    --text-secondary: #a0b2c0;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --status-green: #28CD41; 
    --status-red: #FF3B30;
    --status-yellow: #FFCC00;
}

*::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; box-sizing: border-box; margin: 0; padding: 0; }

body { 
    margin: 0; padding: 0; font-family: var(--font-main); color: var(--text-main); 
    /* Nota: La ruta de la imagen se actualizó para buscar en la carpeta 'logos' */
    background-image: linear-gradient(rgba(15,15,15,0.6), rgba(15,15,15,0.6)), url('../logos/APP 360-1.png'); 
    background-size: cover; background-position: center; background-attachment: fixed; 
    background-color: var(--bg-global); overflow: hidden; height: 100vh; width: 100vw;
    display: flex; flex-direction: column;
}

.app-container { flex-grow: 1; height: calc(100vh - 45px); overflow: hidden; position: relative; }
.app-view { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto;}
.active-view { display: flex; opacity: 0; animation: fadeIn 0.4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.btn-ghost { background: var(--input-bg); border: 1px solid var(--box-border); color: #fff; padding: 12px 25px; border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-action-sober { background: #fff; color: #000; border: none; padding: 15px; border-radius: 8px; width: 100%; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s; }
.btn-action-sober:hover { background: #e0e0e0; }

label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); display: block; margin-top: 15px; margin-bottom: 8px; font-weight: 800; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"], select { 
    width: 100%; background: var(--input-bg); border: 1px solid var(--box-border); 
    color: #fff; padding: 12px; border-radius: 8px; box-sizing: border-box; font-size: 13px; font-family: var(--font-main); transition: 0.3s; color-scheme: dark;
}
input:focus, select:focus { border-color: #fff; outline: none; background: #000; }
input[readonly] { background: rgba(255, 255, 255, 0.02); color: #fff; font-weight: 900; border-color: transparent; text-align: center; font-size: 15px; letter-spacing: 2px;}

.module-wrapper { width: 96%; max-width: 1600px; display: flex; flex-direction: column; height: 100%; padding: 25px 0; }
.split-layout { display: grid; grid-template-columns: 320px 1fr; gap: 25px; flex-grow: 1; height: calc(100% - 60px); overflow: hidden;}

.glass-panel-full { background: var(--box-bg); border-radius: 12px; border: 1px solid var(--box-border); display: flex; flex-direction: column; overflow: hidden; height: 100%; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);}
.panel-header-sm { background: var(--box-header); padding: 15px 20px; border-bottom: 1px solid var(--box-border); font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;}
.scrollable-content { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }

.layout-empresas { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; }
.layout-center { display: flex; justify-content: center; gap: 40px; align-items: center; padding: 0 20px; flex-wrap: wrap;}
.card-empresa { width: 100%; max-width: 420px; height: 260px; background: var(--box-bg); border-radius: 12px; border: 1px solid var(--box-border); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease;}
.card-empresa:hover { border-color: #fff; transform: scale(1.02); background: #222; }
.logo-empresa { height: 90px; max-width: 80%; object-fit: contain; margin-bottom: 25px; filter: grayscale(100%) opacity(0.7); transition: 0.4s; }
.card-empresa:hover .logo-empresa { filter: grayscale(0%) opacity(1); }
.titulo-empresa { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: 4px; text-transform: uppercase; text-align: center; }

.modulos-container { width: 90%; max-width: 1200px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.header-title { text-align:center; letter-spacing:4px; font-weight:900; color: var(--text-main); font-size: 24px; text-transform: uppercase; margin-bottom: 5px;}
.menu-subtitle { text-align: center; color: var(--text-secondary); letter-spacing: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; margin-top: 10px; }
.grid-6-modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; }
.card-modulo { background: var(--box-bg); border-radius: 12px; border: 1px solid var(--box-border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 15px; cursor: pointer; text-align: center; transition: 0.3s; min-height: 140px;}
.card-modulo:hover { border-color: #fff; transform: translateY(-3px); background: #222; }
.card-modulo i { font-size: 32px; margin-bottom: 15px; color: #fff; opacity: 0.9;}
.card-modulo span { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 1.5px; text-transform: uppercase; }
.locked-card { opacity: 0.3; filter: grayscale(100%); cursor: not-allowed; border-color: transparent;}

.tabs-vertical { display: flex; flex-direction: column; gap: 8px; padding: 15px;}
.tab-btn { background: transparent; color: var(--text-secondary); border: none; padding: 15px 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-left: 3px solid transparent; text-align: left; transition: 0.3s; border-radius: 0 6px 6px 0;}
.tab-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tab-btn.active { background: rgba(255,255,255,0.1); color: #fff; border-left-color: var(--status-green); }
.tab-content { display: none; flex-grow: 1; padding: 5px 15px;}
.tab-content.active { display: block; animation: fadeIn 0.3s forwards;}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 20px; }

.foto-upload-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--input-bg); border: 1px dashed var(--box-border); border-radius: 8px; padding: 20px; min-height: 220px; margin-bottom: 20px;}
.foto-avatar-preview { width: 130px; height: 130px; border-radius: 8px; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 40px; color: var(--text-secondary); margin-bottom: 15px;}
.section-title { font-size: 10px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid var(--box-border); padding-bottom: 8px; margin-top: 20px; margin-bottom: 10px; }

.emp-card { background: var(--input-bg); border: 1px solid var(--box-border); border-radius: 8px; padding: 12px; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; }
.emp-card:hover { background: rgba(255, 255, 255, 0.05); border-color: #fff; transform: translateX(5px);}

.profile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; background: var(--input-bg); padding: 20px; border-radius: 8px; border: 1px solid var(--box-border);}
.foto-perfil-boveda { width: 85px; height: 85px; border-radius: 8px; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 30px; color: var(--text-secondary); margin-right: 20px; object-fit: cover; border: 1px solid var(--box-border);}
.status-badge { display: inline-block; padding: 5px 12px; border-radius: 4px; font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; border: 1px solid currentColor;}

.visor-nav { display: flex; border-bottom: 1px solid var(--box-border); margin-bottom: 15px; background: var(--box-header); border-radius: 8px 8px 0 0;}
.visor-nav-btn { flex: 1; padding: 12px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s; }
.visor-nav-btn.active { color: #fff; border-bottom-color: var(--status-green); background: rgba(255,255,255,0.03); }
.visor-tab-content { display: none; }
.visor-tab-content.active { display: block; animation: fadeIn 0.3s forwards;}

.erp-section-title { font-size: 10px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; border-left: 3px solid var(--text-secondary); padding-left: 8px; margin-top: 10px;}
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 25px;}
.data-box { background: var(--input-bg); border: 1px solid var(--box-border); padding: 15px; border-radius: 8px;}
.info-label { font-size: 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 800;}
.info-value { font-size: 13px; color: #fff; font-weight: 700; word-break: break-word;}

.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;}
.doc-card { background: var(--input-bg); border: 1px solid var(--box-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; min-height: 110px;}
.doc-card.ok { border-color: rgba(40,205,65,0.4); background: rgba(40,205,65,0.05); }
.doc-card.missing { border-color: rgba(255,59,48,0.2); }
.doc-icon { font-size: 22px; margin-bottom: 8px; }
.doc-card.ok .doc-icon { color: var(--status-green); }
.doc-card.missing .doc-icon { color: var(--text-secondary); opacity: 0.5; }
.doc-title { font-size: 7px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; width: 100%;}

.doc-actions { display: flex; gap: 4px; width: 100%; justify-content: center;}
.action-btn { background: rgba(0,0,0,0.6); border: 1px solid var(--box-border); color: #fff; padding: 6px; border-radius: 4px; font-size: 9px; cursor: pointer; flex: 1; transition: 0.2s; }
.action-btn:hover { background: rgba(255,255,255,0.1); }
.btn-ver:hover { color: #3498db; border-color: #3498db; }
.btn-subir:hover { color: var(--status-green); border-color: var(--status-green); }
.btn-eliminar:hover { color: var(--status-red); border-color: var(--status-red); }

footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 45px; background: #000000; color: #666; font-size: 9px; display: flex; justify-content: center; align-items: center; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; z-index: 100; text-align: center; padding: 0 10px; box-sizing: border-box; }

.modal-visor { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10,10,10,0.95); z-index: 3000; justify-content: center; align-items: center; backdrop-filter: blur(5px);}
.visor-box { width: 85%; height: 85%; background: #0a0a0a; border-radius: 8px; border: 1px solid var(--box-border); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,1);}
.visor-header { padding: 15px 25px; background: #000; border-bottom: 1px solid var(--box-border); display: flex; justify-content: space-between; align-items: center;}
.iframe-container { flex-grow: 1; width: 100%; display: flex; justify-content: center; align-items: center; color: var(--text-secondary); font-weight: 800; letter-spacing: 2px;}