/* RelojControl · hoja de estilos propia (sin dependencias externas) */
:root {
  --lateral: #2a3042; --lateral-oscuro: #232838; --lateral-texto: #a6b0cf;
  --primario: #0576b9; --primario-oscuro: #046499; --primario-claro: #e6f2fa;
  --texto: #495057; --titulo: #343a40; --suave: #74788d; --borde: #e3e6ec; --fondo: #f6f7fb; --blanco: #fff;
  --verde: #2f9e6e; --verde-bg: #e3f5ec; --rojo: #d9534f; --rojo-bg: #fdeceb; --amarillo: #b7791f; --amarillo-bg: #fdf3dc; --gris-bg: #eceff4;
  --radio: 6px; --ancho-lateral: 240px;
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; line-height: 1.45; }
a { color: var(--primario); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: var(--titulo); margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.15rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; } h6 { font-size: .98rem; }
.oculto { position: absolute; opacity: 0; pointer-events: none; }
.icono { vertical-align: -3px; flex: none; }
.texto-suave { color: var(--suave); } .texto-chico { font-size: .86rem; } .derecha { text-align: right; } .centro { text-align: center; }
.mb { margin-bottom: 1rem; } .mt { margin-top: 1rem; } .sin-margen { margin: 0; }
.flex { display: flex; gap: .5rem; align-items: center; } .flex-entre { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* ---------- Estructura ---------- */
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); background: var(--lateral); overflow-y: auto; z-index: 20; }
.lateral .marca { display: block; padding: 14px 18px; background: var(--lateral-oscuro); font-size: 1.55rem; font-weight: 600; letter-spacing: -1px; color: #3b9be0; text-decoration: none; }
.lateral .marca b { color: #fff; font-weight: 700; }
.lateral .titulo-menu { color: #8c92a6; font-size: .72rem; font-weight: 700; padding: 20px 18px 8px; letter-spacing: .5px; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu > li > a, .menu summary { display: flex; align-items: center; gap: 12px; padding: 11px 18px; color: var(--lateral-texto); cursor: pointer; list-style: none; text-decoration: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu > li > a:hover, .menu summary:hover { color: #fff; text-decoration: none; }
.menu summary::after { content: "▸"; margin-left: auto; font-size: .75rem; transition: transform .15s; }
.menu details[open] > summary::after { transform: rotate(90deg); }
.menu details[open] > summary, .menu .activo-grupo > summary { color: #fff; }
.menu li.activo > a { background: #3b7bbf; color: #fff; }
.menu ul a { display: block; padding: 6px 18px 6px 52px; color: var(--lateral-texto); font-size: .92rem; text-decoration: none; }
.menu ul a:hover { color: #fff; text-decoration: none; } .menu ul a.activo { color: #fff; font-weight: 600; }
.contenido { margin-left: var(--ancho-lateral); min-height: 100vh; display: flex; flex-direction: column; }
#alternar-menu:checked ~ .lateral { display: none; } #alternar-menu:checked ~ .contenido { margin-left: 0; }
.barra { display: flex; align-items: center; gap: 1rem; height: 50px; padding: 0 16px; background: var(--blanco); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; }
.barra .boton-menu { cursor: pointer; padding: 6px; border-radius: var(--radio); color: var(--titulo); display: inline-flex; } .barra .boton-menu:hover { background: var(--gris-bg); }
.barra .espacio { flex: 1; } .barra .compania { color: var(--suave); font-size: .86rem; }
.barra a.campana { position: relative; color: var(--titulo); display: inline-flex; } .barra .conteo { position: absolute; top: -6px; right: -8px; background: var(--rojo); color: #fff; border-radius: 10px; font-size: .65rem; min-width: 16px; padding: 0 4px; text-align: center; }
.barra details { position: relative; } .barra summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--titulo); }
.barra summary::-webkit-details-marker { display: none; }
.barra .desplegable { position: absolute; right: 0; top: 34px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 6px 18px rgba(0,0,0,.1); min-width: 190px; padding: 6px; z-index: 30; }
.barra .desplegable form { margin: 0; } .barra .desplegable-enlace { display: block; padding: 8px 10px; color: var(--texto); border-radius: 4px; text-decoration: none; } .barra .desplegable-enlace:hover { background: var(--gris-bg); text-decoration: none; } .barra .desplegable button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; cursor: pointer; color: var(--texto); font: inherit; border-radius: 4px; } .barra .desplegable button:hover { background: var(--gris-bg); }
.titulo-pagina { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 10px 18px; background: var(--blanco); border-bottom: 1px solid #d8dbe3; }
.titulo-pagina h1 { margin: 0; } .migas { color: var(--suave); font-size: .86rem; }
main { padding: 16px 18px; flex: 1; }
.pie { text-align: right; font-size: .75rem; padding: 6px 14px; color: var(--suave); }
@media (max-width: 900px) {
  .lateral { display: none; } .contenido { margin-left: 0; }
  #alternar-menu:checked ~ .lateral { display: block; box-shadow: 4px 0 20px rgba(0,0,0,.3); } #alternar-menu:checked ~ .contenido { margin-left: 0; }
  .titulo-pagina { padding: 10px 12px; } main { padding: 12px; }
}

/* ---------- Componentes ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 1rem; }
.tarjeta > .cuerpo { padding: 16px 18px; }
.rejilla { display: grid; gap: 1rem; } .rejilla > *, .estadistica > div { min-width: 0; } .rejilla-4 { grid-template-columns: repeat(4, 1fr); } .rejilla-2 { grid-template-columns: repeat(2, 1fr); } .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .rejilla-4, .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; } }
.estadistica { display: flex; justify-content: space-between; align-items: flex-start; }
.estadistica .etiqueta { font-size: .76rem; letter-spacing: .3px; color: var(--suave); text-transform: uppercase; }
.estadistica .valor { font-size: 1.5rem; font-weight: 600; color: var(--titulo); margin: .35rem 0; }
.estadistica .ico { width: 46px; height: 46px; border-radius: 50%; background: #eef0f5; color: var(--primario); display: flex; align-items: center; justify-content: center; }
.insignia { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78rem; font-weight: 600; max-width: 100%; }
td .insignia { white-space: nowrap; }
.insignia-verde { background: var(--verde-bg); color: var(--verde); } .insignia-rojo { background: var(--rojo-bg); color: var(--rojo); } .insignia-amarillo { background: var(--amarillo-bg); color: var(--amarillo); } .insignia-gris { background: var(--gris-bg); color: var(--suave); } .insignia-azul { background: var(--primario-claro); color: var(--primario); }
.boton { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radio); border: 1px solid transparent; background: var(--primario); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.boton:hover { background: var(--primario-oscuro); text-decoration: none; color: #fff; }
.boton-claro { background: #fff; color: var(--texto); border-color: var(--borde); } .boton-claro:hover { background: var(--gris-bg); color: var(--texto); }
.boton-verde { background: var(--verde); } .boton-verde:hover { background: #26855c; } .boton-rojo { background: var(--rojo); } .boton-rojo:hover { background: #bd3f3b; }
.boton-amarillo { background: #f1b44c; color: #fff; } .boton-info { background: #4fb3d9; } .boton-info:hover { background: #3a9cc2; }
.boton-borde { background: #fff; color: var(--primario); border-color: var(--primario); } .boton-borde:hover { background: var(--primario-claro); color: var(--primario); }
.boton-chico { padding: 4px 10px; font-size: .86rem; } .boton-icono { padding: 6px 9px; }
.enlace-icono { background: none; border: 0; padding: 3px 5px; cursor: pointer; color: var(--primario); display: inline-flex; font: inherit; } .enlace-icono:hover { color: var(--primario-oscuro); } .enlace-icono.peligro { color: var(--rojo); }
.alerta { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 12px; border: 1px solid; }
.alerta-exito { background: var(--verde-bg); border-color: #b9e3cf; color: #1f6f4c; } .alerta-error { background: var(--rojo-bg); border-color: #f4c3c1; color: #a23c39; }
.alerta-aviso { background: var(--amarillo-bg); border-color: #f1ddab; color: #8a5a10; } .alerta-info { background: var(--primario-claro); border-color: #bcdbee; color: #0b5a8a; }

/* ---------- Tablas ---------- */
.tabla-contenedor { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla thead th { font-weight: 600; font-size: .88rem; color: var(--titulo); white-space: nowrap; }
.tabla tr.filtros th { background: #f8f9fb; padding: 6px; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:hover { background: #fafbfd; }
.tabla .acciones { white-space: nowrap; width: 1%; }
.tabla tr.filtros th.acciones { min-width: 150px; }
.filtro-acciones { display: flex; flex-direction: column; gap: 4px; }
.tabla .vacio { text-align: center; color: var(--suave); padding: 20px; }
.paginador { display: flex; gap: 4px; flex-wrap: wrap; } .paginador a, .paginador span { padding: 3px 10px; border: 1px solid var(--primario); border-radius: 4px; color: var(--primario); font-size: .86rem; } .paginador .actual { background: var(--primario); color: #fff; } .paginador a:hover { background: var(--primario-claro); text-decoration: none; }
details.confirmar { display: inline-block; position: relative; } details.confirmar > summary { list-style: none; cursor: pointer; display: inline-flex; color: var(--rojo); padding: 3px 5px; } details.confirmar > summary::-webkit-details-marker { display: none; }
details.confirmar .caja { position: absolute; right: 0; top: 26px; z-index: 5; background: #fff; border: 1px solid var(--borde); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-radius: var(--radio); padding: 10px; width: 210px; white-space: normal; text-align: left; }

/* ---------- Formularios ---------- */
input, select, textarea { font: inherit; color: var(--texto); }
.campo { display: flex; flex-direction: column; gap: 4px; } .campo label { font-size: .82rem; color: var(--suave); font-weight: 600; }
.campo input, .campo select, .campo textarea, input.control, select.control, textarea.control { width: 100%; padding: 8px 10px; border: 1px solid #ced4da; border-radius: var(--radio); background: #fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .control:focus { outline: 2px solid #9cc9e6; border-color: var(--primario); }
.campo input[readonly] { background: #f3f4f7; }
.campo input[type=color] { padding: 2px; height: 38px; }
.campo.casilla { flex-direction: row; align-items: center; gap: 8px; padding-top: 22px; } .campo.casilla input { width: auto; } .campo.casilla label { color: var(--texto); font-weight: 400; font-size: .95rem; }
.campo-error { color: var(--rojo); font-size: .82rem; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--rojo); }
.formulario-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.formulario-rejilla > .c-12 { grid-column: span 12; } .formulario-rejilla > .c-6 { grid-column: span 6; } .formulario-rejilla > .c-4 { grid-column: span 4; } .formulario-rejilla > .c-3 { grid-column: span 3; } .formulario-rejilla > .c-8 { grid-column: span 8; }
@media (max-width: 700px) { .formulario-rejilla > [class*="c-"] { grid-column: span 12; } }
.seccion-titulo { margin: 8px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--borde); font-weight: 600; color: var(--titulo); }
.lista-checks { border: 1px solid #ced4da; border-radius: var(--radio); padding: 8px 10px; max-height: 170px; overflow: auto; background: #fff; } .lista-checks label { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-weight: 400; color: var(--texto); font-size: .95rem; }
.filtro-busqueda { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .filtro-busqueda .campo { min-width: 150px; flex: 1 1 150px; max-width: 240px; }
.filtro-busqueda details { position: relative; } .filtro-busqueda summary { padding: 8px 10px; border: 1px solid #ced4da; border-radius: var(--radio); background: #fff; cursor: pointer; list-style: none; white-space: nowrap; } .filtro-busqueda summary::-webkit-details-marker { display: none; }
.filtro-busqueda details .panel { position: absolute; z-index: 15; background: #fff; border: 1px solid var(--borde); box-shadow: 0 6px 18px rgba(0,0,0,.12); border-radius: var(--radio); padding: 8px 10px; max-height: 260px; overflow: auto; min-width: 250px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; } .pestanas a { padding: 8px 14px; color: var(--texto); border-bottom: 2px solid transparent; text-decoration: none; } .pestanas a.activa { color: var(--primario); border-color: var(--primario); font-weight: 600; } .pestanas a:hover { background: var(--gris-bg); }
.resumen { display: flex; flex-wrap: wrap; gap: 18px; font-size: .88rem; margin-bottom: 10px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; } @media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
.lista-grupo { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); } .lista-grupo li a { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; } .lista-grupo li:last-child a { border: 0; } .lista-grupo li a.activo { background: var(--primario); color: #fff; } .lista-grupo li a:hover:not(.activo) { background: var(--gris-bg); }
dl.detalle { display: grid; grid-template-columns: 11rem 1fr; gap: 6px 12px; margin: 0; } dl.detalle dt { color: var(--suave); } dl.detalle dd { margin: 0; font-weight: 600; }
.grafico { width: 100%; height: auto; display: block; } .grafico text { font-family: inherit; fill: var(--suave); font-size: 11px; } .leyenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: .86rem; margin-top: 6px; } .leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.mapa-marco { width: 100%; height: 280px; border: 1px solid var(--borde); border-radius: var(--radio); }

/* ---------- Autenticación ---------- */
body.auth { background: var(--fondo); }
.auth-caja { max-width: 860px; margin: 56px auto; padding: 0 14px; } .auth-logo { text-align: center; margin-bottom: 28px; } .auth-logo .logo { font-size: 2.4rem; font-weight: 600; color: #3b9be0; letter-spacing: -1px; text-decoration: none; } .auth-logo .logo b { color: #555; font-weight: 700; }
.auth-tarjeta { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); } .auth-form { padding: 36px 40px; } .auth-lado { background: linear-gradient(135deg, #0576b9, #3b9be0); min-height: 320px; }
.auth-form .campo { margin-bottom: 14px; } .auth-form .boton { width: 100%; justify-content: center; }
@media (max-width: 720px) { .auth-tarjeta { grid-template-columns: 1fr; } .auth-lado { display: none; } .auth-form { padding: 24px 20px; } }
.pagina-error { text-align: center; padding: 60px 20px; } .pagina-error .codigo { font-size: 4rem; font-weight: 700; color: var(--primario); line-height: 1; }

/* ---------- Impresión ---------- */
body.impresion { background: #fff; padding: 12px; } .solo-pantalla { display: block; } 
@media print { .lateral, .barra, .titulo-pagina .migas, .pie, .solo-pantalla, .filtro-busqueda, .acciones, .boton, .paginador { display: none !important; } .contenido { margin: 0 !important; } .tarjeta { border: 0; } body { background: #fff; } }