/* Estilos base: variables, reset, botones, diálogos y login. */
/* =====================================================================
   Estilos globales compartidos por todas las páginas.
   Estructura: variables -> reset -> layout (shell, sidebar, cabecera) ->
   componentes (botones, modal, diálogos) -> tabla de horario -> responsive.
   ===================================================================== */

/* Tipografía Camiral (miller-banner, mismo kit que camiral.com). */
@font-face{
    font-family:"miller-banner";
    font-style:normal;
    font-weight:300;
    font-display:swap;
    src:url("https://use.typekit.net/af/e0e7b1/0000000000000000775766c9/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n3&v=3") format("woff2"),
        url("https://use.typekit.net/af/e0e7b1/0000000000000000775766c9/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n3&v=3") format("woff");
}

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap");

/* --- Variables de color, tipografía y espaciado --- */
:root{
    --camiral-verde: #1e3d36;
    --camiral-verde-oscuro: #152b26;
    --camiral-verde-claro: #2f574d;
    --camiral-crema: #f7f4ef;
    --camiral-arena: #e8e2d9;
    --camiral-dorado: #b8956b;
    --camiral-texto: #2a2a2a;
    --camiral-texto-suave: #6b6560;
    --camiral-blanco: #ffffff;
    --camiral-sombra: rgba(21, 43, 38, 0.12);
    --camiral-sombra-fuerte: rgba(21, 43, 38, 0.28);
    /* Marca plataforma (Gimmie): verde del favicon */
    --gimmie-verde: #98b424;
    --fuente-camiral: "miller-banner", "Cormorant Garamond", Georgia, serif;
    --fuente-gimmie-marca: "Outfit", "Segoe UI", system-ui, sans-serif;
    --fuente-serif: "Inter", "Segoe UI", system-ui, sans-serif;
    --fuente-sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --- Reset base (box-sizing y márgenes) --- */
*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:var(--fuente-sans);
    font-weight:400;
    background:var(--camiral-crema);
    color:var(--camiral-texto);
    line-height:1.5;
}

body.modal-abierto{
    overflow:hidden;
}

.app-shell{
    --sidebar-ancho:260px;
    --sidebar-ancho-cerrada:80px;
    display:grid;
    grid-template-columns:var(--sidebar-ancho) minmax(0, 1fr);
    min-height:100vh;
    transition:grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-cerrada .app-shell{
    --sidebar-ancho:var(--sidebar-ancho-cerrada);
}

/* Oculta la app hasta confirmar sesión y rol (evita flash de UI de encargado). */
body:not(.auth-listo) .app-shell{
    visibility:hidden;
}

body:not(.rol-encargado) .selector-empleado select,
body:not(.rol-encargado) .editar-toolbar{
    display:none !important;
}

/* --- Botones (principal, secundario, peligro) --- */
.btn{
    border:1px solid transparent;
    border-radius:0;
    padding:10px 18px;
    font-family:var(--fuente-sans);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-principal{
    background:var(--camiral-verde);
    color:var(--camiral-blanco);
    border-color:var(--camiral-verde);
}

.btn-principal:hover{
    background:var(--camiral-verde-oscuro);
    border-color:var(--camiral-verde-oscuro);
}

.btn-secundario{
    background:transparent;
    color:var(--camiral-blanco);
    border-color:rgba(255, 255, 255, 0.45);
}

.btn-secundario:hover{
    background:rgba(255, 255, 255, 0.1);
    border-color:var(--camiral-blanco);
}

.page-controles .btn-secundario,
.panel-contenido .btn-secundario,
.dialogo-acciones .btn-secundario{
    color:#000;
    border-color:#000;
    background:transparent;
}

.page-controles .btn-secundario:hover,
.panel-contenido .btn-secundario:hover,
.dialogo-acciones .btn-secundario:hover{
    color:#000;
    border-color:#000;
    background:var(--camiral-crema);
}

.btn-peligro{
    background:transparent;
    color:var(--camiral-texto);
    border-color:var(--camiral-arena);
}

.btn-peligro:hover{
    background:#faf0f0;
    border-color:#c97a7a;
    color:#8b3a3a;
}

/* --- Diálogos: confirmación de cierre y diálogo de carga/generación --- */
.dialogo{
    position:fixed;
    inset:0;
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.dialogo[hidden]{
    display:none;
}

.dialogo-backdrop{
    position:absolute;
    inset:0;
    background:rgba(21, 43, 38, 0.72);
}

.dialogo-panel{
    position:relative;
    z-index:1;
    width:min(92vw, 460px);
    padding:28px;
    background:var(--camiral-blanco);
    border:2px solid var(--camiral-verde-claro);
    box-shadow:
        0 28px 70px rgba(21, 43, 38, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.dialogo-panel h3{
    margin:0 0 10px;
    font-family:var(--fuente-serif);
    font-size:1.5rem;
    font-weight:500;
    color:var(--camiral-verde);
}

.dialogo-panel p{
    margin:0 0 24px;
    color:var(--camiral-texto-suave);
    font-size:0.92rem;
    font-weight:300;
}

.dialogo-carga{
    z-index:1200;
}

.dialogo-backdrop-bloqueo{
    background:rgba(21, 43, 38, 0.78);
    cursor:wait;
}

.dialogo-panel-carga{
    text-align:center;
    width:min(92vw, 420px);
    padding:36px 32px 32px;
    border-color:var(--camiral-verde);
    box-shadow:
        0 32px 80px rgba(21, 43, 38, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.dialogo-panel-carga h3{
    margin-top:20px;
}

.dialogo-panel-carga p{
    margin-bottom:0;
}

.carga-icono{
    width:52px;
    height:52px;
    margin:0 auto;
    position:relative;
}

.carga-icono .spinner,
.carga-icono .carga-check,
.carga-icono .carga-error{
    position:absolute;
    inset:0;
}

.dialogo-carga[data-estado="cargando"] .carga-check,
.dialogo-carga[data-estado="error"] .carga-check{
    display:none;
}

.dialogo-carga[data-estado="cargando"] .carga-error,
.dialogo-carga[data-estado="exito"] .carga-error{
    display:none;
}

.dialogo-carga[data-estado="exito"] .spinner,
.dialogo-carga[data-estado="error"] .spinner{
    display:none;
}

.spinner{
    width:52px;
    height:52px;
    border:4px solid var(--camiral-arena);
    border-top-color:var(--camiral-dorado);
    border-radius:50%;
    animation:spinner-giro 0.85s linear infinite;
}

.carga-check{
    width:52px;
    height:52px;
    display:none;
}

.dialogo-carga[data-estado="exito"] .carga-check,
.dialogo-carga[data-estado="error"] .carga-error{
    display:block;
}

.carga-error{
    width:52px;
    height:52px;
    display:none;
}

.carga-error-circulo{
    fill:none;
    stroke:#9b3b32;
    stroke-width:3;
    stroke-dasharray:145;
    stroke-dashoffset:145;
}

.carga-error-trazo{
    fill:none;
    stroke:#9b3b32;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:32;
    stroke-dashoffset:32;
}

.dialogo-carga[data-estado="error"] .carga-error-circulo{
    animation:carga-check-circulo 0.55s ease forwards;
}

.dialogo-carga[data-estado="error"] .carga-error-trazo{
    animation:carga-error-trazo 0.35s 0.45s ease forwards;
}

@keyframes carga-error-trazo{
    to{ stroke-dashoffset:0; }
}

.carga-check-circulo{
    fill:none;
    stroke:var(--camiral-verde);
    stroke-width:3;
    stroke-dasharray:145;
    stroke-dashoffset:145;
}

.carga-check-trazo{
    fill:none;
    stroke:var(--camiral-verde);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:48;
    stroke-dashoffset:48;
}

.dialogo-carga[data-estado="exito"] .carga-check-circulo{
    animation:carga-check-circulo 0.55s ease forwards;
}

.dialogo-carga[data-estado="exito"] .carga-check-trazo{
    animation:carga-check-trazo 0.45s 0.45s ease forwards;
}

/* --- Animaciones del spinner y del tick de éxito --- */
@keyframes spinner-giro{
    to{ transform:rotate(360deg); }
}

@keyframes carga-check-circulo{
    to{ stroke-dashoffset:0; }
}

@keyframes carga-check-trazo{
    to{ stroke-dashoffset:0; }
}

.dialogo-carga[data-estado="exito"] .dialogo-backdrop-bloqueo{
    cursor:default;
}

.dialogo-carga[data-estado="error"] .dialogo-backdrop-bloqueo{
    cursor:pointer;
}

.dialogo-carga[data-estado="exito"] .dialogo-panel-carga{
    border-color:var(--camiral-verde);
    max-width:520px;
}

.dialogo-carga[data-estado="error"] .dialogo-panel-carga{
    border-color:#c97a7a;
}

.dialogo-carga[data-estado="error"] .dialogo-panel-carga h3{
    color:#9b3b32;
}

.feedback-resumen{
    margin:12px 0 0;
    font-size:0.88rem;
    color:var(--camiral-texto-suave);
}

.feedback-recomendaciones{
    margin:14px 0 0;
    padding-left:18px;
    text-align:left;
    font-size:0.84rem;
    line-height:1.45;
    color:var(--camiral-texto);
}

.feedback-recomendaciones li{
    margin-bottom:8px;
}

.feedback-recomendaciones .rec-aumentar{
    color:#2d6a4f;
}

.feedback-recomendaciones .rec-reducir{
    color:#9b6b32;
}

.feedback-recomendaciones .rec-personal{
    color:#6b4c9b;
}

.panel-recomendaciones{
    margin:0 0 16px;
    padding:14px 16px 12px;
    border:1px solid #d4a574;
    border-radius:8px;
    background:#fff8f0;
}

.panel-recomendaciones-cabecera{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.panel-recomendaciones-cabecera h3{
    margin:0;
    font-size:0.95rem;
    font-weight:600;
    color:#9b6b32;
}

.panel-recomendaciones-cerrar{
    flex-shrink:0;
    border:none;
    background:transparent;
    color:var(--camiral-texto-suave);
    font-size:1.25rem;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
}

.panel-recomendaciones-cerrar:hover{
    color:var(--camiral-texto);
}

.panel-recomendaciones .feedback-resumen{
    margin: 0 0 0.5rem;
}

.panel-recomendaciones-lista,
.feedback-lista-avisos{
    margin: 0.4rem 0 0.8rem 1.1rem;
    padding: 0;
}

.panel-recomendaciones-lista li,
.feedback-lista-avisos li{
    margin: 0.35rem 0;
}

.dialogo-carga-texto{
    margin:0;
    font-size:0.92rem;
    line-height:1.45;
    color:var(--camiral-texto-suave);
}

td#col_z.col-franja{
    min-width:92px;
    font-size:0.72rem;
    font-weight:500;
    letter-spacing:0.02em;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    color:var(--camiral-texto);
}

body.generando-horarios{
    overflow:hidden;
    cursor:wait;
}

body.feedback-bloqueo{
    overflow:hidden;
}

body.generando-horarios .contenido-principal,
body.generando-horarios .sidebar,
body.generando-horarios .app-main{
    pointer-events:none;
}

.dialogo-acciones{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.dialogo-panel-form{
    width:min(420px, calc(100vw - 32px));
}

.dialogo-password-ayuda{
    margin-top:0;
}

.dialogo-form{
    margin-top:18px;
}

.dialogo-form .form-grupo-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.dialogo-form .form-grupo{
    margin-bottom:14px;
}

.dialogo-form .form-grupo label{
    display:block;
    margin-bottom:6px;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--camiral-texto-suave);
}

.dialogo-form .form-grupo input{
    width:100%;
    padding:11px 14px;
    border:1px solid var(--camiral-arena);
    background:var(--camiral-blanco);
    font-family:var(--fuente-sans);
    font-size:0.92rem;
    color:var(--camiral-texto);
    box-sizing:border-box;
}

.dialogo-form .form-grupo input:focus{
    outline:2px solid var(--camiral-dorado);
    outline-offset:2px;
}

.dialogo-form-error{
    margin:0 0 12px;
    color:#8b3a3a;
    font-size:0.88rem;
}

.dialogo-form .dialogo-acciones{
    margin-top:8px;
}

/* --- Login --- */
.pagina-login{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.login-panel{
    width:100%;
    max-width:420px;
    background:var(--camiral-blanco);
    border:1px solid var(--camiral-arena);
    padding:36px 32px 32px;
    box-shadow:0 12px 40px var(--camiral-sombra);
}

.pagina-login .login-marca-icono{
    display:block;
    width:94px;
    height:128px;
    margin:0 auto -10px;
    object-fit:contain;
    filter:drop-shadow(0 2px 8px rgba(21, 43, 38, 0.12));
}

.pagina-login .login-marca-plataforma{
    margin:0 0 10px;
    font-family:var(--fuente-gimmie-marca);
    font-size:2rem;
    font-weight:600;
    color:var(--camiral-dorado);
    line-height:1.2;
}

.pagina-login .login-marca{
    text-align:center;
}

.pagina-login .login-marca-wordmark{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:240px;
    margin:0 auto 10px;
    padding:0 6px;
    overflow:visible;
    color:var(--camiral-verde-oscuro);
}

.pagina-login .login-marca-wordmark-svg{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
}

.pagina-login .login-marca-cliente{
    display:none;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
}

.login-form .form-grupo{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.login-form label{
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--camiral-texto-suave);
}

.login-form input{
    width:100%;
    padding:11px 14px;
    border:1px solid var(--camiral-arena);
    border-radius:0;
    background:var(--camiral-blanco);
    font-family:var(--fuente-sans);
    font-size:0.92rem;
    color:var(--camiral-texto);
}

.login-form input:focus{
    outline:2px solid var(--camiral-dorado);
    outline-offset:2px;
}

.login-error{
    margin:0;
    padding:10px 12px;
    background:rgba(155, 59, 50, 0.1);
    border-left:3px solid #8b3a3a;
    color:#8b3a3a;
    font-size:0.85rem;
    line-height:1.45;
}

.login-submit{
    width:100%;
    margin-top:4px;
}