/* ============================================================
   components.css — Botones, tablas, formularios, modales,
   badges, semáforos, toasts, tarjetas, pestañas.
   ============================================================ */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--primario-texto);
}
.btn-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }

.btn-peligro { color: var(--peligro); border-color: var(--peligro); background: transparent; }
.btn-peligro:hover { background: var(--peligro-suave); }

.btn-icono {
  padding: .35rem .55rem;
  font-size: var(--fs-md);
  line-height: 1;
}
.btn-s { padding: .22rem .55rem; font-size: var(--fs-xs); }

.barra-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.barra-acciones .separador { flex: 1; }

/* ---------- Selects e inputs ---------- */
.select, .input, textarea.input {
  padding: .42rem .6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--fs-sm);
  max-width: 100%;
}
textarea.input { resize: vertical; min-height: 4.5em; }
.select:focus, .input:focus { border-color: var(--primario); }

.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; }
.campo > label { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-2); }
.campo .ayuda { font-size: var(--fs-xs); color: var(--texto-2); }
.campo.invalido .input, .campo.invalido .select { border-color: var(--peligro); }
.campo .error-campo { font-size: var(--fs-xs); color: var(--peligro); }

.form-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  column-gap: 1rem;
}
.form-grilla .campo-ancho { grid-column: 1 / -1; }

fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  margin: 0 0 1rem;
  padding: .75rem 1rem;
}
legend { font-size: var(--fs-sm); font-weight: 700; color: var(--texto-2); padding: 0 .35rem; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}
.tarjeta-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.tarjeta-titulo h2, .tarjeta-titulo h3 { margin: 0; flex: 1; }

.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* ---------- Tablas ---------- */
.tabla-envoltura {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.tabla th, .tabla td {
  padding: .5rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.tabla thead th {
  background: var(--superficie-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--trazo-mayus);
  color: var(--texto-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla .celda-acciones { white-space: nowrap; text-align: right; }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--texto); }
.tabla-vacia { padding: 2rem; text-align: center; color: var(--texto-2); }

/* ---------- Badges y semáforos ---------- */
.badge {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-neutro { background: var(--neutro-suave); color: var(--texto); }
.badge-ok { background: var(--ok-suave); color: var(--ok); }
.badge-alerta { background: var(--alerta-suave); color: var(--alerta); }
.badge-peligro { background: var(--peligro-suave); color: var(--peligro); }
.badge-primario { background: var(--primario-suave); color: var(--primario); }

.semaforo {
  display: inline-block;
  width: .8em; height: .8em;
  border-radius: 50%;
  margin-right: .35em;
  vertical-align: baseline;
}
.semaforo-verde { background: var(--ok); }
.semaforo-amarillo { background: var(--alerta); }
.semaforo-rojo { background: var(--peligro); }

.chip {
  display: inline-block;
  padding: .1rem .5rem;
  margin: .1rem .15rem .1rem 0;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: var(--fs-xs);
  background: var(--superficie-2);
}

/* ---------- Pestañas ---------- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  border-bottom: 2px solid var(--borde);
  margin-bottom: 1rem;
}
.pestana {
  padding: .5rem .9rem;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { color: var(--primario); border-bottom-color: var(--primario); }

/* ---------- Modales ---------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 15, 25, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 1.5rem;
  overflow-y: auto;
}
.modal {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  width: 100%;
  max-width: 680px;
  border: 1px solid var(--borde);
}
.modal-ancho { max-width: 960px; }
.modal-cabecera {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--borde);
}
.modal-cabecera h2 { margin: 0; flex: 1; font-size: var(--fs-md); }
.modal-cuerpo { padding: 1.15rem; }
.modal-pie {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--borde);
}

/* ---------- Toasts ---------- */
#capa-toasts {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(360px, calc(100vw - 2rem));
}
.toast {
  padding: .7rem 1rem;
  border-radius: var(--radio-s);
  background: var(--texto);
  color: var(--bg);
  font-size: var(--fs-sm);
  box-shadow: var(--sombra-alta);
  animation: toast-entra .25s ease;
}
.toast-ok { background: var(--ok); color: #fff; }
.toast-error { background: var(--peligro); color: #fff; }
:root[data-theme="oscuro"] .toast-ok,
:root[data-theme="oscuro"] .toast-error { color: #0f1520; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pantalla de acceso ---------- */

.acceso-fondo {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg);
}

.acceso-tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 1.75rem;
}

.acceso-marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}
.acceso-marca .acceso-icono { font-size: 2rem; color: var(--primario); line-height: 1; }
.acceso-marca h1 { margin: 0; font-size: var(--fs-lg); }
.acceso-marca p { font-size: var(--fs-xs); }

.acceso-error {
  margin: .4rem 0 0;
  font-size: var(--fs-sm);
  color: var(--peligro);
  min-height: 1.2em;
}

.acceso-tarjeta .input { width: 100%; }

/* ---------- Estados vacíos y utilidades ---------- */
.estado-vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--texto-2);
}
.estado-vacio .icono { font-size: 2rem; display: block; margin-bottom: .5rem; }

.meta-doc {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: var(--fs-xs);
  color: var(--texto-2);
  margin-top: .35rem;
}
.texto-2 { color: var(--texto-2); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }
.derecha { text-align: right; }
.centro { text-align: center; }
.sin-margen { margin: 0; }

/* ---------- Reglas de contraseña ---------- */
/* La lista se rellena mientras se escribe; los motivos vienen de
   `evaluarPassword`, la misma función que valida al guardar. */
.reglas-password { list-style: none; margin: .3rem 0 0; padding: 0; }
.reglas-password li { font-size: var(--fs-xs); line-height: 1.45; }
.reglas-password .regla-ok { color: var(--ok); font-weight: 600; }
.reglas-password .regla-falla { color: var(--peligro); }

/* Aviso destacado de un modal que no se puede saltar (contraseña vencida). */
.aviso-fuerte {
  margin: 0 0 .8rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--peligro);
  background: var(--peligro-suave);
  border-radius: var(--radio-s, 6px);
  font-size: var(--fs-s, .88rem);
}

/* ---------- Consola del operador ---------- */
/* Pantalla propia de los perfiles administrativos. Deliberadamente sin
   sidebar de módulos: aquí no se opera ningún sistema de gestión. */
#consola-operador { min-height: 100vh; background: var(--bg); }

.consola-topbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  position: sticky; top: 0; z-index: 5;
}
.consola-marca { display: flex; align-items: center; gap: .6rem; }
.consola-marca strong { display: block; font-size: .95rem; line-height: 1.2; }
.consola-marca small { display: block; font-size: .72rem; }

.consola-cuerpo {
  max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.consola-cuerpo > .tarjeta { margin-bottom: 0; }

.consola-dato { margin-bottom: 0; }
.consola-cifra { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.consola-cifra.ok { color: var(--ok); }
.consola-cifra.peligro { color: var(--peligro); }
.consola-cifra.alerta { color: var(--alerta); }

.consola-caja { max-width: 520px; margin: 3rem auto; padding: 1.2rem; }