:root {
  --azul: #1a4d8f;
  --azul-osc: #0e2f57;
  --marca: #f2c01e;
  --marca-osc: #c99a00;
  --marca-clara: #fff6d6;
  --marca-texto: #7a5c00;
  --sobre-marca: #141414;   /* texto sobre el color principal (lo ajusta Administración -> Marca) */
  --negro: #141414;
  --verde: #1b5e20;
  --rojo: #a31515;
  --amarillo: #b58900;      /* solo para marcas sin texto (puntos de estado); el texto de aviso usa --aviso-texto */
  --aviso-texto: #7a5c00;   /* 5,5:1 sobre el fondo de aviso */
  --gris-100: #f5f6f8;
  --gris-200: #e6e8ec;
  --gris-400: #b8bcc4;
  --gris-700: #4a4f58;
}
body { background: var(--gris-100); font-size: 0.875rem; }
.barra-app { background: var(--negro); padding: 8px 18px; border-bottom: 3px solid var(--marca); }
.barra-app .navbar-brand { color: var(--marca); font-weight: 800; font-size: 1rem; margin-right: 24px; display: flex; align-items: center; gap: 10px; letter-spacing: .02em; text-transform: uppercase; }
.barra-app .navbar-brand svg, .barra-app .navbar-brand img { height: 28px; width: auto; max-width: 120px; display: block; object-fit: contain; }
.barra-app .nav-link { color: #d6d6d6; border-radius: 6px; font-size: 0.8125rem; }
.barra-app .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.barra-app .nav-link.activo { background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.barra-app .usuario-barra { color: #bdbdbd; text-decoration: none; }
.barra-app .usuario-barra:hover { color: #fff; text-decoration: underline; }
.cuenta { max-width: 460px; }
.barra-app .btn-outline-light { border-color: var(--marca); color: var(--marca); }
.barra-app .btn-outline-light:hover { background: var(--marca); color: var(--sobre-marca); }

/* Botones de Bootstrap en los colores de la marca */
.btn-primary { --bs-btn-color: var(--sobre-marca); --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-color: var(--sobre-marca); --bs-btn-hover-bg: var(--marca-osc); --bs-btn-hover-border-color: var(--marca-osc);
  --bs-btn-active-color: var(--sobre-marca); --bs-btn-active-bg: var(--marca-osc); --bs-btn-active-border-color: var(--marca-osc);
  --bs-btn-disabled-color: var(--gris-400); --bs-btn-disabled-bg: var(--gris-200); --bs-btn-disabled-border-color: var(--gris-200);
  --bs-btn-focus-shadow-rgb: 201,154,0; font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--negro); --bs-btn-border-color: var(--negro);
  --bs-btn-hover-color: var(--sobre-marca); --bs-btn-hover-bg: var(--marca); --bs-btn-hover-border-color: var(--marca-osc);
  --bs-btn-active-color: var(--sobre-marca); --bs-btn-active-bg: var(--marca); --bs-btn-active-border-color: var(--marca-osc);
  --bs-btn-disabled-color: var(--gris-400); --bs-btn-disabled-border-color: var(--gris-200);
  --bs-btn-focus-shadow-rgb: 201,154,0; }
.form-control:focus, .form-select:focus { border-color: var(--marca-osc); box-shadow: 0 0 0 .2rem rgba(242,192,30,.3); }
.nav-tabs .nav-link { color: var(--negro); }
.nav-tabs .nav-link.active { color: var(--negro); font-weight: 700; border-top: 3px solid var(--marca); }
a { color: var(--marca-texto); }
.contenido { padding: 18px; max-width: 1500px; margin: 0 auto; }

.tarjeta { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 16px; margin-bottom: 16px; }
.tarjeta h1, .tarjeta h2 { font-size: 1.0625rem; color: var(--negro); margin-bottom: 8px; }
.tarjeta h2.subtitulo, .tarjeta h3 { font-size: 0.875rem; color: var(--negro); }
.ayuda { color: #5b6270; font-size: 0.75rem; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.barra-filtros .campo { display: flex; flex-direction: column; gap: 3px; }
.barra-filtros label, .form-grilla label { font-size: 0.75rem; color: var(--gris-700); font-weight: 600; }
.form-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

/* Estados */
.estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; }
.estado.ok { background: #e3f3e5; color: var(--verde); }
.estado.warn { background: #fdf0d5; color: var(--aviso-texto); }
.estado.off { background: #f1e3e3; color: var(--rojo); }
.estado.neutro { background: var(--gris-200); color: var(--gris-700); }

/* Totales */
.totales { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.totales .item { background: var(--gris-100); border-radius: 6px; padding: 8px 14px; min-width: 110px; }
.totales .n { font-size: 1.125rem; font-weight: 700; color: var(--negro); }
.totales .l { font-size: 0.6875rem; color: var(--gris-700); }

/* Tablas */
.tabla-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--gris-200); border-radius: 6px; }
table.grilla { border-collapse: collapse; width: 100%; font-size: 0.75rem; background: #fff; }
table.grilla th, table.grilla td { border: 1px solid var(--gris-200); padding: 5px 7px; text-align: center; white-space: nowrap; }
table.grilla th { background: var(--gris-100); position: sticky; top: 0; z-index: 2; }
table.grilla td.nombre, table.grilla th.nombre { text-align: left; }
table.grilla.carga td.nombre, table.grilla.carga th.nombre { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 190px; }
table.grilla.carga th.nombre { background: var(--gris-100); z-index: 3; }
table.grilla .col-dia { min-width: 64px; }
table.grilla .feriado-col { background: #fff4e0; }
table.grilla .finde-col { background: #e6edf7; }
table.grilla .total { font-weight: 700; background: var(--marca-clara); }

/* Selección tipo planilla en la grilla de carga */
table.grilla td.col-dia { cursor: cell; user-select: none; position: relative; height: 38px; }
table.grilla td.col-dia.sel { box-shadow: inset 0 0 0 2px var(--marca-osc); background: var(--marca-clara); }
table.grilla td.col-dia.bloqueada { cursor: not-allowed; background: repeating-linear-gradient(45deg, var(--gris-100), var(--gris-100) 4px, var(--gris-200) 4px, var(--gris-200) 8px); }
.horas-celda { font-weight: 700; font-size: 0.8125rem; }
.chip-dia { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; color: #fff; }
/* Cada estado tiene su forma además de su color: círculo = sin guardar, rombo = pendiente de validación, tilde = validado */
.punto-estado { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; }
.punto-sin-guardar { border-radius: 50%; background: var(--amarillo); border: 1px solid var(--negro); }
.punto-pendiente { width: 7px; height: 7px; margin: 1px; background: var(--amarillo); border: 1px solid var(--negro); transform: rotate(45deg); }
.punto-validado { width: 11px; height: 11px; border-radius: 2px; background: var(--azul); color: #fff; font-size: 0.5625rem; line-height: 11px; text-align: center; font-weight: 700; }
.punto-validado::after { content: "\2713"; }
.mini-feriado { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Buscador de personal */
.buscador-personal { position: relative; }
.buscador-personal input { width: 250px; }
.resultados-personal { position: absolute; top: calc(100% + 4px); left: 0; width: 340px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--gris-400); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 60; display: none; }
.resultados-personal.visible { display: block; }
.resultados-personal .op { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--gris-200); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.resultados-personal .op:last-child { border-bottom: none; }
.resultados-personal .op:hover, .resultados-personal .op.activa { background: var(--gris-100); }
.resultados-personal .op.deshabilitada { opacity: .5; cursor: default; }
.resultados-personal .dato { font-size: 0.6875rem; color: var(--gris-700); text-align: right; }
.resultados-personal .nada { padding: 12px; color: var(--gris-700); font-size: 0.8125rem; text-align: center; }

/* Barra flotante para editar la selección */
.editor-flotante { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 3px solid var(--marca);
  padding: 12px 18px; display: none; gap: 14px; align-items: end; flex-wrap: wrap; z-index: 50; box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
.editor-flotante.visible { display: flex; }
.editor-flotante .cuenta { font-size: 0.8125rem; color: var(--gris-700); margin-right: auto; }
.editor-flotante .cuenta strong { color: var(--negro); font-size: 1rem; }

/* Login */
.login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0a0a, #2b2b2b); }
.login-tarjeta { background: #fff; padding: 32px; border-radius: 12px; width: 340px; box-shadow: 0 8px 30px rgba(0,0,0,.25); border-top: 5px solid var(--marca); }
.login-logo { display: block; height: 52px; max-width: 220px; margin: 0 auto 14px; object-fit: contain; }
.logo-vista { max-height: 64px; max-width: 220px; background: var(--negro); padding: 6px; border-radius: 6px; }

.cargando { text-align: center; padding: 28px; color: var(--gris-700); }
kbd { font-size: 0.6875rem; }

/* Pantallas chicas (celular): barra con scroll lateral, filtros en columna, controles cómodos para el dedo */
.acciones-grilla { display: contents; }   /* en pantallas grandes los botones siguen sueltos en la barra de filtros */
body.editando .contenido { padding-bottom: 180px; }
@media (max-width: 768px) {
  .contenido { padding: 10px; }
  .tarjeta { padding: 12px; }
  .barra-app { padding: 6px 10px; }
  .barra-app .navbar-brand { font-size: 0.875rem; margin-right: 6px; }
  .barra-app .navbar-brand svg, .barra-app .navbar-brand img { height: 24px; }
  .barra-app .navbar-nav { order: 3; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; }
  .barra-app .nav-link { white-space: nowrap; padding: 9px 12px !important; font-size: 0.875rem; }
  .barra-app .usuario-barra { margin-left: auto; margin-right: 8px !important; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-filtros { flex-direction: column; align-items: stretch; }
  .barra-filtros .campo, .barra-filtros .buscador-personal { width: 100%; }
  .buscador-personal input { width: 100%; }
  .resultados-personal { width: calc(100vw - 44px); }
  .barra-filtros .flex-grow-1, .solo-escritorio { display: none; }
  .acciones-grilla { display: flex; gap: 6px; width: 100%; }
  .acciones-grilla .btn { flex: 1 1 0; padding-left: .3rem; padding-right: .3rem; font-size: 0.8125rem; }
  .totales .n { font-size: 0.9375rem; }
  #cabecera .totales { margin-top: 4px; gap: 6px; }
  #cabecera .totales .item { padding: 6px 8px; }
  /* 16 px evita que el navegador del celular haga zoom al tocar un campo */
  input, select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 1rem !important; min-height: 42px; }
  .btn, button.btn { min-height: 42px; font-size: 0.875rem; }
  .btn-sm { padding: .4rem .7rem; }
  table.grilla.carga td.nombre, table.grilla.carga th.nombre { min-width: 118px; max-width: 128px; white-space: normal; font-size: 0.6875rem; }
  table.grilla .col-dia { min-width: 46px; }
  table.grilla td.col-dia { height: 46px; }
  table.grilla th.col-dia, table.grilla td.nombre { cursor: pointer; }
  .tabla-scroll { max-height: 62vh; }
  .editor-flotante { padding: 10px 12px; gap: 8px; }
  .editor-flotante .cuenta { width: 100%; margin-right: 0; }
  .editor-flotante .campo { flex: 1 1 130px; }
  .editor-flotante .btn { flex: 1 1 130px; }
  .totales .item { min-width: 90px; flex: 1 1 90px; }
  .form-grilla { grid-template-columns: 1fr 1fr; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .nav-tabs .nav-link { white-space: nowrap; }
  .login-tarjeta { width: calc(100vw - 32px); max-width: 340px; padding: 24px; }
}
@media (max-width: 480px) { .form-grilla { grid-template-columns: 1fr; } }

/* botón de ver contraseña (ver_clave.js) */
.btn-ver-clave { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }

/* permisos por usuario (Administración → Usuarios) */
.editor-permisos { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--marca); border-radius: .5rem; background: var(--marca-clara); }
.editor-permisos h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin: 1rem 0 .4rem; }
.permisos-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 1.25rem; }
.permiso { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.permiso input { margin-top: .3rem; flex: none; width: 1.1rem; height: 1.1rem; }
.chip-rol { font-size: .68rem; padding: 0 .4rem; border-radius: .6rem; background: var(--negro); color: var(--marca); vertical-align: middle; }

/* Accesibilidad: enlace para saltar el menú, foco visible en la tabla con scroll y respeto por "reducir movimiento" */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--marca); color: var(--sobre-marca); padding: 8px 14px;
  border-radius: 0 0 6px 6px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 0; color: var(--sobre-marca); }
.tabla-scroll:focus-visible, main:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* diálogos propios (dialogos.js) */
.dialogo-peligro .modal-header { border-top: 5px solid var(--rojo); }
.dialogo-normal .modal-header { border-top: 5px solid var(--marca); }
.dialogo-texto { white-space: pre-line; }

/* grilla: foco del teclado bien visible, y que al moverse no quede tapada por la columna de nombres ni por los títulos */
table.grilla td.col-dia:focus { outline: 3px solid var(--negro); outline-offset: -3px; }
table.grilla td.col-dia:focus:not(:focus-visible) { outline: none; }
.tabla-scroll { scroll-padding-left: 200px; scroll-padding-top: 52px; }

/* leyenda de la grilla */
.leyenda { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--gris-200); }
.leyenda-grupos { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: 0.8125rem; }
.leyenda ul { list-style: none; padding: 0; margin: .25rem 0 0; }
.leyenda li { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.leyenda .marca-leyenda { position: static; flex: none; }
.leyenda .punto-pendiente { margin: 2px; }
.muestra-col { display: inline-block; width: 1.4rem; height: 1rem; border: 1px solid var(--gris-400); border-radius: 3px; flex: none; }
.atajos summary { cursor: pointer; font-size: 0.75rem; color: var(--gris-700); }
.atajos ul { font-size: 0.75rem; color: var(--gris-700); padding-left: 1.2rem; }

/* celular: objetivos táctiles de al menos 44 px */
@media (max-width: 768px) {
  input, select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { min-height: 44px; }
  .btn, button.btn { min-height: 44px; }
  .form-check-input { width: 1.6rem; height: 1.6rem; }
  .form-check-label { padding-top: .2rem; }
  table.grilla td.col-dia { height: 48px; min-width: 48px; }
  table.grilla th.col-dia { min-width: 48px; height: 48px; }
  .barra-app .nav-link { min-height: 44px; display: flex; align-items: center; }
  .tabla-scroll { scroll-padding-left: 130px; }
}