/* =====================================================================
   Ajustes propios sobre AdminLTE — panel de Alta Solicitada

   El panel comparte identidad con la parte pública: misma tipografía
   accesible, el mismo terracota institucional y el mismo anillo de foco.
   AdminLTE pone la estructura; esto pone el acabado.
   ===================================================================== */

@import url("tipografia.css");

:root {
  --marca: #a8470e;          /* 5.9:1 con texto blanco */
  --marca-fuerte: #8f4116;   /* 7.2:1 */
  --marca-suave: #fff4ec;
  --marca-borde: #f3cdb2;
  --cafe-menu: #3a2418;      /* menú lateral: marrón cálido, no negro */
  --gris-texto: #5c4a3f;
  /* El anillo de foco no es naranja: sobre un botón naranja desaparecería. */
  --foco-panel: 0 0 0 3px #fff, 0 0 0 5.5px #22160f;

  /* Nombres anteriores, conservados por las reglas ya escritas. */
  --azul-sedes: var(--marca);
  --azul-sedes-fuerte: var(--marca-fuerte);
}

body,
.btn,
.form-control,
.custom-select { font-family: "Atkinson Hyperlegible", "Segoe UI", Roboto, system-ui, sans-serif; }

body { font-size: 15px; }

/* Un solo anillo de foco, igual que en la parte pública: quien navega con
   teclado no tiene que aprenderse dos lenguajes visuales. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--foco-panel);
  border-radius: 6px;
}

/* AdminLTE deja los enlaces del menú sin foco perceptible sobre el azul. */
.nav-sidebar .nav-link:focus-visible { box-shadow: 0 0 0 3px var(--cafe-menu), 0 0 0 5.5px #f3cdb2; }

/* Las insignias de estado no se distinguen solo por color: llevan texto.
   Los tonos de Bootstrap no llegan a 4.5:1 con texto blanco a este tamaño
   (el verde #28a745 da 3.1:1), así que se oscurecen. */
.badge { font-size: 11.5px; padding: 4px 8px; font-weight: 700; }
.badge-success { background-color: #15774a; color: #fff; }
.badge-warning { color: #4a3a05; background-color: #ffd971; }
.badge-danger { background-color: #b3261e; color: #fff; }
.badge-secondary { background-color: #5c4a3f; color: #fff; }

/* Rol de la cuenta. Dos tonos bien distintos entre si y ambos por encima
   de 4.5:1 con su texto, para que se distingan tambien en una pantalla
   mala o impresos en blanco y negro. */
/* Barra con la accion principal del modulo de altas. Va antes de la tabla
   porque para el operador es lo primero que viene a hacer. */
.barra-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.btn-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(122, 59, 12, .18);
}

.btn-accion .icono { flex: none; }

@media (max-width: 575px) {
  .barra-accion { flex-direction: column; align-items: stretch; }
  .btn-accion { justify-content: center; }
}

/* Establecimiento al que esta acotado el listado, junto al titulo. */
.card-title__alcance {
  font-weight: 400;
  color: #6b5b52;
}

.badge-rol { text-transform: none; letter-spacing: 0.2px; }
.badge-rol--admin { background-color: #7a3b0c; color: #fff; }
.badge-rol--operador { background-color: #dfe6ee; color: #253546; }

.navbar-text .badge-rol { font-size: 10.5px; vertical-align: middle; }

/* Mismo motivo en los botones pequeños de la columna «Opciones». */
.btn-primary { background-color: var(--marca); border-color: var(--marca); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--marca-fuerte); border-color: var(--marca-fuerte); }
.btn-success { background-color: #15774a; border-color: #15774a; }
.btn-success:hover, .btn-success:focus { background-color: #10603c; border-color: #10603c; }
.btn-default, .btn-default:hover { color: #4a3a2e; }
.btn-default[disabled] { color: #6e5a4d; }

/* Objetivo táctil mínimo en los controles de la barra y la paginación. */
.navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; gap: 6px; }
.paginacion .btn { min-height: 38px; }
.btn { border-radius: 8px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn:active { transform: translateY(1px); }

/* ---------- Tarjetas de resumen ---------------------------------------- */
/* AdminLTE las pinta en colores saturados con texto blanco encima: sobre el
   amarillo eso da 1.9:1, ilegible. Se rehacen como fichas blancas con una
   franja de color, que además encajan con la sobriedad institucional. */
.small-box {
  position: relative;
  background: #fff !important;
  color: var(--gris-texto) !important;
  border: 1px solid #e4d9d0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(60, 35, 18, .07);
  margin-bottom: 16px;
  overflow: hidden;
}

/* La franja es decorativa: el dato lo da el número y su rótulo. */
.small-box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tono, var(--azul-sedes));
}

.small-box .inner { padding: 14px 16px 14px 20px; }

.small-box .inner h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: #22160f;
  font-variant-numeric: tabular-nums;
}

.small-box .inner p {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texto);
}

.small-box.bg-primary { --tono: #a8470e; }
.small-box.bg-success { --tono: #15774a; }
.small-box.bg-warning { --tono: #b57d05; }
.small-box.bg-info    { --tono: #8f4116; }

/* ---------- Tabla: legibilidad ------------------------------------------ */
.tabla-visual thead th { color: #4a3a2e; }
.tabla-visual tbody td { vertical-align: middle; }

/* ---------- Marca y menú ---------------------------------------------- */
.brand-link { display: flex; align-items: center; gap: 12px; padding: 14px 14px; }

/* El logotipo del SEDES es multicolor, con texto azul: sobre el marrón del
   menú no contrasta. Se le da una teja blanca, que es el recurso habitual
   para un logotipo de colores fijos sobre fondo oscuro: así se ve
   deliberado y el logotipo queda sobre la superficie para la que se diseñó. */
/* AdminLTE fija el logotipo en 29 px de alto con `.brand-link .brand-image`,
   y además lo flota y lo desplaza con márgenes negativos, pensando en un
   logotipo diminuto. Hay que igualar su especificidad para deshacerlo: con
   una sola clase la regla pierde. */
.main-sidebar .brand-link .brand-image {
  /* Grande a propósito: el logotipo lleva texto dentro («SEDES ORURO») y por
     debajo de unos 55 px se vuelve una manchita de color sin identidad. */
  width: 58px;
  height: auto;
  max-height: none;
  float: none;
  margin: 0;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.brand-text { font-size: 16px; font-weight: 700; line-height: 1.25; }

/* AdminLTE fija la altura de la barra de marca para un logotipo pequeño. */
.main-sidebar .brand-link { height: auto; }

/* Con el menú plegado el logotipo se ajusta al ancho disponible. */
.sidebar-collapse .main-sidebar .brand-link .brand-image { width: 44px; }

.sidebar-dark-primary { background-color: var(--cafe-menu); }
.nav-sidebar .nav-link { display: flex; align-items: center; gap: 10px; }
.nav-sidebar .nav-link p { margin: 0; }
/* AdminLTE marca la opción activa con su azul #007bff, que con texto blanco
   da 3.98:1. Se usa el azul institucional, que llega a 8.6:1. Hace falta
   subir la especificidad para ganarle a `.nav-pills .nav-link.active`. */
.sidebar .nav-sidebar.nav-pills .nav-link.active,
.sidebar .nav-sidebar .nav-link.active {
  background-color: var(--azul-sedes);
  color: #fff;
}

.icono { flex: 0 0 auto; vertical-align: -3px; }

/* Botón de menú dibujado con CSS, para no depender de una tipografía de iconos. */
.hamburguesa {
  display: block;
  width: 18px;
  height: 2px;
  background: #495057;
  position: relative;
}
.hamburguesa::before,
.hamburguesa::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #495057;
}
.hamburguesa::before { top: -6px; }
.hamburguesa::after  { top: 6px; }

/* AdminLTE deja el pie en un gris de 3.2:1: se oscurece para que se lea. */
.main-footer { color: #5c4a3f; border-top-color: #e4d9d0; }

.titulo-pagina { font-size: 20px; font-weight: 700; margin: 0; color: #22160f; }
.content-header { padding: 14px 0.5rem 6px; }

/* ---------- Filtros ---------------------------------------------------- */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
}

.filtros .form-group { margin-bottom: 0; }
.filtros label { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.filtros__buscar { grid-column: span 2; min-width: 0; }
.filtros__acciones { display: flex; align-items: flex-end; }

@media (max-width: 575px) {
  .filtros { grid-template-columns: 1fr; }
  .filtros__buscar { grid-column: auto; }
}

/* ---------- Tabla ------------------------------------------------------ */
/* Son 22 columnas: la tabla se desplaza en horizontal y la cabecera queda
   fija arriba mientras se recorre el listado. */
.tabla-visual { max-height: 62vh; overflow: auto; }

.tabla-visual table { font-size: 12.5px; margin-bottom: 0; }

.tabla-visual thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f2ee;
  border-bottom: 2px solid #e4d9d0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}

.celda-larga {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.celda-codigo {
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-weight: 600;
  white-space: nowrap;
}

/* La columna de opciones acompaña el desplazamiento horizontal. */
.celda-opciones,
#tabla-altas thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  white-space: nowrap;
  border-right: 2px solid #e4d9d0;
}

#tabla-altas thead th:first-child { z-index: 3; background: #f7f2ee; }
.table-hover tbody tr:hover .celda-opciones { background: #fdf6f0; }

.btn-xs { padding: 3px 9px; font-size: 11.5px; line-height: 1.5; border-radius: 6px; }

/* ---------- Paginación -------------------------------------------------- */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.paginacion__resumen { font-size: 13px; color: var(--gris-texto); }

/* ---------- Usuarios ---------------------------------------------------- */
/* Los botones de acción no se pegan entre sí: un «Eliminar» inmediatamente
   pegado a un «Desactivar» invita al error de pulsación. */
.celda-acciones .btn { margin-left: 6px; }
.celda-acciones form { margin: 0; }

.tabla-usuarios td, .tabla-usuarios th { vertical-align: middle; }

/* La tabla se desplaza en horizontal y las acciones son justo lo que el
   usuario viene a pulsar: la última columna queda fija a la derecha, igual
   que «Opciones» en la tabla de altas. */
.tabla-usuarios td:last-child,
.tabla-usuarios th:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fff;
  border-left: 2px solid #e4d9d0;
}

.tabla-usuarios th:last-child { z-index: 3; background: #f7f2ee; }
.table-hover .tabla-usuarios tbody tr:hover td:last-child,
.tabla-usuarios.table-hover tbody tr:hover td:last-child { background: #fdf6f0; }

/* Ámbar oscuro para la acción que revierte un estado: no es destructiva
   como «Eliminar», pero tampoco es de rutina. Texto oscuro sobre ámbar
   claro, que es lo que alcanza contraste a 11,5 px. */
.btn-warning {
  background-color: #ffd971;
  border-color: #e8bf4d;
  color: #4a3a05;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: #f5c93f;
  border-color: #d9ad2c;
  color: #4a3a05;
}

.btn-danger { background-color: #b3261e; border-color: #b3261e; }
.btn-danger:hover, .btn-danger:focus { background-color: #8f1e17; border-color: #8f1e17; }

/* La tarjeta de acciones irreversibles se distingue del resto. */
.card-peligro { border-top: 3px solid #b3261e; }
.card-peligro .card-title { color: #8f1e17; }

/* ---------- Páginas de acceso ------------------------------------------- */
.pagina-acceso {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #f7f2ee;
}

.caja-acceso { width: 100%; max-width: 430px; }
.caja-acceso--ancha { max-width: 620px; }

.acceso-marca { text-align: center; margin-bottom: 18px; }
.acceso-marca img { width: 120px; height: auto; }
.acceso-marca h1 { font-size: 21px; font-weight: 700; margin: 10px 0 2px; color: #22160f; }
.acceso-marca p { font-size: 12.5px; color: var(--gris-texto); margin: 0; text-transform: uppercase; letter-spacing: .06em; }

.caja-acceso .card {
  border-top: 3px solid var(--marca);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(60, 35, 18, .14);
}

.caja-acceso .card-body { padding: 22px; }

/* Mismo acabado que los botones de la parte pública: esquina suave,
   degradado de un paso y sombra en capas. */
.caja-acceso .btn-primary {
  background-image: linear-gradient(180deg, #ae4b0a 0%, #a8470e 100%);
  background-color: var(--marca);
  border-color: transparent;
  border-radius: 12px;
  min-height: 48px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(168, 71, 14, .24);
}

.caja-acceso .btn-primary:hover { background-image: linear-gradient(180deg, #a8470e 0%, #8f4116 100%); }

/* 16 px en los campos: por debajo de eso iOS hace zoom al enfocarlos. */
.caja-acceso .form-control { min-height: 46px; font-size: 16px; border-radius: 10px; }
.caja-acceso label { font-weight: 700; font-size: 13.5px; color: #22160f; }
.caja-acceso .form-text { font-size: 12.5px; }

.enlace-pie a { color: var(--marca); font-weight: 700; }

.enlace-pie { text-align: center; margin-top: 14px; font-size: 13px; }