/* Fintatus · base de diseño (estilo B, «Inscripción»)
 *
 * Sobriedad: tinta sobre piedra, un único acento y las cifras por encima de la
 * decoración. Cinzel solo en titulares; Inter con cifras de ancho fijo para todo
 * lo demás. Las fuentes se sirven desde este servidor (sin terceros).
 * Sin estilos en línea: la política de contenido (CSP) solo admite esta hoja.
 */

/* ---------------------------------------------------------------- Fuentes */

@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap;
  src: url("fuentes/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap;
  src: url("fuentes/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("fuentes/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("fuentes/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("fuentes/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap;
  src: url("fuentes/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- Tokens */

:root {
  --piedra: #F4F3EF;      /* fondo */
  --marmol: #FFFFFF;      /* superficies */
  --veta: #FAF9F6;        /* superficie secundaria */
  --tinta: #1C1C1C;       /* texto y barra superior */
  --tinta-2: #3F3C35;     /* texto secundario fuerte */
  --gris: #56524A;        /* etiquetas (≥ 4,5:1 sobre piedra) */
  --gris-claro: #A9A498;  /* solo sobre tinta */
  --linea: #E4E1D8;
  --linea-fuerte: #C9C4B6;
  --cabecera-tabla: #ECEAE3;
  --acento: #9B2D20;      /* rojo pompeyano */
  --acento-oscuro: #7A2318;

  --titular: "Cinzel", Georgia, "Times New Roman", serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 4px;
  --ancho: 1200px;
  --margen: 32px;
}

@media (max-width: 760px) {
  :root { --margen: 16px; }
}

/* ---------------------------------------------------------------- Base */

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

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

body {
  margin: 0;
  background: var(--piedra);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--acento); }
a:hover { color: var(--acento-oscuro); }

h1, h2, h3 { font-family: var(--titular); font-weight: 600; letter-spacing: .06em; margin: 0; }
h1 { font-size: 44px; line-height: 1.1; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
p { margin: 0; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.suave { color: var(--gris); }
.pequeno { font-size: 13px; }
.oculto { display: none !important; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (max-width: 760px) {
  h1 { font-size: 30px; }
  h2 { font-size: 17px; }
  .solo-escritorio { display: none !important; }
}
@media (min-width: 761px) {
  .solo-movil { display: none !important; }
}

/* ---------------------------------------------------------------- Botones */

.boton {
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 10px 16px;
  border-radius: var(--radio); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.boton-principal { background: var(--acento); color: #FFFFFF; }
.boton-principal:hover { background: var(--acento-oscuro); color: #FFFFFF; }
.boton-secundario { background: var(--marmol); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton-secundario:hover { border-color: var(--tinta); color: var(--tinta); }
.boton-claro { background: transparent; color: var(--piedra); border-color: #6B675E; }
.boton-claro:hover { border-color: var(--piedra); color: #FFFFFF; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- Cabecera */

.cabecera { background: var(--tinta); color: var(--piedra); }
.cabecera-dentro {
  max-width: var(--ancho); margin: 0 auto; padding: 14px var(--margen);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.marca { font-family: var(--titular); font-weight: 700; font-size: 22px; letter-spacing: .22em; color: #FFFFFF; text-decoration: none; }
.marca:hover { color: #FFFFFF; }
.modulos { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; flex-grow: 1; }
.modulos a, .modulos span { padding: 6px 0; }
.modulos a { color: #FFFFFF; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--acento); }
.modulos span { color: var(--gris-claro); }
.cabecera-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 13px; color: #CFCABE; }

@media (max-width: 760px) {
  .cabecera-dentro { gap: 8px 16px; }
  .marca { font-size: 19px; }
  .modulos { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .cabecera-datos .estado-corto { display: none; }
}

/* ---------------------------------------------------------------- Página */

.pagina {
  max-width: var(--ancho); margin: 0 auto; padding: 40px var(--margen) 64px;
  display: flex; flex-direction: column; gap: 36px;
}
.bloque { display: flex; flex-direction: column; gap: 36px; }
.seccion { display: flex; flex-direction: column; gap: 14px; }
.seccion-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.titulo-pagina { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.filete { width: 64px; height: 3px; background: var(--acento); }
.pie { font-size: 13px; color: var(--gris); border-top: 1px solid var(--linea); padding-top: 14px; }

@media (max-width: 760px) {
  .pagina { padding-top: 24px; gap: 24px; }
  .bloque { gap: 24px; }
  .filete { width: 48px; }
}

/* ---------------------------------------------------------------- Paneles */

.panel {
  background: var(--marmol); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.aviso { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 18px; }
.aviso svg { flex-shrink: 0; margin-top: 2px; stroke: var(--acento); }
.aviso ul { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: 14px; }
.aviso li + li { margin-top: 4px; }
.error { border-color: var(--acento); }

/* Tus datos: plegable, abierto cuando aún no hay datos */
.datos > summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.datos > summary::-webkit-details-marker { display: none; }
.datos > summary::after { content: "Mostrar"; font-size: 13px; color: var(--acento); font-weight: 600; }
.datos[open] > summary::after { content: "Ocultar"; }
.datos-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.formulario { display: flex; flex-direction: column; gap: 10px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--gris); }
.formulario input[type="text"], .formulario input[type="password"] {
  font: inherit; font-size: 15px; color: var(--tinta);
  min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--marmol);
}
.formulario input[type="file"] { font: inherit; font-size: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.registro { margin: 0; padding-left: 18px; font-size: 13px; color: var(--tinta-2); }
.registro:empty { display: none; }

@media (max-width: 760px) {
  .datos-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 14px; }
}

/* ---------------------------------------------------------------- Cifras resumen */

.resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cifra { background: var(--marmol); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.cifra-etiqueta { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.cifra-valor { font-weight: 700; font-size: 38px; letter-spacing: -.02em; line-height: 1.15; }
.cifra-nota { font-size: 13px; color: var(--gris); }

@media (max-width: 760px) {
  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cifra:first-child { grid-column: 1 / -1; }
  .cifra { padding: 14px; }
  .cifra-valor { font-size: 22px; }
  .cifra:first-child .cifra-valor { font-size: 34px; }
}

/* ---------------------------------------------------------------- Tablas */

.marco-tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--marmol); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris); text-align: left; padding: 12px 14px; background: var(--cabecera-tabla); white-space: nowrap;
}
.tabla td { padding: 11px 14px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla .der { text-align: right; }
.tabla .fuerte { font-weight: 600; }
.tabla .fiscal { font-weight: 700; }
.tabla tr.sub td { color: var(--gris); font-size: 13px; border-top: 0; padding-top: 4px; }
.tabla tr.res td { border-top: 1px solid var(--linea-fuerte); color: var(--gris); }
.tabla tr.res td.fiscal { color: var(--tinta); }
.tabla tr.total td { border-top: 2px solid var(--tinta); font-weight: 700; }
.tabla .nota { font-size: 12px; color: var(--gris); }

/* ---------------------------------------------------------------- Listas y tarjetas (móvil) */

.lista { background: var(--marmol); border: 1px solid var(--linea); border-radius: var(--radio); display: flex; flex-direction: column; }
.lista-fila { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.lista-fila + .lista-fila { border-top: 1px solid var(--linea); }
.lista-fila > div { display: flex; flex-direction: column; gap: 2px; }
.lista-fila > div:last-child { align-items: flex-end; }

.tarjetas { display: flex; flex-direction: column; gap: 10px; }
.tarjeta { background: var(--marmol); border: 1px solid var(--linea); border-radius: var(--radio); }
.tarjeta[open] { border-color: var(--linea-fuerte); }
.tarjeta > summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.tarjeta > summary::-webkit-details-marker { display: none; }
.tarjeta > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.tarjeta[open] > summary { border-bottom: 1px solid var(--linea); }
.tarjeta-cuerpo { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--veta); }
.cadena { display: flex; flex-direction: column; }
.cadena + .cadena { border-top: 1px solid var(--linea); padding-top: 8px; }
.cadena-titulo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-bottom: 2px; }
.fila { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
.fila > span:first-child { color: var(--gris); }
.fila.fiscal { font-weight: 700; }
.fila.fiscal > span:first-child { color: var(--tinta); }
.fila.total { border-top: 1px solid var(--linea-fuerte); padding-top: 8px; }