/* ==========================================================================
   Base compartida por el panel y la aplicación del participante.
   Reinicio, tipografía, botones, formularios y avisos.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/*
   La aplicación del participante vive en serif (EB Garamond); el panel, en
   sans (Inter), porque sus tablas y formularios son densos. Por eso el cuerpo
   arranca en la fuente de interfaz y .app la cambia en app.css.
*/
body {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: var(--texto-base);
  line-height: var(--alto-normal);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
   Capitales romanas con tracking amplio: es el gesto que define la marca
   en las piezas de Laicos Carmelitas.
*/
h1, h2 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-semi);
  line-height: var(--alto-apretado);
  margin: 0 0 var(--e3);
  color: var(--marca-800);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--fuente-ui);
  font-weight: var(--peso-semi);
  line-height: var(--alto-apretado);
  margin: 0 0 var(--e3);
  color: var(--marca-800);
}

h1 { font-size: var(--texto-3xl); }
h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

/* Titular en versalitas, como los rótulos de las piezas. */
.titular {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--track-titulo);
  line-height: 1.16;
  color: var(--marca-700);
}

/* Acento manuscrito. */
.mano {
  font-family: var(--fuente-mano);
  font-weight: 400;
  color: var(--marca-500);
  line-height: 1.35;
}

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--marca-600);
  text-decoration-color: var(--marca-300);
  text-underline-offset: 3px;
}
a:hover { color: var(--marca-800); }

img, svg, video { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: var(--e8) 0;
}

small { font-size: var(--texto-sm); }

code, kbd, pre { font-family: var(--fuente-codigo); }

/* Foco visible y consistente: obligatorio para navegación por teclado. */
:focus-visible {
  outline: 3px solid var(--dorado-500);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido, primer elemento enfocable de cada página */
.saltar {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: var(--z-aviso);
  background: var(--marca-700);
  color: var(--texto-claro);
  padding: var(--e3) var(--e5);
  border-radius: var(--radio);
  transition: top var(--trans-rapida);
}
.saltar:focus { top: var(--e4); color: var(--texto-claro); }

/* -------------------------------------------------------------- BOTONES -- */

.btn {
  --btn-fondo: var(--marca-700);
  --btn-texto: var(--texto-claro);
  --btn-borde: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);

  font-family: var(--fuente-ui);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;

  padding: var(--e3) var(--e6);
  min-height: 48px;              /* área táctil cómoda en móvil */

  color: var(--btn-texto);
  background: var(--btn-fondo);
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--radio-full);

  cursor: pointer;
  transition: transform var(--trans-rapida), box-shadow var(--trans-rapida),
              background-color var(--trans-rapida), color var(--trans-rapida);
  box-shadow: var(--sombra-sm);
}

.btn:hover:not(:disabled) {
  color: var(--btn-texto);
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--sombra-sm); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--dorado    { --btn-fondo: var(--dorado-500); --btn-texto: var(--marca-900); }
.btn--claro     { --btn-fondo: var(--superficie); --btn-texto: var(--marca-700); --btn-borde: var(--borde-fuerte); }
.btn--fantasma  { --btn-fondo: transparent; --btn-texto: var(--marca-700); --btn-borde: var(--marca-300); box-shadow: none; }
.btn--peligro   { --btn-fondo: var(--error-600); --btn-texto: #fff; }
.btn--verde     { --btn-fondo: var(--verde-500); --btn-texto: #fff; }

.btn--bloque { display: flex; width: 100%; }
.btn--sm { min-height: 38px; padding: var(--e2) var(--e4); font-size: var(--texto-sm); }
.btn--lg { min-height: 56px; padding: var(--e4) var(--e10); font-size: var(--texto-lg); }

.btn .icono { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------- FORMULARIOS -- */

.campo { margin-bottom: var(--e5); }

.campo > label,
.etiqueta {
  display: block;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--marca-700);
  margin-bottom: var(--e2);
}

.campo .pista {
  display: block;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  margin-top: var(--e2);
  line-height: 1.45;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--texto-base);
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  min-height: 48px;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

textarea { min-height: 120px; line-height: var(--alto-normal); resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--marca-400);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--dorado-500);
  box-shadow: 0 0 0 3px var(--dorado-200);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--crema-300);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error-600);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B4E3D' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
  background-size: 12px;
  padding-right: var(--e10);
}

.error-campo {
  display: block;
  font-size: var(--texto-sm);
  color: var(--error-600);
  font-weight: var(--peso-medio);
  margin-top: var(--e2);
}

/* Casillas y opciones */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  cursor: pointer;
}
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 20px; height: 20px;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: var(--marca-600);
  flex: none;
  cursor: pointer;
}
.casilla span { font-size: var(--texto-sm); line-height: 1.45; }
.casilla strong { display: block; font-size: var(--texto-base); }

/* Grupo de opciones tipo tarjeta */
.opciones { display: grid; gap: var(--e3); }
.opcion {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e4);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida);
}
.opcion:hover { border-color: var(--marca-400); }
.opcion:has(input:checked) { border-color: var(--dorado-500); background: var(--dorado-200); }
.opcion input { margin-top: 3px; flex: none; width: 20px; height: 20px; min-height: 0; accent-color: var(--marca-600); }
.opcion strong { display: block; font-size: var(--texto-base); color: var(--marca-800); }
.opcion small { color: var(--texto-suave); line-height: 1.45; display: block; margin-top: 2px; }

/* Rejilla de campos */
.rejilla { display: grid; gap: var(--e4) var(--e5); }
@media (min-width: 640px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------- AVISOS -- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-radius: var(--radio-md);
  border-left: 4px solid;
  font-size: var(--texto-sm);
  line-height: 1.55;
  margin-bottom: var(--e5);
}
.aviso p { margin-bottom: var(--e2); }
.aviso strong { display: block; margin-bottom: 2px; font-size: var(--texto-base); }
.aviso .icono { width: 20px; height: 20px; flex: none; margin-top: 2px; }

.aviso--ok     { background: var(--exito-100); border-color: var(--exito-600); color: #24422A; }
.aviso--error  { background: var(--error-100); border-color: var(--error-600); color: #6E241B; }
.aviso--atencion { background: var(--aviso-100); border-color: var(--aviso-600); color: #6B4A10; }
.aviso--info   { background: var(--info-100); border-color: var(--info-600); color: #234657; }

/* -------------------------------------------------------------- ETIQUETAS */

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
  padding: 3px var(--e3);
  border-radius: var(--radio-full);
  white-space: nowrap;
}
.etiqueta-estado--activo   { background: var(--exito-100); color: var(--exito-600); }
.etiqueta-estado--borrador { background: var(--crema-400); color: var(--marca-700); }
.etiqueta-estado--cerrado  { background: var(--marca-200); color: var(--marca-700); }
.etiqueta-estado--aviso    { background: var(--aviso-100); color: var(--aviso-600); }
.etiqueta-estado--error    { background: var(--error-100); color: var(--error-600); }
.etiqueta-estado--info     { background: var(--info-100); color: var(--info-600); }

/* ---------------------------------------------------------------- CÓDIGO -- */

.codigo {
  font-family: var(--fuente-codigo);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--crema-300);
  color: var(--marca-800);
  padding: 2px var(--e2);
  border-radius: var(--radio-sm);
  font-size: 0.95em;
}

/* ------------------------------------------------------------- UTILIDADES */

.centro { text-align: center; }
.pila   { display: flex; flex-direction: column; }
.fila   { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.entre  { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.crece  { flex: 1 1 auto; min-width: 0; }
.suave  { color: var(--texto-suave); }
.tenue  { color: var(--texto-tenue); }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt4 { margin-top: var(--e4); } .mb4 { margin-bottom: var(--e4); }
.mt6 { margin-top: var(--e6); } .mb6 { margin-bottom: var(--e6); }
.mt8 { margin-top: var(--e8); } .mb8 { margin-bottom: var(--e8); }

.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
         stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icono--relleno { fill: currentColor; stroke: none; }