/* =============================================================================
   CÁRITAS DIGITAL — Design System v6 (Premium Redesign)
   Branding: Colores Cáritas (rojo cálido, blanco, gris oscuro)
   Google Font Inter, animaciones, glassmorphism, vibrante y profesional
   ============================================================================= */

/* --- Tipografía: Roboto, alojada en el propio servidor ---
   Sin dependencias externas: no se pide nada a servidores de terceros, así que
   no se envían datos de los usuarios fuera. Roboto es una fuente variable, por
   eso un único archivo cubre todos los grosores (100 a 900).
   Antes se declaraba 'Inter' sin cargarla, así que en la práctica el navegador
   acababa usando la tipografía del sistema. */
@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/muli-latin.woff2') format('woff2');
}
/* Roboto se mantiene declarada como respaldo inmediato mientras carga Muli. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/roboto-variable-latin.woff2') format('woff2');
}

/* --- CSS Variables (Cáritas Branding Premium) --- */
:root {
    /* Cáritas brand colors */
    /* Rojo oficial de Cáritas (tomado de caritas.es). Los tonos claro y oscuro
       se derivan de él para bordes, fondos suaves y estados. */
    --caritas-red: #CD222D;
    --caritas-red-light: #E14B55;
    --caritas-red-dark: #A11B23;
    --caritas-red-50: #FCEEEE;
    --caritas-red-100: #F8D3D6;
    --caritas-red-200: #F0A8AC;

    /* Warm accent */
    --caritas-gold: #F39C12;
    --caritas-gold-light: #F9E79F;

    /* Accent */
    --accent-primary: var(--caritas-red);
    --accent-light: var(--caritas-red-50);

    /* Neutrals */
    --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
    --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
    --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
    --gray-900: #111827;

    /* Semantic */
    --success: #10B981; --success-bg: #D1FAE5;
    --warning: #F59E0B; --warning-bg: #FEF3C7;
    --danger: #EF4444;  --danger-bg: #FEE2E2;
    --info: #3B82F6;    --info-bg: #DBEAFE;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.18);

    /* Radius */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Muli', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }

/* --- Typography --- */
h1 { font-size: 28px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.5px; }
/* Título de cada módulo (Subir Encuestas, Dashboard, Generar Informes...) en el
   rojo de la marca. Se aplica solo a este título, no a todos los h1, para no
   teñir también el de la pantalla de acceso. */
.page-title { color: var(--caritas-red); }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
h3 { font-size: 16px; font-weight: 600; }
.subtitle { font-size: 14px; color: var(--gray-500); margin-top: 4px; }

/* ===================================================================
   LOGIN SCREEN — Animated gradient background
   =================================================================== */
.login-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    /* Fondo fijo con el rojo corporativo. Antes era un degradado de azules que
       se desplazaba en bucle cada 12 segundos, ajeno a la identidad de Cáritas. */
    background: var(--caritas-red);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.login-screen::before {
    content: '';
    position: absolute; inset: 0;
    /* Volumen muy sutil, en la propia gama del rojo. Antes incluía un halo
       naranja que no pertenece a la paleta de la marca. */
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 55%),
                radial-gradient(circle at 75% 85%, rgba(0,0,0,0.12) 0%, transparent 55%);
    pointer-events: none;
}


.login-card {
    background: rgba(255,255,255,0.97); border-radius: var(--radius-xl); padding: 48px 40px;
    width: 440px; max-width: 100%;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    position: relative; z-index: 1;
    animation: cardAppear 0.6s ease-out;
}
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.logo-container { text-align: center; margin-bottom: 32px; }
.logo-icon {
    width: 96px; height: 96px; border-radius: 24px;
    background: rgba(192, 57, 43, 0.05); /* Soft premium Caritas Red tint background */
    border: 1.5px dashed rgba(192, 57, 43, 0.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    transition: transform 0.3s ease;
}
.logo-icon:hover { transform: scale(1.05) rotate(-2deg); }
.logo-icon img {
    width: 76px; height: 76px;
    object-fit: contain;
}
.logo-container h1 { font-size: 26px; color: var(--gray-900); margin-bottom: 4px; letter-spacing: -0.5px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.form-group input,
.form-input {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md); font-size: 14px; transition: all 0.25s ease;
    background: var(--gray-50);
    font-family: 'Muli', 'Roboto', sans-serif;
}
.form-group input:focus, .form-input:focus {
    outline: none; border-color: var(--caritas-red);
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.1);
    background: white;
}
.form-select {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md); font-size: 14px; background: var(--gray-50);
    cursor: pointer; font-family: 'Muli', 'Roboto', sans-serif;
}
.form-select:focus {
    outline: none; border-color: var(--caritas-red);
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.1);
}
.login-btn {
    width: 100%; padding: 14px; background: var(--caritas-red);
    color: white; border: none; border-radius: var(--radius-md); font-size: 15px;
    font-weight: 700; cursor: pointer; transition: all 0.3s ease;
    font-family: 'Muli', 'Roboto', sans-serif;
    letter-spacing: 0.3px;
    position: relative; overflow: hidden;
}
.login-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.login-btn:hover::after { transform: translateX(100%); }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(192, 57, 43, 0.35); }
.login-btn:active { transform: translateY(0); }
.login-error { color: var(--danger); font-size: 13px; margin-bottom: 12px; min-height: 18px; }

/* ===================================================================
   PROJECT SELECTOR — Glassmorphism Cards
   =================================================================== */
.project-selector {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh;
    /* Fondo fijo con el rojo corporativo, igual que la pantalla de acceso.
       Antes era un degradado de azules que se desplazaba en bucle. */
    background: var(--caritas-red);
    padding: 40px 20px; color: white;
    position: relative; overflow: hidden;
}
.project-selector::before {
    content: '';
    position: absolute; inset: 0;
    /* Volumen sutil. El halo rojo anterior era invisible sobre un fondo ya rojo. */
    background: radial-gradient(circle at 50% 25%, rgba(255,255,255,0.10) 0%, transparent 60%),
                radial-gradient(circle at 80% 90%, rgba(0,0,0,0.12) 0%, transparent 55%);
    pointer-events: none;
}
/* Más grande que el h1 general (28px) para que encabece la pantalla con peso. */
.project-selector h1 { color: white; font-size: 40px; line-height: 1.15; margin-bottom: 8px; position: relative; z-index: 1; }
/* Blanco casi puro: sobre el rojo de marca, valores más bajos apenas se leen. */
.project-selector .subtitle { color: rgba(255,255,255,0.95); margin-bottom: 32px; position: relative; z-index: 1; }
.project-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px; width: 100%; max-width: 880px;
    position: relative; z-index: 1;
}
.project-card {
    background: rgba(255,255,255,0.07); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl);
    padding: 32px 24px; text-align: center; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden;
}
.project-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.4s ease;
}
.project-card:hover::before { opacity: 1; }
.project-card:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-6px) scale(1.015);
    /* Sombra más contenida: la anterior (0 20px 40px al 30%) se diseñó para el
       fondo azul oscuro y sobre el rojo resultaba demasiado pesada. */
    box-shadow: 0 10px 22px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}
.project-card.disabled { opacity: 0.45; cursor: not-allowed; }
.project-card .icon {
    /* El icono ya no es texto: se centra como elemento gráfico. */
    font-size: 42px; margin-bottom: 14px; display: flex;
    align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}
.project-card:hover .icon { transform: scale(1.15); }
.project-card h3 { font-size: 17px; font-weight: 700; color: white; margin-bottom: 6px; }
/* La descripción es el texto más pequeño de la pantalla: necesita el máximo contraste. */
.project-card p { font-size: 12px; color: rgba(255,255,255,0.92); line-height: 1.5; }
.project-card .lock-badge {
    position: absolute; top: 14px; right: 14px;
    font-size: 14px; opacity: 0.6;
    /* Ahora contiene un icono, no un emoji: se alinea como tal. */
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===================================================================
   APP LAYOUT — Dark Sidebar
   =================================================================== */
.app-container { display: flex; min-height: 100vh; }

.sidebar {
    width: 268px;
    /* Rojo corporativo. Antes era un degradado de azules ajeno a la marca. */
    background: var(--caritas-red);
    display: flex; flex-direction: column; padding: 24px 0;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

.brand {
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo {
    width: 52px; height: 52px;
    background: rgba(255, 255, 255, 0.08); /* Modern glassmorphism for sidebar dark mode */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    padding: 4px; flex-shrink: 0;
    transition: transform 0.3s ease;
}
.logo:hover { transform: scale(1.08); }
.logo img {
    width: 40px; height: 40px;
    object-fit: contain;
}
.brand h2 { font-size: 16px; color: #fff; font-weight: 700; letter-spacing: -0.3px; }
.project-name {
    /* Blanco casi puro: sobre el rojo de marca, cualquier valor más bajo se queda
       por debajo del mínimo de contraste recomendado para texto pequeño. */
    font-size: 11px; color: rgba(255,255,255,0.95);
    display: block; margin-top: 2px;
}

.sidebar nav {
    flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px;
}
.sidebar-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 10px 4px; }
.nav-link {
    display: flex; align-items: center; gap: 11px; padding: 11px 14px;
    border: none; background: none; border-radius: var(--radius-md);
    /* Blanco casi puro: sobre el rojo de marca, valores más bajos no llegan al
       contraste mínimo recomendado para este tamaño de texto. */
    font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.95);
    cursor: pointer; transition: all 0.2s ease; width: 100%; text-align: left;
    font-family: 'Muli', 'Roboto', sans-serif;
    position: relative;
}
.nav-link:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-link.active {
    /* Invertido: antes era un botón rojo sobre menú azul. Con el menú ya en rojo,
       el rojo sobre rojo no se distinguiría, así que la opción activa va en blanco. */
    background: #fff;
    color: var(--caritas-red-dark); font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.user-section {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
}
.user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--caritas-red-dark);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: white;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Blanco casi puro: con menos opacidad no llega al contraste mínimo sobre el rojo. */
.user-role { font-size: 11px; color: rgba(255,255,255,0.95); }
.logout-btn {
    /* Icono de salir en blanco pleno: es un dibujo fino y necesita el máximo contraste. */
    border: none; background: none; cursor: pointer; color: #fff;
    padding: 6px; border-radius: 8px; transition: all 0.2s;
}
.logout-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* --- Main Content Area --- */
.main-content { flex: 1; margin-left: 268px; display: flex; flex-direction: column; background: #F5F6FA; }
.content-header {
    padding: 22px 32px; border-bottom: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: space-between;
    background: white; position: sticky; top: 0; z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.page-title { font-size: 22px; }
.content-body { padding: 28px 32px; flex: 1; }

/* --- Badges --- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-warning { background: var(--warning-bg); color: #B45309; }
.badge-success { background: var(--success-bg); color: #047857; }
.badge-danger { background: var(--danger-bg); color: #B91C1C; }
.badge-info { background: var(--info-bg); color: #1D4ED8; }

/* ===================================================================
   BUTTONS — With hover animations
   =================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border: none; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Muli', 'Roboto', sans-serif;
    position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-primary {
    background: var(--caritas-red);
    color: white;
    box-shadow: 0 2px 8px rgba(192,57,43,0.25);
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(192,57,43,0.35);
    transform: translateY(-1px);
}
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-200); transform: translateY(-1px); }
.btn-success {
    background: linear-gradient(135deg, #10B981, #34D399);
    color: white; box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.btn-success:hover { box-shadow: 0 6px 20px rgba(16,185,129,0.35); transform: translateY(-1px); }
.btn-danger {
    background: linear-gradient(135deg, #EF4444, #F87171);
    color: white;
}
.btn-ghost { background: transparent; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-50); color: var(--gray-700); }

/* Botón de cerrar anclado a la esquina superior derecha de un modal */
.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-close-btn:hover { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-200); }
.modal-close-btn:active { background: var(--gray-200); }
.modal-close-btn:focus-visible { outline: 2px solid var(--caritas-red); outline-offset: 2px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 10px; border: none; cursor: pointer; }
.btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===================================================================
   CARDS — Subtle elevation and hover
   =================================================================== */
.card {
    background: white; border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-sm); margin-bottom: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
    padding: 18px 24px; border-bottom: 1px solid var(--gray-100);
    display: flex; justify-content: space-between; align-items: center;
}
.card-header h3 { font-size: 15px; color: var(--caritas-red); }
.card-body { padding: 24px; }

/* ===================================================================
   DROP ZONE — Upload area
   =================================================================== */
.drop-zone {
    border: 2px dashed var(--gray-300); border-radius: var(--radius-xl);
    padding: 56px 24px; text-align: center; cursor: pointer;
    transition: all 0.35s ease; position: relative;
    background: linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--caritas-red); background: var(--caritas-red-50);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(192,57,43,0.08);
}
.drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--caritas-red);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; color: white;
    box-shadow: 0 6px 20px rgba(192,57,43,0.25);
    animation: floatIcon 3s ease-in-out infinite;
    /* La animación coloca el icono en una capa propia, por encima del input de
       archivo que cubre la zona. Sin esto, al pinchar justo sobre el icono no se
       abría el explorador de archivos. */
    pointer-events: none;
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.drop-zone h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--gray-800); pointer-events: none; }
.drop-zone p { font-size: 13px; color: var(--gray-500); pointer-events: none; }

/* --- Upload Progress --- */
.upload-progress-container { margin-top: 24px; }
.upload-progress-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--gray-50);
    border-radius: var(--radius-md); margin-bottom: 8px;
    transition: background 0.2s;
    border: 1px solid var(--gray-100);
}
.upload-progress-item .filename { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-bar-outer { width: 140px; height: 6px; background: var(--gray-200); border-radius: 10px; overflow: hidden; }
.progress-bar-inner { height: 100%; background: var(--caritas-red); border-radius: 10px; transition: width 0.5s ease; }
.upload-progress-item .status-icon { font-size: 16px; }

/* --- Upload Summary --- */
.upload-summary { margin-top: 24px; }
.summary-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.summary-stat { text-align: center; }
.summary-stat .num { font-size: 36px; font-weight: 800; }
.summary-stat .label { font-size: 12px; color: var(--gray-500); font-weight: 500; }

/* ===================================================================
   STATS GRID — Dashboard metrics cards
   =================================================================== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card {
    background: white; border-radius: var(--radius-lg); padding: 22px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--caritas-red);
    opacity: 0; transition: opacity 0.3s;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.stat-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.stat-icon.red { background: var(--caritas-red-50); color: var(--caritas-red); }
.stat-icon.green { background: #D1FAE5; color: #059669; }
.stat-icon.amber { background: #FEF3C7; color: #D97706; }
.stat-icon.purple { background: #EDE9FE; color: #7C3AED; }
.stat-value { font-size: 30px; font-weight: 800; color: var(--gray-900); letter-spacing: -1px; }
.stat-desc { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

/* --- Filter Bar --- */
.filter-bar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    padding: 14px 18px; background: white; border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.06); flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.filter-bar label { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.filter-bar input[type="date"] {
    padding: 7px 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: 12px; width: 140px; font-family: 'Muli', 'Roboto', sans-serif;
}
.search-wrapper { position: relative; flex: 1; min-width: 200px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.search-input {
    width: 100%; padding: 10px 14px 10px 40px;
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-md);
    font-size: 13px; font-family: 'Muli', 'Roboto', sans-serif;
    transition: all 0.25s;
}
.search-input:focus { outline: none; border-color: var(--caritas-red); box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.08); }

/* --- Satisfaction Bars --- */
.sat-bar-item { margin-bottom: 14px; }
.sat-bar-label { font-size: 13px; color: var(--gray-700); margin-bottom: 5px; display: flex; justify-content: space-between; font-weight: 500; }
.sat-bar-track { height: 10px; background: var(--gray-100); border-radius: 12px; overflow: hidden; }
.sat-bar-fill { height: 100%; border-radius: 12px; transition: width 1s ease; background: var(--caritas-red); }

/* --- Data Table --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
}
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--gray-100); }
.data-table tr { transition: background 0.2s; }
.data-table tr:hover td { background: var(--gray-50); }

/* ===================================================================
   REVIEW PANEL — Split view with form
   =================================================================== */
.review-header {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin-bottom: 16px; padding: 18px 22px;
    background: white; border-radius: var(--radius-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.review-counter { font-size: 14px; color: var(--gray-600); margin-top: 2px; }
.review-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: white; border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden; min-height: 70vh;
    box-shadow: var(--shadow-sm);
}
.review-image-panel {
    background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative; padding: 12px;
}
.review-image-panel img {
    max-width: 100%; height: auto; object-fit: contain;
    transition: transform 0.2s ease; transform-origin: center center;
}
.review-image-panel img.zoomed {
    /* Se remueve max-width: none para permitir grab-to-pan suave mediante CSS transform scale sin scrollbars */
}
.review-data-panel {
    padding: 24px; overflow-y: auto; max-height: 80vh;
}

.review-field { margin-bottom: 16px; }
.review-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--gray-700);
    margin-bottom: 5px;
}
.review-field .checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
}
.review-field .checkbox-label input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}
.review-field .checkbox-label span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    text-align: left !important;
}
.review-field input:not([type="checkbox"]), .review-field select, .review-field textarea {
    width: 100%; padding: 9px 14px;
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    font-size: 13px; transition: all 0.2s;
    font-family: 'Muli', 'Roboto', sans-serif;
}
.review-field input[type="checkbox"] {
    width: auto !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}
.review-field input:focus, .review-field select:focus, .review-field textarea:focus {
    outline: none; border-color: var(--caritas-red);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.review-field textarea { min-height: 64px; resize: vertical; }

.review-field.reliable {
    border-left: 3px solid var(--success);
    padding-left: 12px; margin-left: -12px;
    background: #F0FDF4; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 12px;
}

.review-field.doubt {
    border-left: 3px solid var(--warning);
    padding-left: 12px; margin-left: -12px;
    background: var(--warning-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 12px;
}

.review-field.illegible {
    border-left: 3px solid var(--danger);
    padding-left: 12px; margin-left: -12px;
    background: var(--danger-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 12px;
}

.review-field.reliable label::after,
.review-field.doubt label::after,
.review-field.illegible label::after {
    content: none !important;
}


.review-field.reliable input:not([type="checkbox"]),
.review-field.reliable select,
.review-field.reliable textarea {
    border-color: var(--success) !important;
    background-color: #F8FDF9 !important;
}

.review-field.doubt input:not([type="checkbox"]),
.review-field.doubt select,
.review-field.doubt textarea {
    border-color: var(--warning) !important;
    background-color: #FFFDF5 !important;
}

.review-field.illegible input:not([type="checkbox"]),
.review-field.illegible select,
.review-field.illegible textarea {
    border-color: var(--danger) !important;
    background-color: #FFF5F5 !important;
}

.anomaly-banner {
    background: linear-gradient(135deg, #FEE2E2, #FFF1F2);
    border: 1.5px solid #F87171;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
    color: #991B1B;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
}
.field-section-title {
    font-size: 13px; font-weight: 700; color: var(--caritas-red);
    padding: 8px 0 6px; margin-top: 8px; border-bottom: 1px solid var(--caritas-red-100);
    margin-bottom: 12px;
}
.audio-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--gray-200); border-radius: 8px;
    background: white; cursor: pointer; color: var(--gray-600);
    margin-left: 8px; transition: all 0.2s;
    font-family: 'Muli', 'Roboto', sans-serif;
}
.audio-btn:hover { background: var(--caritas-red-50); border-color: var(--caritas-red); color: var(--caritas-red); }
.audio-btn.recording { background: var(--danger); color: white; border-color: var(--danger); animation: pulse 1.2s infinite; }

.ai-suggest-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    border: 1px solid #d8b4fe; border-radius: 8px;
    background: #faf5ff; cursor: pointer; color: #6b21a8;
    margin-left: 8px; transition: all 0.2s;
    font-family: 'Muli', 'Roboto', sans-serif;
}
.ai-suggest-btn:hover { background: #f3e8ff; border-color: #a855f7; color: #581c87; }
.ai-suggest-btn.loading { opacity: 0.7; cursor: wait; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* --- Empty State --- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--gray-400); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; color: var(--gray-600); margin-bottom: 4px; }

/* ===================================================================
   TOASTS — Notifications
   =================================================================== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
    padding: 14px 22px; border-radius: var(--radius-md); font-size: 13px;
    font-weight: 600; color: white; box-shadow: var(--shadow-lg);
    animation: slideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-width: 380px;
    font-family: 'Muli', 'Roboto', sans-serif;
}
.toast-success { background: linear-gradient(135deg, #10B981, #34D399); }
.toast-error { background: linear-gradient(135deg, #EF4444, #F87171); }
.toast-warning { background: linear-gradient(135deg, #F59E0B, #FBBF24); color: #1F2937; }
.toast-info { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
@keyframes slideIn { from { transform: translateX(100%) scale(0.8); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

/* --- Loading --- */
.loading-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 200;
}
.spinner {
    width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.2);
    border-top: 3px solid var(--caritas-red); border-right: 3px solid var(--caritas-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite; margin-bottom: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay p { color: white; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; }

/* --- Opinion Item --- */
.opinion-item {
    padding: 16px 18px; background: var(--gray-50);
    border-radius: var(--radius-md); margin-bottom: 10px;
    border-left: 3px solid var(--caritas-red-200);
    transition: all 0.2s;
}
.opinion-item:hover { background: var(--caritas-red-50); border-left-color: var(--caritas-red); }
.opinion-item .opinion-quote { font-size: 14px; font-style: italic; color: var(--gray-700); margin-bottom: 6px; line-height: 1.6; }
.opinion-item .opinion-meta { font-size: 11px; color: var(--gray-400); font-weight: 500; }

/* --- Costs Table --- */
.costs-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.costs-table th, .costs-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--gray-100); }
.costs-table th { background: var(--gray-50); font-weight: 600; color: var(--gray-600); font-size: 11px; text-transform: uppercase; }
.costs-table .recommended { background: #D1FAE5; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    #view-dashboard > div:nth-child(3) { grid-template-columns: 1fr; }
    .review-panel { grid-template-columns: 1fr; }
    .review-image-panel { max-height: 40vh; }
}
@media (max-width: 900px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    .brand h2 { font-size: 14px; }
    .content-body { padding: 16px; }
}
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .stats-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .review-panel { grid-template-columns: 1fr; }
    .content-header { padding: 16px; }
    .content-body { padding: 12px; }
}
@media (max-width: 640px) {
    .login-card { padding: 32px 24px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    #edit-modal > div > div:last-child { grid-template-columns: 1fr !important; }
}

/* ===================================================================
   ADMINISTRATION VIEW
   =================================================================== */
.admin-table {
    width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px;
}
.admin-table th, .admin-table td {
    padding: 12px 14px; text-align: left; border-bottom: 1.5px solid var(--gray-100);
}
.admin-table th {
    background: var(--gray-50); font-weight: 700; color: var(--gray-700); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.admin-table tr:hover {
    background: var(--gray-50);
}
.admin-card {
    background: white; border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,0.06);
    padding: 20px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.admin-card h3 {
    margin-bottom: 14px; color: var(--caritas-red); font-size: 16px;
    border-bottom: 2px solid var(--caritas-red-100); padding-bottom: 10px;
}
.recovery-link {
    display: block; text-align: right; margin-top: -12px; margin-bottom: 16px;
    font-size: 13px; color: var(--caritas-red); cursor: pointer; text-decoration: underline;
    font-weight: 500;
}
.recovery-link:hover {
    color: var(--caritas-red-dark);
}

/* ===================================================================
   FAITHFUL DIGITAL PAPER FORM GENERATOR (Re10P03 Rev.05 / v2026.01)
   =================================================================== */
.faithful-paper-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #475569;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.faithful-paper-container {
    background: #ffffff;
    width: 100%;
    max-width: 800px;
    min-height: 1050px;
    padding: 24px 32px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 1px solid #cbd5e1;
    font-family: 'Arial', sans-serif;
    color: #1e293b;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
}

.faithful-header-table {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid #000;
    margin-bottom: 12px;
}

.faithful-header-table td {
    border: 1.5px solid #000;
    padding: 6px 10px;
    vertical-align: middle;
}

.faithful-section-box {
    border: 1.5px solid #000;
    margin-bottom: 12px;
}

.faithful-section-title-bar {
    background: #f1f5f9;
    font-weight: bold;
    font-size: 13px;
    padding: 4px 8px;
    border-bottom: 1.5px solid #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.faithful-grid-table {
    width: 100%;
    border-collapse: collapse;
}

.faithful-grid-table th, .faithful-grid-table td {
    border: 1.5px solid #000;
    padding: 4px 8px;
    font-size: 11.5px;
    vertical-align: middle;
}

.faithful-grid-table th {
    background: #f1f5f9;
    text-align: center;
    font-weight: bold;
}

.faithful-grid-table th.scale-header {
    background: #fee2e2;
    color: #991b1b;
    width: 26px;
    font-size: 11px;
}

.faithful-grid-table th.scale-header-green {
    background: #dcfce7;
    color: #166534;
    width: 26px;
    font-size: 11px;
}

.faithful-circle-cell {
    text-align: center;
    width: 26px;
    padding: 2px !important;
}

.faithful-circle {
    width: 18px;
    height: 18px;
    border: 1.5px solid #64748b;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--caritas-red);
    background: #fff;
    line-height: 1;
    transition: all 0.2s ease;
}

.faithful-circle.marked {
    border-color: var(--caritas-red);
    background: #fef2f2;
    box-shadow: 0 0 0 1px var(--caritas-red);
}

.faithful-instructions-box {
    border: 1.5px solid #000;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 10.5px;
    line-height: 1.35;
    background: #fafafa;
}

.faithful-instructions-title {
    font-weight: bold;
    font-size: 11.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 2px;
}

.faithful-text-area {
    width: 100%;
    min-height: 110px;
    border: 1.5px solid #000;
    padding: 10px 14px;
    margin-bottom: 12px;
    background-image: repeating-linear-gradient(transparent, transparent 23px, #e2e8f0 24px);
    line-height: 24px;
    font-family: 'Comic Sans MS', 'Segoe Print', cursive, sans-serif;
    font-size: 13px;
    color: #1e3a8a;
    box-sizing: border-box;
    white-space: pre-wrap;
}

.faithful-footer {
    font-size: 9.5px;
    color: #64748b;
    text-align: center;
    border-top: 1px solid #cbd5e1;
    padding-top: 6px;
    margin-top: 16px;
}

/* ===================================================================
   v2025 PAPER FORM SPECIFIC STYLING (Re10_P03 Rev.04)
   =================================================================== */
.v2025-scale-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 12px 0;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1.5px solid #000;
    border-radius: 4px;
}

.v2025-scale-num {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: #ffffff;
    border-radius: 3px;
}
.v2025-scale-1 { background: #ef4444; }
.v2025-scale-2 { background: #f97316; }
.v2025-scale-3 { background: #f59e0b; }
.v2025-scale-4 { background: #eab308; }
.v2025-scale-5 { background: #84cc16; }
.v2025-scale-6 { background: #22c55e; }
.v2025-scale-7 { background: #10b981; }
.v2025-scale-8 { background: #06b6d4; }
.v2025-scale-9 { background: #3b82f6; }
.v2025-scale-10 { background: #1d4ed8; }

.v2025-rating-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.v2025-rating-table td {
    border: 1.5px solid #000;
    padding: 6px 10px;
    font-size: 11.5px;
    vertical-align: middle;
}

.handwritten-phrase-badge {
    display: inline-block;
    background: #eff6ff;
    color: #1e40af;
    font-family: 'Comic Sans MS', 'Segoe Print', cursive, sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed #93c5fd;
    margin-left: 6px;
}

.score-num-badge {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}



/* ===================================================================
   OBSERVACIONES DEL REVISOR — Tono Naranja Específico (Petición Usuario)
   =================================================================== */
.review-field.review-field-orange,
.review-field:has(#rf-supervisor_observaciones),
.review-field:has(#rf-notas_revision) {
    border-left: 3px solid #EA580C !important;
    background: #FFF7ED !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 12px;
}

.review-field.review-field-orange textarea,
.review-field:has(#rf-supervisor_observaciones) textarea,
.review-field:has(#rf-notas_revision) textarea {
    border-color: #FDBA74 !important;
    background: #FFFFFF !important;
}

.review-field.review-field-orange textarea:focus,
.review-field:has(#rf-supervisor_observaciones) textarea:focus,
.review-field:has(#rf-notas_revision) textarea:focus {
    outline: none !important;
    border-color: #EA580C !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}

.review-field.review-field-orange.reliable label::after,
.review-field:has(#rf-supervisor_observaciones).reliable label::after,
.review-field:has(#rf-notas_revision).reliable label::after {
    content: none !important;
}