/* ============================================================================
   ESTILOS GENERALES DEL PANEL — Layout, Header y Utilidades
   ============================================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--panel-fuente);
  font-size: var(--panel-texto-base);
  background-color: var(--panel-superficie);
  color: var(--panel-texto);
  min-height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Barra Superior ------------------------------------------------------ */

.panel-header {
  background-color: var(--panel-verde-700);
  border-bottom: 1px solid var(--panel-verde-900);
  padding: var(--panel-espacio-3) var(--panel-espacio-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--panel-sombra-barra);
}

.nav-marca {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-3);
  /* la marca lleva al dashboard; el cursor va acá y no inline porque `crearElemento`
     rechaza el atributo `style` a propósito (ver crearElemento.js) */
  cursor: pointer;
}

.nav-logo {
  height: 36px;
  width: auto;
  display: block;
}

.nav-titulo {
  font-size: var(--panel-texto-lg);
  font-weight: 700;
  display: block;
  color: var(--panel-texto);
}

.nav-subtitulo {
  font-size: var(--panel-texto-xs);
  color: var(--panel-texto-tenue);
  display: block;
}

.nav-usuario {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-4);
  font-size: var(--panel-texto-sm);
}

.usuario-nombre {
  font-weight: 600;
  color: var(--panel-texto);
}

.btn-link-salir {
  background: none;
  border: 1px solid var(--panel-error-linea);
  color: var(--panel-error-tinta);
  padding: 0.3rem 0.6rem;
  border-radius: var(--panel-radio);
  cursor: pointer;
  font: inherit;
  font-size: var(--panel-texto-xs);
  font-weight: 600;
  transition: all 0.15s ease;
}

.btn-link-salir:hover {
  background-color: var(--panel-error-fondo);
  color: var(--panel-texto);
}

.panel-cuerpo {
  flex: 1;
  padding: var(--panel-espacio-6) var(--panel-espacio-4);
  max-width: 1600px;
  width: 96%;
  margin: 0 auto;
}

/* --- Utilidades y Botones Generales ------------------------------------- */

/* `font: inherit` primero y el tamaño después: un <button> tampoco hereda la
   tipografía del body, igual que un <input>. Sin esto los botones salen con la
   fuente del sistema y desentonan con el resto del panel. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--panel-tactil-min);
  padding: 0 var(--panel-espacio-4);
  font: inherit;
  font-size: var(--panel-texto-base);
  font-weight: 600;
  border-radius: var(--panel-radio);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--panel-foco-anillo);
}

/* El naranja con texto blanco queda en ~3.2:1, por debajo del 4.5:1 de AA.
   Viene heredado del sitio público y NO se toca acá: es decisión de identidad
   de marca, no técnica (ver ESTILO.md). El botón tiene fondo propio, así que
   pasar el panel a oscuro no cambia ese número ni para mejor ni para peor. */
.btn-naranja {
  background-color: var(--panel-naranja);
  color: var(--panel-texto);
}

.btn-naranja:hover {
  background-color: var(--panel-naranja-claro);
  transform: translateY(-1px);
}

.btn-secundario {
  background-color: var(--panel-superficie-hundida);
  color: var(--panel-texto);
  border: 1px solid var(--panel-borde-control);
}

.btn-secundario:hover {
  background-color: var(--panel-superficie);
}

.btn-block {
  width: 100%;
}

.oculta { display: none !important; }
.visible { display: flex !important; }

.aviso-sin-permisos, .cargando, .vacio-aviso {
  padding: var(--panel-espacio-6);
  text-align: center;
  color: var(--panel-texto-tenue);
  font-size: var(--panel-texto-base);
}

/* --- Encabezado de sección -----------------------------------------------
   Lo usan las CUATRO secciones —remates, representantes, operaciones y
   liquidaciones—, así que vive acá y no en la hoja de un módulo.

   `.btn-volver-dash` estaba en `remates.css`, junto con una `.remates-header-bar`
   que también usaban las dos pantallas del Sistema Administrativo: dependían de
   una clase con nombre de otro módulo, en la hoja de otro módulo, y tocar
   remates rompía administración sin ninguna señal.

   TODO EL ENCABEZADO ES UNA SOLA FILA: el botón de volver y el título a la
   izquierda, el botón de alta a la derecha. Antes el volver ocupaba una fila
   entera para él solo, arriba del título — una franja desperdiciada en las seis
   pantallas donde aparece. */

.btn-volver-dash {
  background: none;
  border: 1px solid var(--panel-borde-control);
  color: var(--panel-texto);
  padding: 0.4rem 0.8rem;
  border-radius: var(--panel-radio);
  cursor: pointer;
  font: inherit;
  font-size: var(--panel-texto-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background-color 0.15s ease;
}

.btn-volver-dash:hover {
  background-color: var(--panel-superficie-elevada);
}

.btn-volver-dash:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--panel-foco-anillo);
}

.seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--panel-espacio-3) var(--panel-espacio-4);
  margin-bottom: var(--panel-espacio-6);
}

/* El volver y el título viajan juntos: si la fila se parte en pantalla angosta,
   se parte entre este grupo y el botón de alta, y no entre el volver y su
   título, que quedarían separados sin sentido. */
.seccion-header-izq {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-4);
  flex-wrap: wrap;
  min-width: 0;
}

.seccion-titulo {
  font-size: var(--panel-texto-xl);
  font-weight: 700;
  color: var(--panel-texto);
}

.seccion-header-acciones {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-3);
  flex-wrap: wrap;
}

/* `flex-shrink: 0` para que el botón de volver no se aplaste cuando el título
   es largo: es navegación, y un "← Vol…" cortado no sirve para nada. */
.seccion-header-izq .btn-volver-dash,
.dashboard-header-fila .btn-volver-dash {
  flex-shrink: 0;
}

/* --- Formularios ---------------------------------------------------------
   Los controles nativos NO heredan la tipografía del body: sin `font: inherit`
   un <input> se dibuja con la fuente del sistema en 13px y desentona con todo
   el resto del panel. Es la causa de que los campos "se vean mal" por defecto.

   El tamaño de fuente es var(--panel-texto-base) = 16px y no puede bajar: con
   menos de 16px iOS hace zoom solo al enfocar el campo (ver tokens.css). */

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--panel-espacio-1);
  margin-bottom: var(--panel-espacio-4);
  text-align: left;
}

/* Casilla de verificación con su texto al lado, dentro de un `.campo-grupo`.
 *
 * Va en `<label>` para que el texto también sea clickeable: una casilla suelta de 16px es un blanco
 * chico, y el panel se usa desde el celular.
 *
 * El `font-weight: 400` pisa el 600 que `.campo-grupo label` le da al rótulo del campo: acá el
 * `<label>` no es el título del grupo sino una opción, y en negrita compite con él. */
.campo-casilla {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-2);
  font-weight: 400;
  font-size: var(--panel-texto-sm);
  color: var(--panel-texto);
  cursor: pointer;
  padding: var(--panel-espacio-1) 0;
}

.campo-casilla input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--panel-naranja);
  cursor: pointer;
}

.campo-grupo label {
  font-size: var(--panel-texto-sm);
  font-weight: 600;
  color: var(--panel-texto);
}

/* El campo va sobre la superficie HUNDIDA: dentro de un modal, que es
   superficie elevada, es lo que lo hace leerse como un hueco donde escribir y
   no como otro bloque más. Sobre fondo oscuro, sin ese escalón, un input se
   confunde con la tarjeta que lo contiene. */
.campo-input {
  font: inherit;
  font-size: var(--panel-texto-base);
  width: 100%;
  min-height: var(--panel-tactil-min);
  padding: 0 var(--panel-espacio-3);
  color: var(--panel-texto);
  background-color: var(--panel-superficie-hundida);
  border: 1px solid var(--panel-borde-control);
  border-radius: var(--panel-radio);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-input::placeholder {
  color: var(--panel-texto-tenue);
}

.campo-input:focus {
  outline: none;
  border-color: var(--panel-verde-600);
  /* anillo en vez de outline del navegador: se ve igual en los 3 navegadores */
  box-shadow: 0 0 0 3px var(--panel-foco-anillo);
}

.campo-input:disabled {
  background-color: var(--panel-superficie);
  color: var(--panel-texto-tenue);
  cursor: not-allowed;
}

/* Chrome dibuja el desplegable de un <select> con los colores del sistema si
   no se le dice otra cosa: sin esto, sobre el tema oscuro sale texto claro
   sobre fondo claro en la lista desplegada. */
select.campo-input option {
  background-color: var(--panel-superficie-hundida);
  color: var(--panel-texto);
}

select.campo-input {
  cursor: pointer;
}

.campo-textarea {
  /* el textarea no puede centrar su texto verticalmente como un input de una
     línea: necesita padding arriba y crecer, no quedarse en 44px */
  min-height: 5.5rem;
  padding: var(--panel-espacio-3);
  line-height: 1.5;
  resize: vertical;
}

/* Dos campos por fila en escritorio. Mobile first: por defecto va uno debajo
   del otro y recién en pantalla ancha se parten en dos columnas. */
.campo-filadoble {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--panel-espacio-4);
}

@media (min-width: 640px) {
  .campo-filadoble {
    grid-template-columns: 1fr 1fr;
  }
}

.modal-form {
  display: flex;
  flex-direction: column;
}

/* --- Mensajes de error ---------------------------------------------------
   `.visible` fuerza `display: flex !important`, así que estas reglas no
   declaran display: lo pone la utilidad al mostrarlas. */

.form-error, .modal-error, .error-aviso {
  background-color: var(--panel-error-fondo);
  color: var(--panel-error-tinta);
  border: 1px solid var(--panel-error-linea);
  padding: var(--panel-espacio-3);
  border-radius: var(--panel-radio);
  font-size: var(--panel-texto-sm);
  font-weight: 600;
  align-items: center;
  gap: var(--panel-espacio-2);
  text-align: left;
}

.form-error, .modal-error {
  margin-bottom: var(--panel-espacio-4);
}

/* Este no se alterna con `.oculta`/`.visible`: se crea ya visible dentro de la
   lista cuando falla la carga, así que necesita su propio display. */
.error-aviso {
  display: block;
  margin: var(--panel-espacio-4);
}

/* --- Modales ------------------------------------------------------------- */

.modal-superposicion {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--panel-velo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--panel-espacio-4);
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-contenido {
  background-color: var(--panel-superficie-elevada);
  color: var(--panel-texto);
  width: 100%;
  max-width: 550px;
  border: 1px solid var(--panel-borde-control);
  border-radius: 12px;
  padding: var(--panel-espacio-6);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--panel-sombra-modal);
  animation: fadeIn 0.2s ease-out;
}

/* El título iba en verde-800, que ahora ES el fondo: sobre la superficie
   elevada del modal quedaría un título invisible. */
.modal-titulo {
  font-size: var(--panel-texto-lg);
  margin-bottom: var(--panel-espacio-4);
  color: var(--panel-texto);
}

.modal-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--panel-espacio-3);
  margin-top: var(--panel-espacio-4);
}