/* Vacaciones y permisos RIGSA — celular primero. Paleta del sistema de diseño RIGSA (navy/teal), Inter. */
:root {
  --navy: #04345c; --teal: #04514c; --teal-2: #659f86; --teal-claro: #e6f0ec;
  --fondo: #f4f6f8; --tarjeta: #ffffff; --texto: #1c2733; --texto-2: #4a5866; --borde: #dbe2e8;
  --ok: #1f7a4d; --ok-fondo: #e3f3ea; --alerta: #9a5b00; --alerta-fondo: #fff4dd;
  --peligro: #b42318; --peligro-fondo: #fdecea; --info-fondo: #e8eef5;
  --radio: 12px; --sombra: 0 1px 2px rgba(4, 52, 92, .06), 0 4px 14px rgba(4, 52, 92, .06);
  --rapido: 180ms ease;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
a { color: var(--teal); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: .25rem 0; color: var(--navy); }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; color: var(--navy); display: flex; align-items: center; gap: .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
small { color: var(--texto-2); }
.ico { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid var(--teal-2); outline-offset: 2px; border-radius: 6px; }

/* Barra superior */
.barra { background: var(--navy); color: #fff; padding: .5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; position: sticky; top: 0; z-index: 10; }
.marca { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 600; min-height: 44px; }
.marca img { height: 29px; width: auto; }
.menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.menu a, .menu .enlace { display: inline-flex; align-items: center; gap: .35rem; color: #dce8f2; text-decoration: none; padding: .5rem .7rem; border-radius: 8px; min-height: 44px; font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer; transition: background var(--rapido); }
.menu a:hover, .menu .enlace:hover, .menu a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }
.menu form { margin: 0; }
.burbuja { background: #f2b544; color: var(--navy); border-radius: 999px; font-size: .75rem; padding: 0 .45rem; }
@media (max-width: 640px) {
  .barra { padding: .4rem .75rem; }
  .marca span { display: none; }
  .menu span { display: none; }
  .menu a, .menu .enlace { padding: .5rem; }
  .menu .burbuja { display: inline; margin-left: -.3rem; }
}

.contenido { max-width: 1040px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.sub { color: var(--texto-2); margin: .1rem 0 1rem; }
.saludo { margin-top: .5rem; }
.volver { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.vacio { color: var(--texto-2); font-style: italic; }
.nota { color: var(--texto-2); font-size: .92rem; margin: .3rem 0; }
.alerta-texto { color: var(--alerta); font-weight: 600; }
.grande { font-size: 1.1rem; font-weight: 600; margin: 0 0 .5rem; }
.pildora { display: inline-block; background: var(--teal-claro); color: var(--teal); border-radius: 999px; padding: .25rem .8rem; margin: 0 .4rem .5rem 0; font-size: .92rem; }
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Tarjetas de saldo */
.saldos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: .5rem 0 1rem; }
@media (min-width: 760px) { .saldos { grid-template-columns: repeat(4, 1fr); } }
.saldo { background: var(--tarjeta); border-radius: var(--radio); padding: .9rem 1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .2rem; border-top: 4px solid var(--teal-2); }
.saldo.destacado { border-top-color: var(--navy); }
.saldo.destacado-alerta { border-top-color: #e0a100; }
.saldo-etiqueta { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--texto-2); }
.saldo-etiqueta .ico { width: 16px; height: 16px; }
.saldo strong { font-size: 1.75rem; color: var(--navy); line-height: 1.1; }
.saldo strong small { font-size: .9rem; font-weight: 500; }
.saldo-nota { font-size: .8rem; color: var(--texto-2); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.1rem; border-radius: 10px; font: 600 1rem Inter, system-ui, sans-serif; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--rapido), border-color var(--rapido), transform 80ms; }
.boton:active { transform: scale(.98); }
.boton.primario { background: var(--teal); color: #fff; }
.boton.primario:hover { background: #033f3b; }
.boton.secundario { background: #fff; color: var(--teal); border-color: var(--teal-2); }
.boton.secundario:hover { background: var(--teal-claro); }
.boton.peligro { background: #fff; color: var(--peligro); border-color: #e4a29b; }
.boton.peligro:hover { background: var(--peligro-fondo); }
.boton.chico { min-height: 44px; padding: .4rem .8rem; }
.enlace-peligro { background: none; border: 0; color: var(--peligro); text-decoration: underline; font: inherit; cursor: pointer; min-height: 44px; margin-top: 1rem; }
.acciones-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 560px) { .acciones-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .acciones-grid { grid-template-columns: repeat(3, 1fr); } }
.acciones-grid .boton { justify-content: flex-start; }

/* Listas */
.fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; background: var(--tarjeta); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .5rem; box-shadow: var(--sombra); color: var(--texto); text-decoration: none; min-height: 52px; border-left: 4px solid transparent; transition: border-color var(--rapido); }
.fila:hover { border-left-color: var(--teal-2); }
.fila-principal { flex: 1 1 260px; }
.fila-meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.contador { background: var(--navy); color: #fff; border-radius: 999px; font-size: .8rem; padding: 0 .55rem; }

/* Chips de estado: color + texto */
.chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; font-weight: 600; background: var(--info-fondo); color: var(--navy); white-space: nowrap; margin: 0 .25rem .25rem 0; }
.chip .ico { width: 14px; height: 14px; }
.chip-pendiente { background: var(--info-fondo); color: var(--navy); }
.chip-aprobada, .chip-r-repuesto, .chip-r-descontado { background: var(--ok-fondo); color: var(--ok); }
.chip-rechazada, .chip-r-a_descontar, .chip-alerta-descuento { background: var(--peligro-fondo); color: var(--peligro); }
.chip-cancelada { background: #eceff2; color: var(--texto-2); }
.chip-excepcion, .chip-r-por_reponer, .chip-r-repuesto_declarado, .chip-alerta-constancia, .chip-alerta-detenida, .chip-alerta-acumulado { background: var(--alerta-fondo); color: var(--alerta); }

/* Formularios */
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); margin: 0 0 1rem; }
.form { display: flex; flex-direction: column; gap: .9rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--texto); }
input, select, textarea { font: 400 1rem Inter, system-ui, sans-serif; padding: .65rem .75rem; border: 1.5px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto); min-height: 48px; width: 100%; }
input[type=file] { padding: .5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-2); outline: 3px solid rgba(101, 159, 134, .3); }
.dos { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 560px) { .dos { grid-template-columns: 1fr 1fr; } }
.error-campo { background: var(--peligro-fondo); color: var(--peligro); padding: .6rem .8rem; border-radius: 8px; margin: 0; font-weight: 600; }
.ayuda { color: var(--texto-2); font-size: .9rem; margin: 0; }
.previa:empty { display: none; }
.previa { background: var(--fondo); border-radius: 8px; padding: .5rem .8rem; }
.previa p { margin: .3rem 0; }
.fila-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.fila-form input { flex: 1 1 220px; }
.buscador { max-width: 420px; margin-bottom: .75rem; }
details > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
details > summary h2 { margin: 0; }
details > summary::after { content: '▾'; margin-left: auto; color: var(--texto-2); }
details:not([open]) > summary::after { content: '▸'; }
details[open] > summary { margin-bottom: .75rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 500; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.error { background: var(--alerta-fondo); color: var(--alerta); }

/* Firmas */
.firmas { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.firma { position: relative; background: var(--tarjeta); border-radius: 10px; padding: .7rem 1rem .7rem 3rem; margin-bottom: .5rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .1rem; counter-increment: paso; }
.firma::before { content: counter(paso); position: absolute; left: .9rem; top: .8rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--borde); color: var(--texto); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.firma-aprobada::before { background: var(--ok); color: #fff; content: '✓'; }
.firma-rechazada::before { background: var(--peligro); color: #fff; content: '✕'; }
.firma-omitida { opacity: .6; }
.firma-actual { outline: 2px solid var(--teal-2); }
.firma-rol { font-size: .8rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.firma-estado { font-weight: 600; font-size: .92rem; }
.firmar-caja { border-top: 4px solid var(--teal); }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1rem; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--navy); color: #fff; font-weight: 600; position: sticky; top: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.inactivo { color: var(--texto-2); }
.pin { font: 700 1.3rem ui-monospace, monospace; letter-spacing: .15em; }
.datos { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.datos dd { margin: 0; text-align: right; }

/* Panel */
.columnas { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 900px) { .columnas { grid-template-columns: 1fr 1fr; } }
.calendario { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cal-fila { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-enc span { background: var(--navy); color: #fff; font-size: .8rem; font-weight: 600; text-align: center; padding: .35rem 0; }
.cal-dia { min-height: 64px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: .2rem; display: flex; flex-direction: column; gap: .15rem; overflow: hidden; }
.cal-dia.fuera { background: #f8f9fa; color: #9aa5b1; }
.cal-dia.hoy .cal-num { background: var(--teal); color: #fff; border-radius: 999px; padding: 0 .35rem; }
.cal-num { font-size: .78rem; font-weight: 600; align-self: flex-start; }
.cal-quien { font-size: .7rem; background: var(--teal-claro); color: var(--teal); border-radius: 4px; padding: 0 .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 760px) { .cal-dia { min-height: 86px; } .cal-quien { font-size: .78rem; } }

/* Entrar */
.entrar { max-width: 400px; margin: 2rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.entrar .form { text-align: left; width: 100%; }
.entrar-logo { width: 220px; height: auto; margin-bottom: .5rem; }
.separador { width: 100%; display: flex; align-items: center; gap: .5rem; color: var(--texto-2); font-size: .9rem; }
.separador::before, .separador::after { content: ''; flex: 1; border-top: 1px solid var(--borde); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .barra, .boton, .volver { display: none !important; } body { background: #fff; } }