/* Estados financieros CNMV — identidad de URSUS-3 Capital.
 *
 * Los colores y las tipografías salen de la propuesta web de la marca (azules
 * profundos, DM Sans para el texto y Cormorant Garamond para los titulares).
 *
 * Dos reglas que condicionan todo este fichero:
 *
 *   * **No hay JavaScript.** La CSP es `default-src 'none'` sin `script-src`, así que
 *     todo lo interactivo se hace con CSS y HTML: los desplegables son <details>, y
 *     los formularios se envían de verdad, sin validación de cliente.
 *   * **No hay recursos externos.** Las fuentes van alojadas aquí al lado. Nada de
 *     CDN: el navegador del operador no pide nada a terceros mientras tiene datos de
 *     clientes en pantalla.
 */

@font-face {
  font-family: 'DM Sans';
  src: url('fuentes/dm-sans.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fuentes/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --midnight:   #04062e;
  --navy:       #0a0f4a;
  --navy-light: #111875;
  --indigo:     #4a42d4;
  --indigo-alt: #6b63e8;
  --indigo-pale:#e8e6f8;
  --slate:      #3a3f8a;
  --ice:        #e8ecf2;

  --blanco:     #ffffff;
  --fondo:      #f7f8fc;
  --tinta:      #111827;
  --tinta-media:#4b5563;
  --tinta-suave:#6b7280;
  --linea:      rgba(74, 66, 212, 0.14);

  --ok:         #0f766e;
  --error:      #b42318;
  --alerta:     #b45309;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --sombra: 0 1px 2px rgba(4, 6, 46, 0.04), 0 8px 24px rgba(4, 6, 46, 0.06);
  --sombra-alta: 0 2px 4px rgba(4, 6, 46, 0.06), 0 18px 48px rgba(4, 6, 46, 0.12);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --cuerpo: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

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

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- cabecera */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  height: 64px;
  background: var(--midnight);
  color: var(--blanco);
  /* un filo de luz abajo, como la web de la marca */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.marca {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.marca abbr { text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.35); }
.marca .fina { color: var(--indigo-alt); }

.sesion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}
.en-linea { display: inline; margin: 0; }

main {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ----------------------------------------------------------------- tarjeta */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}
.tarjeta.estrecha { max-width: 26rem; margin: clamp(2rem, 8vh, 5rem) auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.005em;
  margin: 0 0 0.35em;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.15; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.entradilla { color: var(--tinta-media); margin: 0 0 1.5rem; }

/* ------------------------------------------------------------ formularios */

label {
  display: block;
  margin: 1.1rem 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
}
label small { font-weight: 400; color: var(--tinta-suave); }

input[type="text"], input[type="password"], input[type="number"],
input[type="file"], select, input:not([type]) {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--ice);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-pale);
}
input[type="file"] {
  padding: 0.5rem;
  background: var(--fondo);
  border-style: dashed;
  cursor: pointer;
}
select {
  /* sin JS no hay desplegable a medida; se deja el nativo y solo se enmarca */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

fieldset {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--fondo);
}
legend {
  padding: 0 0.5rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}

.fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila > * { flex: 1 1 10rem; min-width: 0; }

.opcion {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.8rem;
  font-weight: 400;
  background: var(--blanco);
  border: 1px solid var(--ice);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.opcion:hover { border-color: var(--indigo-alt); }
.opcion input { margin-top: 0.3rem; flex: none; accent-color: var(--indigo); }
/* :has() para marcar la elegida; donde no esté soportado simplemente no se marca */
.opcion:has(input:checked) { border-color: var(--indigo); background: var(--indigo-pale); }
.opcion small { color: var(--tinta-suave); }
.opcion strong { color: var(--navy); }

button {
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 500;
  color: var(--navy);
  background: var(--blanco);
  border: 1px solid var(--ice);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
button:hover { box-shadow: var(--sombra); }
button:active { transform: translateY(1px); }

button.principal {
  margin-top: 1.75rem;
  width: 100%;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--navy-light), var(--indigo));
  border: none;
}
button.principal:hover { box-shadow: var(--sombra-alta); }

button.enlace {
  margin: 0; padding: 0; border: 0; background: none;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  font-size: inherit;
}
button.enlace:hover { color: var(--blanco); box-shadow: none; }

.pista { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--tinta-suave); }
.entidad { margin: 0; font-size: 0.9rem; color: var(--tinta-media); }
.entidad strong { color: var(--navy); }

/* -------------------------------------------------------- listas y avisos */

.tramites { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.tramites li {
  padding: 0.9rem 1rem;
  background: var(--blanco);
  border: 1px solid var(--ice);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tramites li:hover { border-color: var(--indigo); box-shadow: var(--sombra); }
.tramites a { color: var(--navy); text-decoration: none; }
.tramites a:hover { text-decoration: underline; }
.tramites small { color: var(--tinta-suave); }

.aviso {
  margin: 1rem 0;
  padding: 0.75rem 0.95rem;
  font-size: 0.925rem;
  border-radius: var(--r-md);
  border-left: 3px solid;
}
.aviso.error  { color: var(--error); border-color: var(--error); background: #fef3f2; }
.aviso.ok     { color: var(--ok);    border-color: var(--ok);    background: #f0fdfa; }
.aviso.alerta { color: var(--alerta);border-color: var(--alerta);background: #fffbeb; }

.resumen { list-style: none; padding: 0; display: grid; gap: 0.3rem; }
.lista { padding-left: 1.1rem; font-size: 0.88rem; color: var(--tinta-media); }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
code {
  padding: 0.1em 0.35em;
  background: var(--indigo-pale);
  border-radius: var(--r-sm);
  color: var(--navy);
}

.etiqueta {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}
.etiqueta.sobra  { color: var(--error); background: #fef3f2; }
.etiqueta.falta  { color: var(--alerta); background: #fffbeb; }
.etiqueta.ok     { color: var(--ok); background: #f0fdfa; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--ice); }
th { font-weight: 500; color: var(--navy); }

/* Desplegable sin JavaScript */
details { margin-top: 1rem; }
summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--indigo);
}
summary::marker { color: var(--slate); }

footer {
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 2.5rem;
  border-top: 1px solid var(--linea);
  font-size: 0.825rem;
  color: var(--tinta-suave);
  text-align: center;
}
footer p { max-width: 46rem; margin: 0 auto; }

a { color: var(--indigo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}