/* Estilos del sitio público, con los colores y letras del brandboard de Placages. Primero el celular (375 px).
   Las letras se sirven desde el propio sitio (fuentes/, licencia OFL): nada externo. Modo claro y oscuro según el
   celular o computador de quien visita. */

@font-face {
  font-family: "Poppins";
  src: url("/fuentes/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fuentes/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fuentes/poppins-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
/* Cormorant es variable: un solo archivo trae todos los gruesos. La cursiva solo se descarga si una página la usa. */
@font-face {
  font-family: "Cormorant";
  src: url("/fuentes/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("/fuentes/cormorant-cursiva.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Paleta del brandboard */
  --azul-cielo: #101d40;
  --azul-noche: #0b1727;
  --aguamarina: #048c8c;
  --azul-vibrante: #71e5f4;
  --amarillo: #fbbf2a;
  --verde: #2bf966;

  /* Modo claro. Cada pareja de texto y fondo cumple AA (4,5:1 o más). */
  --tinta: var(--azul-cielo);
  --tinta-suave: #4a5878;
  --fondo: #f4f7fb;
  --tarjeta: #ffffff;
  --linea: #d3dbe7;
  --borde-campo: #5b6b8c;
  --campo: #ffffff;
  --acento: #036b6b;
  --acento-claro: #e2f3f3;
  --foco: #036b6b;
  --aviso: #fff3d1;
  --aviso-borde: #c98a00;
  --error: #b42318;
  --boton: var(--amarillo);
  --boton-hover: #f0a800;
  --boton-texto: var(--azul-cielo);
  --apagado: #cdd3de;
  --apagado-texto: #4a5878;
  /* Colores de estado en las tarjetas del panel (borde y punto; el estado siempre va escrito). */
  --tono-bien: #12a150;
  --tono-espera: #e0a100;
  --tono-mal: #d93036;
  --tono-cuidado: #e8590c;
  --tono-neutro: #8a94a8;

  --letra-titulos: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --letra-texto: "Cormorant", Georgia, "Times New Roman", serif;
  --radio: 16px;
  --radio-control: 12px;
  --alto-toque: 44px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eef3fb;
    --tinta-suave: #aebbd6;
    --fondo: var(--azul-noche);
    --tarjeta: var(--azul-cielo);
    --linea: #24345e;
    --borde-campo: #7f8fb3;
    --campo: var(--azul-noche);
    --acento: var(--azul-vibrante);
    --acento-claro: #0c2a36;
    --foco: var(--azul-vibrante);
    --aviso: #2e2610;
    --aviso-borde: var(--amarillo);
    --error: #ff9b8f;
    --apagado: #2a3550;
    --apagado-texto: #aebbd6;
    --tono-bien: var(--verde);
    --tono-espera: var(--amarillo);
    --tono-mal: #ff6b6b;
    --tono-cuidado: #ff922b;
    --tono-neutro: #6b7894;
  }
}

/* El ajuste del tamaño de letra va en cada elemento, no heredado: si se heredara, un elemento en Poppins dentro de
   texto en Cormorant tomaría la medida de Cormorant y se vería más pequeño. */
*, *::before, *::after { box-sizing: border-box; font-size-adjust: from-font; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--acento); }

/* En páginas cortas el pie queda abajo de la pantalla, no a media altura con blanco debajo. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

::selection { background: var(--amarillo); color: var(--azul-cielo); }

[hidden] { display: none !important; }

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

/* Todo lo que es interfaz (títulos, menú, botones, campos, ayudas) va en Poppins; el texto corrido, en Cormorant. */
h1, h2, h3, legend, label, summary, button, input, select, textarea, figcaption, dl.datos,
.boton, .cabecera, .pie, .ayuda, .estado, .error, .precios, .total, .menu-panel, .saltar {
  font-family: var(--letra-titulos);
}

h1, h2, h3 { font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 1.6em 0 0.5em; text-wrap: balance; }
h1 { font-size: 2rem; margin-top: 0.8em; line-height: 1.12; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 700; }

a { color: var(--acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 4px;
}

.envoltura { max-width: 46rem; margin: 0 auto; padding: 0 16px; }

.saltar {
  position: absolute;
  left: 8px;
  top: -64px;
  background: var(--amarillo);
  color: var(--azul-cielo);
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 10;
}
.saltar:focus { top: 8px; }

/* Cabecera: siempre en azul, con el logo amarillo y verde del brandboard. */
.cabecera { background: var(--azul-cielo); color: #ffffff; }
.cabecera .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 10px; padding-bottom: 6px; }
.marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  text-decoration: none;
}
.marca img { display: block; width: 146px; height: auto; }
.cabecera nav ul { display: flex; flex-wrap: wrap; gap: 0 2px; list-style: none; margin: 0 0 0 -10px; padding: 0; }
.cabecera nav li { margin: 0; }
.cabecera nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-toque);
  padding: 0 10px;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}
.cabecera nav a:hover { color: var(--amarillo); text-decoration: underline; text-underline-offset: 6px; }
.cabecera :focus-visible { outline-color: var(--amarillo); }

/* Contenido */
main { flex: 1 0 auto; padding-bottom: 40px; }

/* Portada del inicio: sigue el azul de la cabecera y lleva la sonrisa del logo como único adorno. */
.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--azul-cielo);
  color: #ffffff;
  padding: 20px 0 112px;
  margin-bottom: 8px;
}
.portada::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 20px;
  bottom: 18px;
  width: 76px;
  aspect-ratio: 101 / 107;
  background: url("/img/sonrisa.svg") no-repeat center / contain;
}
.portada h1 { font-size: 2.25rem; margin-top: 0.4em; color: #ffffff; }
.portada .destacado { font-size: 1.45rem; line-height: 1.45; color: #c8d4ee; max-width: 34em; }
.portada :focus-visible { outline-color: var(--amarillo); outline-offset: 3px; }
.portada .boton.secundario { background: transparent; border-color: #ffffff; color: #ffffff; }
.portada .boton.secundario:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.portada .nota { background: rgba(4, 140, 140, 0.22); border-left-color: var(--verde); color: #ffffff; max-width: 34em; }

.nota {
  background: var(--acento-claro);
  border-left: 4px solid var(--aguamarina);
  padding: 12px 16px;
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  margin: 1.2em 0;
}
.nota.cuidado { background: var(--aviso); border-left-color: var(--aviso-borde); }
.nota > :last-child { margin-bottom: 0; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px;
  margin: 0 0 16px;
}
.tarjeta h2, .tarjeta h3 { margin-top: 0; }
.tarjeta > :last-child { margin-bottom: 0; }

.beneficios { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.beneficios li { margin: 0; }
.beneficios h3 { font-size: 1.2rem; }

/* Los pasos sí son una secuencia: van numerados, en el amarillo de la marca. */
.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 52px;
  margin-bottom: 1.1em;
  min-height: 38px;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--azul-cielo);
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

figure { margin: 1.2em 0; }
figure img { display: block; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
figcaption { font-size: 0.875rem; color: var(--tinta-suave); margin-top: 6px; }

/* Botones: el principal en amarillo con letra azul, como el logo; el secundario solo con borde. */
.boton, button.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-toque);
  padding: 10px 22px;
  border: 2px solid var(--boton);
  border-radius: var(--radio-control);
  background: var(--boton);
  color: var(--boton-texto);
  font-family: var(--letra-titulos);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.boton:hover { background: var(--boton-hover); border-color: var(--boton-hover); color: var(--boton-texto); }
.boton.secundario { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton.secundario:hover { background: var(--acento-claro); color: var(--tinta); }
.boton[aria-disabled="true"] { background: var(--apagado); border-color: var(--apagado); color: var(--apagado-texto); cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; }

/* Precios: cada periodo es una ficha con el valor grande. */
.precios { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.precios li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--amarillo);
  border-radius: var(--radio-control);
  padding: 14px 18px;
  margin: 0;
}
.precio-dias { font-weight: 500; }
.precio-valor { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }

.estado { color: var(--tinta-suave); font-size: 1rem; }
.error { color: var(--error); font-weight: 600; font-size: 1rem; }

/* Formulario de compra */
form fieldset { border: 0; padding: 0; margin: 0 0 1.2em; }
form legend, form label.titulo { font-size: 1rem; font-weight: 600; padding: 0; margin-bottom: 8px; display: block; }
label.titulo { font-size: 1rem; font-weight: 600; display: block; margin-bottom: 8px; }
input[type="text"] {
  display: block;
  width: 100%;
  min-height: var(--alto-toque);
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--campo);
  border: 2px solid var(--borde-campo);
  border-radius: var(--radio-control);
}
::placeholder { color: var(--tinta-suave); opacity: 1; }
.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--alto-toque);
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--tarjeta);
  border: 2px solid var(--linea);
  border-radius: var(--radio-control);
  font-size: 1rem;
  cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.opcion input { width: 22px; height: 22px; flex: none; accent-color: var(--acento); }
.ayuda { font-size: 0.9rem; line-height: 1.55; color: var(--tinta-suave); margin: 6px 0 0; }
.ayuda.error { color: var(--error); }

/* Preguntas frecuentes */
details {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
  margin-bottom: 10px;
}
summary { min-height: var(--alto-toque); padding: 12px 16px; font-size: 1rem; font-weight: 500; cursor: pointer; }
summary::marker { color: var(--aguamarina); }
details[open] summary { border-bottom: 1px solid var(--linea); margin-bottom: 12px; }
details > :not(summary) { padding: 0 16px; }
details > p:last-child { padding-bottom: 4px; }
/* Los datos de un APK dentro de un desplegable: la huella y la lista no heredan el margen lateral del resto. */
details > dl.datos, details > .huella { margin: 0 16px 16px; }

.huella {
  display: block;
  padding: 10px 12px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 8px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  word-break: break-all;
}

/* La columna de títulos no pasa de la mitad: así un título largo se parte en líneas y no aprieta el dato. */
dl.datos { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 6px 16px; margin: 0 0 1em; font-size: 1rem; }
dl.datos dt { font-weight: 600; }
dl.datos dd { margin: 0; }

/* Textos legales (markdown ya convertido a HTML) */
.texto { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 4px 18px 14px; margin: 16px 0; }
.texto h1 { margin-top: 0.8em; }
.texto h2 { margin-top: 1.3em; font-size: 1.3rem; }

/* Pie: azul noche en los dos modos; en oscuro lo separa una línea. */
.pie { background: #0b1727; color: #dce4f2; padding: 28px 0 32px; margin-top: 24px; font-size: 0.875rem; line-height: 1.6; border-top: 4px solid var(--amarillo); }
.pie a { color: var(--azul-vibrante); }
.pie ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.pie li { margin: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: var(--alto-toque); padding: 0 12px 0 0; }
.pie .aviso { color: #ffffff; }
/* El foco general casi no se ve sobre el fondo oscuro del pie: aquí va el amarillo (más de 3:1). */
.pie :focus-visible { outline: 3px solid #fbbf2a; }

@media (min-width: 40rem) {
  body { font-size: 1.375rem; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.85rem; }
  h3 { font-size: 1.25rem; }
  .cabecera .envoltura { flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; }
  .cabecera nav ul { margin: 0 -10px 0 0; }
  /* Aquí la sonrisa todavía cae debajo de la columna de texto: el espacio de abajo la deja libre. */
  .portada { padding: 40px 0 120px; }
  .portada h1 { font-size: 3.1rem; }
  .portada::after { width: 80px; right: 28px; bottom: 22px; }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .precios { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .precios li { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 64rem) {
  .portada { padding: 56px 0 72px; }
  .portada h1 { font-size: 3.4rem; }
  /* En pantallas anchas la sonrisa queda grande, en el margen derecho, fuera de la columna de texto. */
  .portada::after { width: 12rem; right: max(24px, calc((100% - 46rem) / 2 - 15rem)); bottom: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .boton, .opcion { transition: background-color 0.15s, border-color 0.15s; }
}

/* Al imprimir (por ejemplo, los términos): sin menú ni botones, letra oscura sobre blanco. */
@media print {
  .saltar, .cabecera nav, .acciones, .portada::after { display: none; }
  body, .portada, .tarjeta, .texto, .pie { background: #ffffff; color: #000000; }
  .portada h1, .portada .destacado, .pie .aviso { color: #000000; }
  .cabecera { background: #101d40; print-color-adjust: exact; }
  .pie { border-top: 1px solid #000000; }
  a, .pie a { color: #000000; }
}

@media (forced-colors: active) {
  .pasos li::before { border: 2px solid CanvasText; }
  .precios li { border-top-width: 1px; }
}

.tarjeta img { display: block; margin-top: 14px; border-radius: 10px; }

/* Panel de licencias */
.panel textarea, .panel select, .panel input[type="number"], .panel input[type="email"], .panel input[type="month"] {
  display: block;
  width: 100%;
  min-height: var(--alto-toque);
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--campo);
  border: 2px solid var(--borde-campo);
  border-radius: var(--radio-control);
}
.panel textarea { resize: vertical; }
.panel .campo { margin: 0 0 1.2em; }
.panel section { margin-top: 8px; }
.panel button:disabled { background: var(--apagado); border-color: var(--apagado); color: var(--apagado-texto); cursor: not-allowed; }
.panel > section > h2:first-child { margin-top: 0.8em; }
.panel .campo:has(> input[type="month"]) { max-width: 18rem; }

/* Menú del panel: en el celular, una fila de pestañas que se desliza de lado; en el computador, una columna fija. */
.menu-panel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  list-style: none;
  margin: 4px -16px 8px;
  padding: 4px 16px 10px;
  scroll-padding-inline: 16px;
  scrollbar-width: thin;
}
.menu-panel li { margin: 0; flex: none; }
.menu-panel .boton { min-height: 40px; padding: 6px 16px; }
.menu-panel button[aria-current="page"] { background: var(--boton); border-color: var(--boton); color: var(--boton-texto); }

/* Cifras y filtros arriba de cada lista */
.cifras { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 4px 0 14px; padding: 0; font-family: var(--letra-titulos); }
.cifras li { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.cifras strong { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; }
.cifras span { color: var(--tinta-suave); font-size: 0.9rem; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 0 0 16px; font-family: var(--letra-titulos); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--borde-campo);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--boton); border-color: var(--boton); color: var(--boton-texto); font-weight: 600; }
.buscar { display: grid; gap: 4px; flex: 1 1 14rem; max-width: 22rem; font-size: 0.85rem; font-weight: 600; }
.buscar input {
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--campo);
  border: 2px solid var(--borde-campo);
  border-radius: var(--radio-control);
}

/* Tarjetas chicas: varias por fila. La que se abre ocupa toda la fila y muestra el resto de datos y los botones. */
.lista-panel {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  align-items: start;
  gap: 10px;
  margin: 0 0 1em;
  padding: 0;
}
.lista-panel > li { margin: 0; min-width: 0; }
.lista-panel > li:has(> .ficha[open]) { grid-column: 1 / -1; }
.ficha {
  margin: 0;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--tono, var(--linea));
  border-radius: var(--radio-control);
}
.ficha[data-tono="bien"] { --tono: var(--tono-bien); }
.ficha[data-tono="espera"] { --tono: var(--tono-espera); }
.ficha[data-tono="mal"] { --tono: var(--tono-mal); }
.ficha[data-tono="cuidado"] { --tono: var(--tono-cuidado); }
.ficha[data-tono="neutro"] { --tono: var(--tono-neutro); }
.ficha > summary {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 30px 10px 12px;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
}
.ficha > summary::-webkit-details-marker { display: none; }
/* Flecha que indica que la tarjeta se abre; gira al abrirla. */
.ficha > summary::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg);
}
.ficha[open] > summary::after { top: 18px; transform: rotate(-135deg); }
.ficha[open] > summary { margin: 0; border-bottom: 1px solid var(--linea); }
.ficha-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-suave); font-size: 0.78rem; font-weight: 600; }
.ficha-estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tono, var(--tinta-suave)); }
.ficha-valor { font-size: 1.15rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ficha-titulo { font-weight: 600; line-height: 1.3; }
.ficha-linea { color: var(--tinta-suave); font-size: 0.85rem; overflow-wrap: anywhere; }
.ficha-detalle { padding: 12px 12px 14px; }
.ficha-detalle > :last-child { margin-bottom: 0; }
.ficha-detalle .acciones { margin: 12px 0 4px; }
.ficha-detalle .opcion { max-width: 22rem; }
.ficha-detalle .campo-fila { max-width: 12rem; margin: 4px 0 12px; }

/* Usuarios: «Agregar un usuario» es un botón en la línea del título; al abrirlo, el formulario ocupa todo el ancho
   encima de la lista, con los campos uno al lado del otro. Así no quedan columnas a medio llenar. */
.usuarios-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.usuarios-cuerpo > :not(h3, .agregar) { grid-column: 1 / -1; }
.usuarios-cuerpo > h3 { margin: 0.6em 0; }
/* Las tarjetas de usuario llevan el correo: más anchas, para que no se corte. */
#usuarios-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.agregar { margin: 0; background: none; border: 0; }
.agregar > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--alto-toque);
  padding: 8px 18px;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-control);
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
}
.agregar > summary::-webkit-details-marker { display: none; }
.agregar > summary::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.agregar[open] {
  grid-column: 1 / -1;
  margin: 12px 0 4px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.agregar[open] > summary { display: flex; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; margin: 0; }
.agregar[open] > summary::before { content: "−"; }
.agregar-cuerpo { display: grid; gap: 4px; padding: 16px; }
.agregar-cuerpo > .nota { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.45; }
.agregar-cuerpo .campo { margin: 0 0 1em; }
#form-usuario .acciones, #form-usuario .estado { grid-column: 1 / -1; margin-top: 0; }
#form-usuario .acciones { margin-bottom: 4px; }
#form-usuario .estado { margin-bottom: 0; }
/* Abierto, el recuadro va primero y el título de la lista queda justo encima de las tarjetas. */
.agregar[open] { grid-row: 1; }
.usuarios-cuerpo:has(> .agregar[open]) > h3 { grid-row: 2; }

@media (min-width: 40rem) {
  /* Dos usuarios por fila; en el celular, uno, para que el correo no se corte. */
  #usuarios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #form-usuario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
}

@media (min-width: 64rem) {
  /* Los pasos para agregar y para quitar quedan lado a lado; los cuatro campos, en una sola fila. */
  .agregar-cuerpo > .nota { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 32px; }
  .agregar-cuerpo > .nota > ol { margin-bottom: 0; }
  #form-usuario { grid-template-columns: 1fr 1.4fr 0.9fr 0.9fr; }
}

#resumen-contenido, #precios-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin-bottom: 1em; }
#resumen-contenido > .tarjeta, #precios-filas > .fila-precio { margin: 0; }
#resumen-contenido > p { grid-column: 1 / -1; }

@media (min-width: 64rem) {
  /* El panel es una herramienta: usa más ancho que las páginas de lectura, y la cabecera y el pie lo acompañan. */
  body:has(.panel) .cabecera .envoltura, body:has(.panel) .pie .envoltura { max-width: 76rem; }
  .envoltura.panel { max-width: 76rem; display: grid; grid-template-columns: 12rem minmax(0, 1fr); align-items: start; column-gap: 40px; }
  .panel > h1, .panel > #panel-estado { grid-column: 1 / -1; }
  .panel > #panel-menu { grid-column: 1; grid-row: 3; position: sticky; top: 16px; }
  .panel > section { grid-column: 2; grid-row: 3; margin-top: 0; }
  .panel > section > h2:first-child { margin-top: 0; }
  .menu-panel { flex-direction: column; overflow: visible; margin: 0; padding: 0; }
  .menu-panel .boton { width: 100%; justify-content: flex-start; }
  #form-emitir, #emitir-resultado, #sec-precios > p { max-width: 40rem; }
  .lista-panel { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
.fila-precio { display: grid; gap: 8px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-control); padding: 14px; margin-bottom: 12px; }
.campo-fila { display: block; font-family: var(--letra-titulos); font-size: 1rem; font-weight: 600; }
.campo-fila span { display: block; margin-bottom: 4px; }
.panel input[type="checkbox"], .panel input[type="radio"] { width: 22px; height: 22px; flex: none; accent-color: var(--acento); }
.detalle { display: block; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; }
/* Solo se corta dentro de una palabra si no cabe entera (las referencias largas de los pedidos). */
.panel dl.datos dd { overflow-wrap: anywhere; }
.lista-panel > li > strong { display: block; margin-bottom: 6px; font-family: var(--letra-titulos); font-size: 1.1rem; font-weight: 600; }

/* Compra en línea, pedido y recuperar */
.total { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.8em; }
.campo-texto { margin: 0 0 1.2em; }
#pedido-ref { overflow-wrap: anywhere; word-break: break-all; font-size: 1rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 6px; padding: 2px 6px; }