/* =====================================================================
   style.css - Hoja de estilos del Sistema "Los Tralaleritos"
   Paleta tomada del logo oficial (ver informe de avances):
     Azul Marino  #1A365D  -> encabezados, menú, bordes
     Celeste      #63B3ED  -> fondos secundarios, hover
     Dorado       #ECC94B  -> botones de llamada a la acción, resaltados
     Naranja      #ED8936  -> confirmaciones, badges de estado
     Blanco/Crema #F7FAFC / #EDF2F7 -> fondo general y formularios
   ===================================================================== */
:root {
    --azul:     #1A365D;
    --azul-2:   #2B4C7E;
    --celeste:  #63B3ED;
    --celeste-2:#BEE3F8;
    --dorado:   #ECC94B;
    --naranja:  #ED8936;
    --verde:    #38A169;
    --rojo:     #C53030;
    --crema:    #F7FAFC;
    --crema-2:  #EDF2F7;
    --gris:     #718096;
    --texto:    #2D3748;
    --sombra:   0 4px 14px rgba(26,54,93,.12);
    --radio:    12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--crema-2);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--azul-2); text-decoration: none; }
h1, h2, h3 { color: var(--azul); margin-top: 0; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }

/* ---------- Cabecera ---------- */
.cabecera {
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 4px solid var(--dorado);
}
.marca { display: flex; align-items: center; gap: 12px; color: #fff; }
.marca img { height: 56px; border-radius: 50%; background: #fff; padding: 2px; object-fit: cover; width: 56px; }
.marca strong { display: block; font-size: 1.05rem; }
.marca small  { color: var(--celeste-2); }
.nav-superior { display: flex; align-items: center; gap: 12px; }
.nav-superior a { color: #fff; font-weight: 500; }
.usuario-activo { background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 20px; }

/* ---------- Distribución con menú lateral ---------- */
.contenedor-app { display: flex; flex: 1; }
.menu-lateral {
    width: 230px;
    background: var(--azul-2);
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.menu-titulo { color: var(--celeste-2); font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; padding: 0 20px 8px; margin: 0; }
.menu-lateral a { color: #fff; padding: 12px 20px; display: block; border-left: 4px solid transparent; transition: .2s; }
.menu-lateral a:hover  { background: rgba(255,255,255,.1); }
.menu-lateral a.activo { background: var(--azul); border-left-color: var(--dorado); font-weight: 600; }
.contenido { flex: 1; padding: 28px; max-width: 1200px; }
.contenido-publico { flex: 1; }

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px;
    margin-bottom: 24px;
}
.tarjeta-centro { max-width: 460px; margin: 40px auto; }
.tarjeta-centro .logo-form { display: block; width: 110px; height: 110px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dorado); }
.tarjeta-centro h2 { text-align: center; }

/* ---------- Página de inicio (landing) ---------- */
.portada {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-2) 60%, #3b6ea8 100%);
    color: #fff;
    padding: 56px 24px;
}
.portada-int { max-width: 1050px; margin: auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.portada-texto { flex: 1 1 380px; }
.portada-texto h1 { color: #fff; font-size: 2.3rem; line-height: 1.15; margin-bottom: 8px; }
.portada-texto .lema { color: var(--dorado); font-weight: 600; font-size: 1.1rem; margin: 0 0 14px; }
.portada-texto p { font-size: 1.05rem; line-height: 1.6; color: #E2E8F0; }
.portada-logo img { width: 330px; max-width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.botones-portada { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.caracteristicas { max-width: 1050px; margin: -30px auto 40px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.caracteristica { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; text-align: center; border-top: 5px solid var(--celeste); }
.caracteristica .icono { font-size: 2.4rem; }
.caracteristica h3 { margin: 8px 0 6px; }
.caracteristica p { color: var(--gris); margin: 0; font-size: .95rem; }
.seccion-info { max-width: 1050px; margin: 0 auto 40px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: .2s;
    color: #fff;
    text-align: center;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-azul    { background: var(--azul-2); }
.btn-celeste { background: var(--celeste); color: var(--azul); }
.btn-dorado  { background: var(--dorado); color: var(--azul); }
.btn-naranja { background: var(--naranja); }
.btn-verde   { background: var(--verde); }
.btn-rojo    { background: var(--rojo); }
.btn-gris    { background: var(--gris); }
.btn-bloque  { display: block; width: 100%; }

/* ---------- Formularios ---------- */
.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--azul); }
.form-grupo input, .form-grupo select, .form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #CBD5E0;
    border-radius: 8px;
    font-size: 1rem;
    background: var(--crema);
    font-family: inherit;
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus {
    outline: none; border-color: var(--celeste); box-shadow: 0 0 0 3px var(--celeste-2); background: #fff;
}
.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-inline .form-grupo { margin-bottom: 0; flex: 1 1 160px; }
.ayuda { font-size: .85rem; color: var(--gris); }
.enlace-centro { text-align: center; margin-top: 14px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }

/* ---------- Alertas ---------- */
.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-weight: 500; border-left: 5px solid; }
.alerta-exito { background: #C6F6D5; color: #22543D; border-color: var(--verde); }
.alerta-error { background: #FED7D7; color: #742A2A; border-color: var(--rojo); }
.alerta-info  { background: var(--celeste-2); color: var(--azul); border-color: var(--celeste); }
.contenido-publico .alerta { max-width: 460px; margin: 20px auto -20px; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; background: #fff; }
.tabla th { background: var(--azul); color: #fff; padding: 11px 10px; text-align: left; font-size: .9rem; }
.tabla td { padding: 10px; border-bottom: 1px solid var(--crema-2); vertical-align: middle; }
.tabla tr:hover td { background: var(--crema); }
.tabla .acciones { white-space: nowrap; }
.tabla .acciones form { display: inline; }

/* ---------- Badges de estado ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.badge-presente { background: #C6F6D5; color: #22543D; }
.badge-falta    { background: #FED7D7; color: #742A2A; }
.badge-tarde    { background: #FEEBC8; color: #7B341E; }
.badge-excusa   { background: var(--celeste-2); color: var(--azul); }
.badge-azul     { background: var(--celeste-2); color: var(--azul); }

/* ---------- Panel: tarjetas estadísticas ---------- */
.estadisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 24px; }
.estadistica { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; border-left: 6px solid var(--celeste); }
.estadistica .numero { font-size: 2.2rem; font-weight: 700; color: var(--azul); }
.estadistica .etiqueta { color: var(--gris); font-size: .9rem; }
.estadistica.dorado  { border-left-color: var(--dorado); }
.estadistica.naranja { border-left-color: var(--naranja); }
.estadistica.verde   { border-left-color: var(--verde); }
.bienvenida { display: flex; gap: 20px; align-items: center; }
.bienvenida img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dorado); }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.acceso { display: block; background: var(--crema); border: 2px solid var(--celeste-2); border-radius: var(--radio); padding: 18px; text-align: center; color: var(--azul); font-weight: 600; transition: .2s; }
.acceso:hover { background: var(--celeste-2); border-color: var(--celeste); }
.acceso span { display: block; font-size: 2rem; margin-bottom: 6px; }

/* ---------- Asistencia: selector de estado ---------- */
.estado-opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-opciones label { cursor: pointer; padding: 5px 10px; border-radius: 20px; border: 2px solid #CBD5E0; font-size: .85rem; font-weight: 600; background: #fff; }
.estado-opciones input { display: none; }
.estado-opciones input:checked + span.presente { color: #22543D; }
.estado-opciones label:has(input[value="Presente"]:checked) { background: #C6F6D5; border-color: var(--verde); color: #22543D; }
.estado-opciones label:has(input[value="Falta"]:checked)    { background: #FED7D7; border-color: var(--rojo);  color: #742A2A; }
.estado-opciones label:has(input[value="Tarde"]:checked)    { background: #FEEBC8; border-color: var(--naranja); color: #7B341E; }
.estado-opciones label:has(input[value="Excusa"]:checked)   { background: var(--celeste-2); border-color: var(--celeste); color: var(--azul); }
.barra-acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.progreso { background: var(--crema-2); border-radius: 20px; height: 12px; overflow: hidden; min-width: 90px; }
.progreso div { height: 100%; background: var(--verde); }

/* ---------- Modal ---------- */
.modal { display: none; position: fixed; inset: 0; background: rgba(26,54,93,.55); z-index: 999; align-items: center; justify-content: center; }
.modal.abierto { display: flex; }
.modal-caja { background: #fff; padding: 26px; border-radius: var(--radio); max-width: 420px; width: 92%; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Pie de página ---------- */
.pie { background: var(--azul); color: var(--celeste-2); text-align: center; padding: 14px; font-size: .85rem; }
.pie p { margin: 0; }

/* ---------- Impresión (Reporte PDF) ---------- */
@media print {
    .cabecera, .menu-lateral, .pie, .no-imprimir, .modal { display: none !important; }
    body { background: #fff; }
    .contenido { padding: 0; max-width: none; }
    .tarjeta { box-shadow: none; padding: 0; }
    .tabla th { background: #1A365D !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .contenedor-app { flex-direction: column; }
    .menu-lateral { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 6px; }
    .menu-lateral a { padding: 8px 12px; border-left: none; border-bottom: 3px solid transparent; font-size: .9rem; }
    .menu-lateral a.activo { border-bottom-color: var(--dorado); }
    .menu-titulo { display: none; }
    .contenido { padding: 16px; }
    .portada-texto h1 { font-size: 1.7rem; }
}