/*
 * Archivo: css/styles.css (visual unificado)
 * Integra el look & feel de las plantillas (index1/index2) sin modificar la lógica.
 * Se mantiene Tailwind para compatibilidad con las clases existentes.
 */

/* Tailwind para compatibilidad con las vistas actuales */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Tipografía base */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Variables y tokens (de las plantillas) */
:root{
    /* Paleta de marca (según referencia) */
    --brand-primary:#234B46;   /* teal oscuro */
    --brand-secondary:#5E8A80; /* teal medio */
    --brand-accent:#C9A227;    /* dorado */
    --brand-bg:#F3F1EA;        /* fondo marfil */
    --brand-ink:#22302E;       /* tinta principal */

    /* Tokens usados por la app, apuntan a la paleta */
    --bg:var(--brand-bg);
    --ink:var(--brand-ink);
    --border:var(--brand-primary);
    --input-bg:#ffffff;
    --muted:#6b7c78;
    --btn:var(--brand-primary);
    --btn-ink:#ffffff;
    --radius:12px; 
    --radius-sm:10px; 
    --shadow:0 2px 0 #00000022;
}

/* Base */
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

/* Mejoras generales mobile-first */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
button, a, input, select, textarea { min-height: 44px; }

/* Header fijo con safe-area para iOS notch */
header.fixed { padding-top: calc(1rem + env(safe-area-inset-top)); }
/* Forzar color de header a primario de marca (sobre inline) */
header.fixed{ background-color: var(--brand-primary) !important; }
/* Iconos del header en dorado */
header.fixed .icon { color: var(--brand-accent) !important; }
body { padding-top: env(safe-area-inset-top); }

/* Scroll horizontal suave en contenedores con overflow */
.overflow-x-auto { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Botones accesibles en móviles */
.btn-primary,
.btn { min-height: 44px; line-height: 1.2; }

/* Campos accesibles en móviles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea { min-height: 44px; }

/* Utilidades de visibilidad */
.mobile-hidden { display: none; }
@media (min-width: 640px) { .mobile-hidden { display: initial; } }
.desktop-hidden { display: initial; }
@media (min-width: 640px) { .desktop-hidden { display: none; } }

/* Tarjetas/formularios (aplican a .form-card existente) */
.form-card{
    background: #ffffff;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
}

/* Controles de formulario generales */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
    background: var(--input-bg);
    border: 3px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 1rem;
    outline: none;
    box-shadow: var(--shadow);
}
textarea{min-height:105px; resize:vertical}

/* Estados de foco accesibles */
input:focus, select:focus, textarea:focus{
    border-color:var(--brand-secondary);
    box-shadow: 0 0 0 3px rgba(94,138,128,.25);
}

/* Etiquetas/labels estilizadas */
.label{font-size:18px; font-weight:700; letter-spacing:.6px}

/* Botones principales: mapeo a .btn-primary ya usado */
.btn-primary,
.btn{
    background: var(--btn);
    color: var(--btn-ink);
    font-weight: 800;
    border: none;
    border-radius: var(--radius);
    padding: 12px 20px;
    font-size: 1rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .08s ease, filter .2s ease;
}
.btn-primary:hover,.btn:hover{ filter: brightness(.95) }
.btn-primary:active,.btn:active{ transform: translateY(1px) }

/* Variante de botón acento (opcional) */
.btn-accent{ background: var(--brand-accent); color:#243331 }
.btn-accent:hover{ filter: brightness(.98) }

/* Radios (para casos que no usan Tailwind) */
input[type="radio"]{
    appearance:none; -webkit-appearance:none;
    width: 1.25rem; height: 1.25rem; border: 3px solid var(--border);
    background:#f0f0f0; border-radius:8px; position:relative; box-shadow: var(--shadow);
}
input[type="radio"]:after{
    content:""; position:absolute; inset:4px; border-radius:999px; background:#0a6c86; transform:scale(0); transition:transform .12s;
}
input[type="radio"]:checked:after{ transform: scale(1) }

/* Cuadros/box para consecutivo o datos destacados */
.consecutivo-box{
    background: var(--input-bg);
    border: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    min-width: 160px;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
}

/* Ícono de cámara reutilizable (si se usa) */
.icon-camera{
    display:inline-block; width:24px; height:24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300796B'%3E%3Cpath d='M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; margin-right: 8px; vertical-align: middle;
}

/* Tablas (mejora visual sutil) */
.data-table{ width:100%; border-collapse: collapse }
.data-table th, .data-table td{ padding:12px 15px; text-align:left; border-bottom:1px solid #e5e7eb; font-size:.9rem; white-space:nowrap }
.data-table th{ background:var(--brand-primary); color:#fff; font-weight:600; text-transform:uppercase; position:sticky; top:0; z-index:10 }
.data-table tr:nth-child(even){ background:#f9fafb }
.data-table tr:hover{ background:#f3f4f6 }

/* Ajustes para pantallas pequeñas */
@media (max-width: 640px) {
    /* Tipografía ligeramente mayor para legibilidad */
    body { font-size: 16px; }
    .form-card { padding: 16px; }
    /* Mesas: celdas más cómodas al tacto */
    .min-w-full th, .min-w-full td { padding: 12px 10px; }
    /* Evitar solapes del header fijo con el contenido */
    .mt-20 { margin-top: 5.5rem; }
}

/* Iconos: tamaño y color reutilizables */
.icon { display: inline-block; line-height: 1; vertical-align: middle; color: var(--brand-accent); }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-red { color: #dc2626; }

/* Tarjetas de navegación del Home */
.nav-card{
    display:flex; flex-direction: column; justify-content: flex-start; gap: .25rem;
    background:#fff; border:3px solid var(--border);
    border-radius: var(--radius); padding:18px; text-decoration:none; color:inherit;
    box-shadow: var(--shadow); transition: transform .08s ease, box-shadow .2s ease;
    height: 240px; /* altura uniforme en escritorio */
}
@media (max-width: 640px){
    .nav-card{ height: 200px; }
}
.nav-card:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12) }
.nav-card h3{ font-weight:700 }
.nav-card p{ color: var(--muted) }

/* Forzar el color dorado en los íconos grandes de las cards (antes teal) */
.nav-card .text-teal-600{ color: var(--brand-accent) !important; }

/* Pequeños detalles con acento dorado */
.accent-underline{ position: relative; display:inline-block }
.accent-underline:after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:4px; background:var(--brand-accent); border-radius:2px;
}

/* Variante oscura de marca para el Home */
.home-dark .nav-card{
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
}
.home-dark .nav-card:hover{ box-shadow: 0 6px 14px rgba(0,0,0,.18) }
.home-dark .nav-card h3{ color: #ffffff }
.home-dark .nav-card p{ color: #E7E4D8 }
.home-dark .nav-card .text-teal-600{ color: var(--brand-accent) !important; }

/* Utilidad para icono dorado reutilizable */
.icon-gold{ color: var(--brand-accent) !important; }