/* Intra-Equipos — tema visual.

   Misma estructura que Commander Field (barra oscura fija, franja de color de
   marca, pestañas horizontales desplazables, tarjetas sobre fondo gris), con
   los colores de SCS Equipos en lugar del naranja: el azul petroleo y el
   celeste salen del logo de la empresa.

   Todo el color pasa por variables: cambiar la marca es cambiar :root. */

:root {
  --scs-azul:        #18789C;   /* azul petroleo del logo */
  --scs-azul-oscuro: #0F5A76;
  --scs-celeste:     #309CCC;   /* celeste del logo */
  --scs-claro:       #E8F4F8;

  --bg:      #f5f5f5;
  --surface: #ffffff;
  --text:    #111111;
  --text-2:  #555555;
  --border:  #e0e0e0;
  --shadow:  rgba(0,0,0,.07);
  --nav-bg:  #0D2733;
  --nav-text:#f2f2f2;
}

[data-theme="dark"] {
  --bg:      #111417;
  --surface: #1c2126;
  --text:    #f2f2f2;
  --text-2:  #9aa4ad;
  --border:  #2b3238;
  --shadow:  rgba(0,0,0,.4);
  --nav-bg:  #081a22;
  --nav-text:#f2f2f2;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; min-width: 20rem;
  background: var(--bg); color: var(--text);
  font-family: Verdana, Geneva, 'DejaVu Sans', Tahoma, sans-serif;
  transition: background .2s, color .2s;
}
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--scs-celeste); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.scs-navbar {
  background: var(--nav-bg);
  border-bottom: 3px solid var(--scs-celeste);
  padding: .6rem 1.1rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 100;
}
.scs-navbar .brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--nav-text);
}
/* El logo va sobre una pastilla blanca porque su «S» es espacio en blanco
   entre los dos trazos: sobre el azul oscuro de la barra esa S se volveria
   oscura y el logo dejaria de leerse como es. Con la pastilla, ademas, el
   recuadro se ve puesto a proposito y no como un PNG mal recortado. */
.scs-navbar .brand img {
  height: 30px; width: auto; display: block;
  background: #fff; border-radius: .35rem; padding: .2rem .35rem;
}
.scs-navbar .brand-text strong {
  display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.1;
  color: var(--nav-text); letter-spacing: .01em;
}
.scs-navbar .brand-text strong em {
  font-style: normal; color: var(--scs-celeste);
}
.scs-navbar .brand-text span {
  font-size: .52rem; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.navbar-actions { display: flex; align-items: center; gap: .6rem; }
.usuario-nombre { font-size: .8rem; color: rgba(255,255,255,.65); }

.btn-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: var(--nav-text); border-radius: .4rem; cursor: pointer;
  padding: .34rem .65rem; font-size: .8rem; font-family: inherit;
  text-decoration: none; min-height: 34px;
}
.btn-nav:hover { border-color: var(--scs-celeste); color: var(--scs-celeste); }

/* ── Pestañas ───────────────────────────────────────────────────────────── */
.scs-tabs {
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: 0 .75rem; position: sticky; top: 3.1rem; z-index: 90;
}
.scs-tabs a {
  flex: 0 0 auto; padding: .62rem .85rem; font-size: .86rem; font-weight: 600;
  color: var(--text-2); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; min-height: 42px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.scs-tabs a:hover { color: var(--scs-azul); }

/* ── Modo aplicación ────────────────────────────────────────────────────
   En el celular y en la tablet el portal se usa como una aplicación: la
   barra de pestañas se esconde y el botón «Menú» abre una pantalla de
   botones grandes para elegir adónde ir. «Tablet» es una pantalla táctil de
   hasta 1366 px (un iPad Pro apaisado); un computador con mouse sigue con
   la barra de siempre. */
.btn-menu { display: none; }
@media (max-width: 47.99rem), (pointer: coarse) and (max-width: 85.4rem) {
  .btn-menu { display: inline-flex; }
  nav.scs-tabs { display: none; }
}

.lanzador { position: fixed; inset: 0; z-index: 4000; background: var(--bg);
  overflow-y: auto; padding-bottom: 2rem; }
.lanzador[hidden] { display: none; }
.lanzador-cabeza { position: sticky; top: 0; z-index: 1; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--nav-bg); color: var(--nav-text); padding: .8rem 1rem; }
.lanzador-cabeza strong { font-size: 1rem; }
.lanzador-grupo { padding: 1rem 1rem 0; max-width: 72rem; margin: 0 auto; }
.lanzador-grupo h3 { font-size: .72rem; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }

/* Los botones grandes: el lanzador, «Mi ficha», las secciones de una ficha. */
.botones-app { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); }
@media (min-width: 48rem) {
  .botones-app { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); }
}
.boton-app { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem; text-align: center; min-height: 5.6rem;
  padding: .7rem .45rem; border: 1px solid var(--border); border-radius: .8rem;
  background: var(--surface); color: var(--text); text-decoration: none;
  font-size: .8rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  width: 100%; font-family: inherit; }
.boton-app i { font-size: 1.6rem; color: var(--scs-azul); }
[data-theme="dark"] .boton-app i { color: var(--scs-celeste); }
.boton-app .sub { font-size: .68rem; font-weight: 400; color: var(--text-2); }
.boton-app:hover { border-color: var(--scs-celeste); color: var(--text); }
.boton-app:active { transform: scale(.97); }
.boton-app.activo { border-color: var(--scs-celeste); background: var(--scs-claro); }
[data-theme="dark"] .boton-app.activo { background: rgba(48,156,204,.16); }
.boton-app.apagado { opacity: .55; }
.scs-tabs a.active { color: var(--scs-azul); border-bottom-color: var(--scs-celeste); }

/* Un menu con lista, la de Finanzas. Se abre al pasar el mouse y tambien al
   recibir el foco con el teclado: si solo abriera con hover, no habria forma
   de llegar tabulando. */
.scs-tabs .con-lista { position: relative; display: inline-flex; }
.scs-tabs .con-lista > a { display: inline-flex; align-items: center; gap: .3rem; }
.scs-tabs .con-lista .lista {
  position: absolute; top: 100%; left: 0; z-index: 120; min-width: 13rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 0 .5rem .5rem; box-shadow: 0 6px 18px rgba(0,0,0,.14);
  padding: .3rem; display: none; flex-direction: column;
  /* Admin tiene doce entradas y en un portatil de 600px de alto no cabian:
     se cortaban las ultimas cuatro y no habia forma de llegar a ellas. Con
     el tope y el scroll, la lista se queda dentro de la pantalla y se baja
     con la rueda. */
  max-height: calc(100vh - 7.5rem); overflow-y: auto; overscroll-behavior: contain;
}
/* El menu que queda pegado al borde derecho se abre hacia adentro. Lo pone
   el script de base.html midiendo, porque donde cae cada menu depende de
   cuantos quepan en la fila y eso cambia con el ancho. */
.scs-tabs .con-lista .lista.hacia-izquierda { left: auto; right: 0; }
.scs-tabs .con-lista:hover .lista,
.scs-tabs .con-lista.abierto .lista,
.scs-tabs .con-lista:focus-within .lista { display: flex; }
.scs-tabs .con-lista .lista a {
  padding: .45rem .6rem; border-radius: .35rem; border-bottom: none;
  white-space: nowrap; font-size: .82rem;
}
.scs-tabs .con-lista .lista a:hover { background: var(--bg); color: var(--scs-azul); }
.scs-tabs .con-lista.active > a { color: var(--scs-azul); }
[data-theme="dark"] .scs-tabs .con-lista.active > a { color: var(--scs-celeste); }
[data-theme="dark"] .scs-tabs a:hover,
[data-theme="dark"] .scs-tabs a.active { color: var(--scs-celeste); }

/* ── Superficies ────────────────────────────────────────────────────────── */
/* Se usa el ancho que hay. El tope existe para que una linea de texto
   no cruce una pantalla ultraancha, no para dejar margenes en un
   monitor normal. En un telefono el padding baja, que si no se come
   medio centimetro por lado de los pocos que hay. */
main.pagina { padding: 1.1rem; max-width: 120rem; margin: 0 auto; }
@media (max-width: 36rem) { main.pagina { padding: .7rem; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: .55rem; box-shadow: 0 1px 2px var(--shadow);
}
.card-header { background: transparent; border-bottom: 1px solid var(--border); }
.table { --bs-table-bg: transparent; color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table-hover > tbody > tr:hover > * { background: var(--scs-claro); }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(48,156,204,.12); }
.text-secondary { color: var(--text-2) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-2); }
.breadcrumb a { color: var(--scs-azul); text-decoration: none; }

/* `background-color` y no `background`: la forma corta borra la
   `background-image` con la que Bootstrap dibuja la flecha del <select>, y
   sin flecha un desplegable se lee como un campo fijo. */
.form-control, .form-select {
  background-color: var(--surface); color: var(--text); border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface); color: var(--text);
  border-color: var(--scs-celeste); box-shadow: 0 0 0 .2rem rgba(48,156,204,.2);
}
/* En oscuro la flecha de Bootstrap es negra y se pierde contra el fondo. */
[data-theme="dark"] .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='%239aa4ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .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='%239aa4ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
}
@media (max-width: 48rem) {
  input, select, textarea, .form-control, .form-select { font-size: 16px; }
}

a { color: var(--scs-azul); }
[data-theme="dark"] a { color: var(--scs-celeste); }

.btn-primary {
  --bs-btn-bg: var(--scs-azul); --bs-btn-border-color: var(--scs-azul);
  --bs-btn-hover-bg: var(--scs-azul-oscuro); --bs-btn-hover-border-color: var(--scs-azul-oscuro);
  --bs-btn-active-bg: var(--scs-azul-oscuro); --bs-btn-disabled-bg: var(--scs-azul);
  --bs-btn-disabled-border-color: var(--scs-azul);
}
.btn-outline-primary {
  --bs-btn-color: var(--scs-azul); --bs-btn-border-color: var(--scs-azul);
  --bs-btn-hover-bg: var(--scs-azul); --bs-btn-hover-border-color: var(--scs-azul);
  --bs-btn-active-bg: var(--scs-azul-oscuro);
}
.btn-outline-secondary { --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--border); }
.badge.text-bg-light { background: var(--scs-claro) !important; color: var(--scs-azul-oscuro) !important; }
[data-theme="dark"] .badge.text-bg-light { background: rgba(48,156,204,.16) !important; color: var(--scs-celeste) !important; }

/* ── Piezas propias ─────────────────────────────────────────────────────── */

/* El boton de volver, en el mismo lugar en todas las subpantallas: arriba a la
   izquierda, junto a la miga de pan. Su destino sale del propio breadcrumb, asi
   que los dos no pueden decir cosas distintas. */
.btn-volver { flex: none; }
nav:has(> .btn-volver), nav:has(> .btn-volver + ol) {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
@media (max-width: 36rem) {
  .btn-volver { font-size: .78rem; padding: .15rem .5rem; }
}

/* ── Tablas y encabezados, unificados ───────────────────────────────────
   Cada pantalla habia crecido con su propia mezcla de `table-sm`, `small` y
   `table-hover`, asi que dos listados del mismo sistema se veian de distinto
   tamano. `.tabla-scs` fija una sola tipografia y un solo encabezado para
   todas; el nombre de la clase esta puesto en cada listado a proposito, para
   que una tabla de detalle dentro de una ficha pueda no llevarlo. */
.tabla-scs { font-size: .8125rem; margin-bottom: 0; }
.tabla-scs > thead > tr > th {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-2);
  background: var(--bg); border-bottom: 2px solid var(--border);
  padding: .5rem .6rem; vertical-align: bottom; white-space: nowrap;
}
.tabla-scs > thead > tr > th a {
  color: inherit; text-decoration: none; display: inline-block;
}
.tabla-scs > thead > tr > th a:hover { color: var(--scs-azul); }
.tabla-scs > thead > tr > th .flecha { color: var(--scs-azul); font-weight: 700; }
.tabla-scs > tbody > tr > td { padding: .45rem .6rem; }
/* Los numeros se leen alineados a la derecha y con cifras del mismo ancho:
   asi se comparan de un vistazo en vez de tener que leerlos uno por uno. */
.tabla-scs .tabular { font-variant-numeric: tabular-nums; }
.tabla-scs .vacio { color: var(--text-2); opacity: .6; }
.tabla-scs .acciones-fila { width: 1%; }
.tabla-scs code { font-size: .95em; }

/* El encabezado de cada pantalla: titulo a la izquierda, acciones a la derecha,
   y el conteo siempre del mismo tamano y color. */
.cabecera-pagina {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem; margin-bottom: 1rem;
}
.cabecera-pagina h1 { font-size: 1.25rem; font-weight: 700; }
.cabecera-pagina .conteo {
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 1rem; padding: .05rem .5rem; vertical-align: .15em;
}

/* El portal muestra tablas anchas del Access: la celda se recorta en vez de
   estirar la pagina, y la fila completa se lee en la ficha. */
.celda { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 36rem) { .celda { max-width: 11rem; } }

.entidad-card { transition: border-color .12s; }
.entidad-card:hover { border-color: var(--scs-celeste); }
.entidad-card.vacia { opacity: .55; }

/* Linea de tiempo del equipo: un color por tipo de hecho, para recorrer la
   columna de un vistazo sin leer cada titulo. */
.punto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.punto-ingreso     { background: var(--text-2); }
.punto-certificado { background: var(--scs-azul); }
.punto-venta       { background: #198754; }
.punto-orden       { background: var(--scs-celeste); }
.punto-soporte     { background: #dc3545; }
.punto-arriendo    { background: #7c3aed; }

/* Las observaciones son texto plano con saltos: se respetan, pero sin
   desbordar la tarjeta cuando alguien pego un parrafo largo. */
.observaciones { white-space: pre-wrap; word-break: break-word; font-family: inherit; }

.tarjeta-metrica { text-decoration: none; display: block; }
.tarjeta-metrica .valor { font-size: 1.75rem; line-height: 1.1; color: var(--text); }
.tarjeta-metrica .rotulo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2);
}


/* ── Los avisos van en el celeste del logo ───────────────────────────────
   Bootstrap trae `warning` en amarillo. Acá el amarillo no aporta: lo que
   tiene que saltar es lo vencido, y para eso está el rojo de `danger`. Un
   aviso que solo informa comparte la familia del resto del portal. */
.btn-warning {
  --bs-btn-bg: var(--scs-celeste);
  --bs-btn-border-color: var(--scs-celeste);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--scs-azul);
  --bs-btn-hover-border-color: var(--scs-azul);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--scs-azul-oscuro);
  --bs-btn-active-border-color: var(--scs-azul-oscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--scs-celeste);
  --bs-btn-disabled-border-color: var(--scs-celeste);
  --bs-btn-disabled-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--scs-azul);
  --bs-btn-border-color: var(--scs-celeste);
  --bs-btn-hover-bg: var(--scs-celeste);
  --bs-btn-hover-border-color: var(--scs-celeste);
  --bs-btn-hover-color: #fff;
}
.alert-warning {
  --bs-alert-bg: rgba(48, 156, 204, .09);
  --bs-alert-border-color: rgba(48, 156, 204, .45);
  --bs-alert-color: #125F7C;
}
.text-bg-warning { background-color: var(--scs-celeste) !important;
                   color: #fff !important; }
.table-warning { --bs-table-bg: rgba(48, 156, 204, .12);
                 --bs-table-color: inherit; }
.text-warning-emphasis { color: #125F7C !important; }
.text-warning { color: var(--scs-celeste) !important; }
.border-warning { border-color: var(--scs-celeste) !important; }

/* En oscuro los mismos avisos necesitan más luz para leerse. */
:root[data-theme="dark"] .alert-warning,
:root:not([data-theme="light"]) .alert-warning {
  --bs-alert-color: #8FD2EE;
}
:root[data-theme="dark"] .text-warning-emphasis,
:root:not([data-theme="light"]) .text-warning-emphasis {
  color: #8FD2EE !important;
}
:root[data-theme="dark"] .text-warning,
:root:not([data-theme="light"]) .text-warning { color: #8FD2EE !important; }