/* =========================================================================
   CHECADOR · ASPECTO TRAZENIA
   Se carga después del tema: no cambia el marcado de las pantallas, solo cómo
   se ven. Los tokens y las reglas salen del manual de marca de Trazenia.

   Grafito como base, turquesa como voz, ámbar como señal. El ámbar se guarda
   para lo que de verdad pide atención: si aparece en todo, deja de ser señal.
   Por eso el botón principal aquí es turquesa, no ámbar como en el sitio: una
   pantalla de trabajo tiene varios formularios. La excepción es la entrada,
   donde sí hay una sola acción.
   ========================================================================= */

:root {
  color-scheme: dark;

  --grafito: #0f1518;
  --acero: #1b2427;
  --acero-alto: #222d31;
  --turquesa: #12b8a0;
  --turquesa-profundo: #0b7c6b;
  --ambar: #f5a524;
  --hueso: #f2f5f4;
  --gris-claro: #9baaad;
  --coral: #ff8a7a;

  --fondo: var(--grafito);
  --fondo-alt: #0b1013;
  --superficie: var(--acero);
  --superficie-alta: var(--acero-alto);
  --linea: #2a3639;
  --tinta: #ecf1f0;
  --tinta-media: var(--gris-claro);
  --acento-tenue: rgba(18, 184, 160, 0.14);
  --acento-linea: rgba(18, 184, 160, 0.34);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 220ms;
  --medio: 480ms;
  --radio: 3px;

  /* Lo que el tema toma de Bootstrap. */
  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--linea);
  --bs-font-sans-serif: var(--texto);
  --bs-body-font-family: var(--texto);
}

/* ------------------------------------------------------------------- base */
html, body { background: var(--fondo); }

body {
  font-family: var(--texto);
  font-size: 0.9375rem;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .card-title {
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: -0.012em;
}

a { color: var(--turquesa); }
a:hover { color: var(--tinta); }
::selection { background: var(--turquesa); color: var(--grafito); }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

.text-muted { color: var(--tinta-media) !important; }
.text-info, .text-success { color: var(--turquesa) !important; }
.text-warning { color: var(--ambar) !important; }
.text-danger { color: var(--coral) !important; }
.text-dark { color: var(--grafito) !important; }
.bg-light { background: var(--superficie-alta) !important; color: var(--tinta); }
.border { border-color: var(--linea) !important; }
/* Una línea de señal y no el marco completo: varias tarjetas juntas con borde
   ámbar serían justo lo que el manual pide evitar. */
.card.border-warning { border-color: var(--linea) !important; border-left: 2px solid var(--ambar) !important; }
.card.border-danger { border-color: var(--linea) !important; border-left: 2px solid var(--coral) !important; }
.small, small { color: inherit; }
.form-text { color: var(--tinta-media); }

/* ------------------------------------------------------------- caparazón */
.preloader { background: var(--fondo); }
.loader__figure { border-color: var(--turquesa); }
.loader__label { color: var(--turquesa); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

#main-wrapper, .page-wrapper, .container-fluid { background: var(--fondo); }

.skin-blue .topbar,
.topbar .top-navbar .navbar-header {
  background: var(--fondo-alt);
  box-shadow: none;
}
.topbar { border-bottom: 1px solid var(--linea); }

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
.topbar .nav-link.text-white {
  color: var(--tinta-media) !important;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--turquesa) !important; }

.left-sidebar, .scroll-sidebar, .sidebar-nav, .sidebar-nav ul { background: var(--fondo-alt); }
.left-sidebar { border-right: 1px solid var(--linea); box-shadow: none; }

.sidebar-nav ul li a {
  color: var(--tinta-media);
  font-family: var(--texto);
  font-size: 0.875rem;
}
.sidebar-nav > ul > li > a i { color: var(--tinta-media); }

.skin-blue .sidebar-nav ul li a:hover,
.skin-blue .sidebar-nav ul li a:hover i,
.skin-blue .sidebar-nav > ul > li.active > a,
.skin-blue .sidebar-nav > ul > li.active > a i,
.skin-blue .sidebar-nav ul li a.active,
.sidebar-nav ul li ul li a.active,
.sidebar-nav ul li a.active { color: var(--turquesa); }

.skin-blue .sidebar-nav > ul > li.active > a { border-left: 2px solid var(--turquesa); background: var(--acento-tenue); }
.sidebar-nav .has-arrow::after { border-color: var(--tinta-media); }

/* Con el menú colapsado, el tema despliega al pasar el ratón con fondo blanco. */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a,
.mini-sidebar .sidebar-nav #sidebarnav > li > ul,
.mini-sidebar .sidebar-nav #sidebarnav li ul { background: var(--superficie); }

.dropdown-menu {
  background: var(--superficie-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: none;
}
.dropdown-item { color: var(--tinta); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--acento-tenue); color: var(--turquesa); }

/* --------------------------------------------------------- título de página */
.page-titles {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 24px;
  padding-bottom: 18px;
}

/* La etiqueta con su trazo y el punto ámbar: la firma de los titulares del sitio. */
.page-titles .text-themecolor {
  color: var(--tinta);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 6px;
}
.page-titles .text-themecolor::before {
  content: "Control de asistencia";
  display: block;
  padding-left: 30px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 100%;
  font-variation-settings: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquesa);
  background: linear-gradient(var(--turquesa), var(--turquesa)) left center / 22px 2px no-repeat;
}
.page-titles .text-themecolor::after { content: "."; color: var(--ambar); }
.page-titles p { max-width: 75ch; }

/* --------------------------------------------------------------- tarjetas */
.card {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: none;
  color: var(--tinta);
  margin-bottom: 20px;
}
.card-body { color: var(--tinta); }
.card-title { font-size: 1.125rem; margin-bottom: 12px; }
.card h2 { font-weight: 700; letter-spacing: -0.02em; }

/* Los rótulos de los contadores: datos, en mono. */
.card h6.text-muted {
  font-family: var(--mono);
  font-weight: 500;
  font-stretch: 100%;
  font-variation-settings: normal;
  letter-spacing: 0.09em;
}

/* --------------------------------------------------------------- botones */
.btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--radio);
  padding: 10px 18px;
  box-shadow: none;
  /* El relleno entra como un trazo desde la izquierda, no como un fundido. */
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size var(--medio) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; box-shadow: none; }
.btn-sm { font-size: 0.6875rem; padding: 6px 12px; }
.btn-lg { font-size: 0.8125rem; padding: 14px 24px; }

.btn-info, .btn-success {
  --btn-relleno: var(--hueso);
  background-color: var(--turquesa);
  background-image: linear-gradient(var(--btn-relleno), var(--btn-relleno));
  border: 1px solid var(--turquesa);
  color: var(--grafito);
  font-weight: 600;
}
.btn-info:hover, .btn-info:focus, .btn-success:hover, .btn-success:focus,
.btn-info:active, .btn-success:active {
  background-color: var(--turquesa);
  background-image: linear-gradient(var(--btn-relleno), var(--btn-relleno));
  border-color: var(--hueso);
  color: var(--grafito);
}

.btn-outline-secondary, .btn-outline-info, .btn-light {
  background-color: transparent;
  background-image: linear-gradient(var(--turquesa), var(--turquesa));
  border: 1px solid var(--linea);
  color: var(--tinta);
}
.btn-outline-secondary:hover, .btn-outline-info:hover, .btn-light:hover,
.btn-outline-secondary:focus, .btn-outline-info:focus, .btn-light:focus,
.btn-outline-secondary:active, .btn-outline-info:active, .btn-light:active {
  background-color: transparent;
  background-image: linear-gradient(var(--turquesa), var(--turquesa));
  border-color: var(--turquesa);
  color: var(--grafito);
}

.btn-outline-danger {
  background-color: transparent;
  background-image: linear-gradient(var(--coral), var(--coral));
  border: 1px solid var(--linea);
  color: var(--coral);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  background-color: transparent;
  background-image: linear-gradient(var(--coral), var(--coral));
  border-color: var(--coral);
  color: var(--grafito);
}

.btn-link { color: var(--turquesa); text-transform: none; letter-spacing: 0; }

.btn:disabled, .btn.disabled {
  background-color: transparent;
  background-image: none;
  border-color: var(--linea);
  color: #6b7a7d;
  opacity: 1;
}

/* -------------------------------------------------------------- formularios */
.form-label, .form-check-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: 4px;
}
.form-check-label { text-transform: none; letter-spacing: 0; font-family: var(--texto); font-size: 0.875rem; }

.form-control, .form-select {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 0.9375rem;
  padding-left: 2px;
  box-shadow: none;
  transition: border-color var(--rapido) var(--curva);
}
.form-control:focus, .form-select:focus {
  background-color: transparent;
  border-bottom-color: var(--turquesa);
  box-shadow: none;
  color: var(--tinta);
}
.form-control::placeholder { color: #6b7a7d; }
.form-control:disabled, .form-control[readonly] { background: transparent; color: var(--tinta-media); border-bottom-style: dashed; opacity: 1; }
.form-control[type="file"] { padding-top: 8px; }

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239baaad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background: var(--grafito); color: var(--tinta); }
.form-control-sm, .form-select-sm { font-size: 0.8125rem; }

.form-check-input { background-color: transparent; border-color: var(--gris-claro); }
.form-check-input:checked { background-color: var(--turquesa); border-color: var(--turquesa); }

/* El acceso se pinta de turquesa en la etiqueta del campo activo, como en el sitio. */
.mb-3:focus-within > .form-label { color: var(--turquesa); }

/* ----------------------------------------------------------------- tablas */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tinta);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.022);
  --bs-table-striped-color: var(--tinta);
  --bs-table-hover-bg: var(--acento-tenue);
  --bs-table-hover-color: var(--tinta);
  --bs-table-border-color: var(--linea);
  color: var(--tinta);
  border-color: var(--linea);
  font-size: 0.875rem;
}
.table > :not(caption) > * > * { border-bottom-color: var(--linea); padding: 11px 14px; }
.table > thead > tr > th {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-media);
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--linea);
}
/* El tema pinta las filas alternas con su propio fondo claro. */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: rgba(255, 255, 255, 0.022);
  color: var(--tinta);
}
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  background-color: var(--acento-tenue);
  color: var(--tinta);
}
.table-responsive { border: 1px solid var(--linea); border-radius: var(--radio); }
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > tbody > tr:last-child > td { border-bottom: 0; }

/* ----------------------------------------------------------------- señales */
.badge {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
}
.badge.bg-success, .badge.bg-cyan, .badge.bg-info {
  background: var(--acento-tenue) !important;
  border-color: var(--acento-linea);
  color: var(--turquesa) !important;
}
.badge.bg-warning {
  background: rgba(245, 165, 36, 0.14) !important;
  border-color: rgba(245, 165, 36, 0.4);
  color: var(--ambar) !important;
}
.badge.bg-danger {
  background: rgba(255, 138, 122, 0.13) !important;
  border-color: rgba(255, 138, 122, 0.4);
  color: var(--coral) !important;
}
.badge.bg-dark, .badge.bg-light {
  background: transparent !important;
  border-color: var(--linea);
  color: var(--tinta-media) !important;
}

.alert {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--turquesa);
  border-radius: var(--radio);
  color: var(--tinta);
}
.alert-danger { border-left-color: var(--coral); }
.alert-warning { border-left-color: var(--ambar); }
.alert .alert-link { color: var(--turquesa); font-weight: 500; }

/* --------------------------------------------------------------- teléfono */
@media (max-width: 767.98px) {
  .tabla-movil tr { background: var(--superficie); border-color: var(--linea); border-radius: var(--radio); }
  .tabla-movil > tbody > tr > td::before {
    color: var(--tinta-media);
    font-family: var(--mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .table-responsive { border: 0; }
  .page-titles .text-themecolor { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------- entrada */
body.entrada {
  min-height: 100vh;
  background:
    radial-gradient(60rem 34rem at 88% 108%, rgba(18, 184, 160, 0.13), transparent 62%),
    var(--fondo);
}
.caja-sencilla { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.caja-sencilla .card { width: 100%; max-width: 400px; background: var(--superficie); }
.caja-sencilla .logo { max-width: 160px; max-height: 72px; }
.caja-sencilla .marca { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.022em; }
.caja-sencilla .marca::after { content: "."; color: var(--ambar); }
.caja-sencilla .etiqueta {
  display: inline-block;
  padding-left: 30px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquesa);
  background: linear-gradient(var(--turquesa), var(--turquesa)) left center / 22px 2px no-repeat;
}

/* Aquí sí hay una sola acción: es el lugar del ámbar. */
.caja-sencilla .btn-info {
  background-color: var(--ambar);
  border-color: var(--ambar);
  color: var(--grafito) !important;
  font-weight: 600;
}
.caja-sencilla .btn-info:hover, .caja-sencilla .btn-info:focus {
  background-color: var(--ambar);
  border-color: var(--hueso);
}

/* El logo que sube cada empresa puede venir oscuro o con fondo blanco: sobre
   grafito se perdería o se vería como un recorte. */
img[src*="/Cuenta/Logo"] { background: #fff; border-radius: var(--radio); padding: 3px; }

/* ----------------------------------------------------------- calendario */
/* Vacaciones trae su propio estilo después de esta hoja: por eso el "body". */
body .calendario { border-color: var(--linea); border-radius: var(--radio); }
body .calendario-dias .nombre { color: var(--tinta-media); font-family: var(--mono); }
body .calendario-dias button { background: var(--superficie-alta); color: var(--tinta); border-radius: var(--radio); font-family: var(--mono); }
body .calendario-dias button:hover:not(:disabled) { border-color: var(--turquesa); }
body .calendario-dias button.hoy { border-color: var(--gris-claro); }
body .calendario-dias button.elegido { background: var(--turquesa); color: var(--grafito); }
body .calendario-dias button.pedido, body .calendario-dias button.pedido:disabled { background: var(--superficie); color: #6b7a7d; }
body .calendario-dias button:disabled { background: transparent; color: #4d5b5e; }
body .calendario-dias button.inicio-rango { outline-color: var(--turquesa); }
body #resumenDias .chip {
  background: var(--acento-tenue);
  border-color: var(--acento-linea);
  color: var(--turquesa);
  font-family: var(--mono);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}