/* Estilos del panel. Paleta neutra y tipografía del sistema hasta que exista la identidad visual
   de Zignac (politica-marca). En el celular, sin desplazamiento horizontal desde 360 px y con
   objetivos táctiles de 44 × 44 px (UX 20). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f1f1f;
  background: #ffffff;
}

.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #d0d0d0;
}

.marca {
  font-weight: 700;
  font-size: 1.25rem;
}

.contenido {
  max-width: 40rem;
  padding: 1rem;
  margin: 0 auto;
}

.pie {
  max-width: 40rem;
  padding: 1rem;
  margin: 0 auto;
  border-top: 1px solid #d0d0d0;
}

a {
  color: #1a4f8b;
}

/* El foco se ve en todo lo que se usa con el teclado, igual en cada navegador (RNF-23). */
:focus-visible {
  outline: 3px solid #1a4f8b;
  outline-offset: 2px;
}

.campo {
  margin-bottom: 1rem;
}

.campo label {
  display: block;
  font-weight: 600;
}

.campo input:not([type="checkbox"], [type="radio"], [type="file"]),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  font: inherit;
  color: inherit;
  background: #ffffff;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
}

/* Safari ignora `min-height` en una lista con borde o fondo propios; respeta `height`. */
.campo select:not([multiple]) {
  height: 44px;
}

/* El botón para elegir un archivo también mide 44 px de alto (UX 20). */
.campo input[type="file"] {
  display: block;
  width: 100%;
  font: inherit;
}

.campo input[type="file"]::file-selector-button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  font: inherit;
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
  cursor: pointer;
}

.ayuda {
  margin: 0.25rem 0 0;
  color: #4a4a4a;
}

/* Lo que pasó al guardar (`panel/componentes/mensajes.html`). Un error tiene el borde más grueso y
   la letra en negritas, además del color y del texto que lo dice (RNF-23). */
.mensaje {
  padding: 0.75rem;
  margin: 0 0 1rem;
  border: 1px solid #1f1f1f;
  border-left-width: 4px;
  border-radius: 4px;
}

.mensaje-error {
  font-weight: 700;
  color: #a1260d;
  border-width: 2px;
  border-left-width: 4px;
  border-color: #a1260d;
}

/* El estado vacío de una lista (`panel/componentes/vacio.html`). */
.vacio {
  color: #4a4a4a;
}

/* Una tabla ancha se desplaza dentro de su caja, no la página (UX 20). */
.tabla {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d0d0d0;
}

.campo-casilla {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-height: 44px;
}

.campo-casilla input {
  width: 1.5rem;
  height: 1.5rem;
}

/* El error de una casilla va debajo de ella, como el de cualquier campo. */
.campo-casilla .error {
  flex-basis: 100%;
}

/* La etiqueta también marca la casilla: es el objetivo táctil de 44 px de alto. */
.campo-casilla label {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 44px;
}

.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Una lista de enlaces, como los catálogos de la empresa: cada uno mide 44 px de alto (UX 20). */
.enlaces {
  padding: 0;
  list-style: none;
}

.enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.error,
.errores {
  color: #a1260d;
}

.error p {
  margin: 0.25rem 0 0;
}

/* Un campo con error tiene el borde más grueso, además de su mensaje en texto (RNF-23). */
.campo :is(input, select, textarea)[aria-invalid="true"] {
  border-width: 2px;
  border-color: #a1260d;
}

.errores-titulo {
  margin: 0;
  font-weight: 700;
}

/* Cada enlace del resumen es un objetivo táctil de 44 px de alto (UX 20). */
.errores a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.errores {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #a1260d;
  border-radius: 4px;
}

/* Los botones (`panel/componentes/boton.html`) se distinguen también en escala de grises, por el
   relleno, el grosor del borde y el peso de la letra (RNF-23). */
.boton {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: inherit;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;
}

.boton-principal {
  font-weight: 600;
  color: #ffffff;
  background: #1f1f1f;
  border-width: 2px;
  border-color: #1f1f1f;
}

.boton-secundario {
  font-weight: 400;
  color: #1f1f1f;
  background: #ffffff;
  border-width: 1px;
  border-color: #6b6b6b;
}

.boton-peligro {
  font-weight: 700;
  color: #a1260d;
  background: #ffffff;
  border-width: 2px;
  border-color: #a1260d;
}

/* El diálogo de confirmación (`panel/componentes/dialogo.html`). Cabe en el celular de 360 px
   (UX 20), y el fondo de la página se oscurece mientras está abierto. */
.dialogo {
  width: min(32rem, calc(100vw - 2rem));
  max-width: none;
  padding: 1rem;
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #6b6b6b;
  border-radius: 4px;
}

.dialogo::backdrop {
  background: rgb(0 0 0 / 50%);
}

.dialogo h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.impacto {
  padding-left: 1.25rem;
}

.dialogo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}