/* Causas — hoja de estilos de la aplicación.
   Sin CDN ni fuentes externas: todo se sirve desde el propio servidor, de
   modo que la aplicación funciona igual en un computador sin internet.

   El azul tinta es el único acento de marca. El rojo, el ámbar y el verde
   están reservados para el semáforo de los plazos: si se usaran también
   para decorar, dejarían de significar algo. */

:root {
  /* Marca */
  --azul: #1d5d78;
  --azul-oscuro: #164a60;
  --azul-fondo: #e7f0f4;
  --tinta: #172d3b;
  --tinta-suave: #35505f;
  --apagado: #657580;

  /* Superficies */
  --fondo: #f1f4f6;
  --panel: #ffffff;
  --panel-tenue: #f7f9fa;
  --borde: #e2e7eb;
  --borde-fuerte: #d9e0e4;

  /* Semáforo de plazos. Sólo para eso. */
  --rojo: #b3261e;
  --rojo-fondo: #fdecea;
  --rojo-borde: #f3c9c4;
  --ambar: #8a5a1e;
  --ambar-fondo: #fdf3e7;
  --ambar-borde: #f0dcc1;
  --verde: #2f6b52;
  --verde-fondo: #ebf4ef;
  --verde-borde: #cde0d6;

  /* Formas: nada cuadrado */
  --radio-xl: 28px;
  --radio-l: 20px;
  --radio-m: 14px;
  --radio-s: 10px;
  --pastilla: 999px;

  --sombra: 0 18px 44px rgba(23, 45, 59, .07);
  --sombra-suave: 0 6px 18px rgba(23, 45, 59, .05);

  --letra: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui,
           -apple-system, "Helvetica Neue", Arial, sans-serif;
  --letra-titulo: Aptos, "Segoe UI Variable Display", "Trebuchet MS",
                  system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* El atributo «hidden» del HTML tiene que ganarle a cualquier regla de esta
   hoja. Sin esto, un `label { display: block }` deja a la vista campos que
   el formulario da por escondidos, y la cascada de tribunales aparece
   entera de una vez. */
[hidden] { display: none !important; }

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

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-oscuro); text-decoration: underline; }

:focus-visible { outline: 3px solid #6d9ab5; outline-offset: 3px; }

/* --- Encabezado y menú --- */
.encabezado {
  background: var(--panel);
  color: var(--tinta);
  padding: 16px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}
.encabezado-marca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.marca {
  font-family: var(--letra-titulo);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--tinta);
  line-height: 1;
}
.marca:hover { color: var(--tinta); text-decoration: none; }
.marca i { color: var(--azul); font-style: normal; }
.encabezado-marca .seccion {
  font-size: 13px;
  color: var(--apagado);
  padding-left: 12px;
  border-left: 1px solid var(--borde-fuerte);
}

.menu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.menu a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--pastilla);
  font-size: 13.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.menu a:hover { background: var(--fondo); color: var(--tinta); text-decoration: none; }
.menu a.activo { background: var(--tinta); color: #fff; font-weight: 600; }
.menu .menu-salir { color: var(--apagado); }

/* El contador de gestiones pendientes del menú. Es lo primero que se mira
   al entrar, así que se pinta del color de lo más urgente que haya. */
.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 7px;
  border-radius: var(--pastilla);
  background: var(--borde);
  color: var(--tinta-suave);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.contador-urgente { background: var(--rojo); color: #fff; }
.contador-proximo { background: var(--ambar); color: #fff; }
.menu a.activo .contador { background: rgba(255, 255, 255, .22); color: #fff; }

.contenido { padding: 26px 32px 56px; max-width: 1500px; margin: 0 auto; }

.pie {
  padding: 22px 32px 30px;
  color: var(--apagado);
  font-size: 12.5px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
}
.pie .marca { font-size: 19px; }

/* --- Títulos --- */
h1 {
  font-family: var(--letra-titulo);
  font-size: 30px;
  letter-spacing: -1.1px;
  line-height: 1.15;
  margin: 2px 0 18px;
}
h2 { font-family: var(--letra-titulo); font-size: 18px; letter-spacing: -.4px; margin: 0 0 14px; }
h3 {
  font-size: 11.5px; margin: 16px 0 4px; color: var(--apagado);
  text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700;
}
.sutil { color: var(--apagado); font-size: 12.5px; }
code {
  background: var(--fondo);
  padding: 2px 8px;
  border-radius: var(--radio-s);
  font-size: 12.5px;
}
pre {
  background: var(--fondo); padding: 14px 16px; border-radius: var(--radio-m);
  font-size: 12.5px; overflow-x: auto; margin: 8px 0;
}

.titulo-con-acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.titulo-con-acciones h1 { margin-bottom: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.en-linea { display: inline; }

/* --- Botones: siempre pastilla --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--azul);
  color: #fff;
  border: 1px solid var(--azul);
  padding: 10px 20px;
  border-radius: var(--pastilla);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.boton:hover {
  background: var(--azul-oscuro); border-color: var(--azul-oscuro);
  color: #fff; text-decoration: none;
}
.boton-secundario { background: var(--panel); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-secundario:hover { background: var(--fondo); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-riesgo { background: var(--tinta); border-color: var(--tinta); }
.boton-riesgo:hover { background: #0d1d27; border-color: #0d1d27; }
.boton-chico { padding: 7px 14px; font-size: 12.5px; }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--sombra-suave);
}
.tarjeta-centrada { max-width: 560px; margin: 56px auto; text-align: center; }
.formulario-acceso { max-width: 330px; margin: 0 auto; text-align: left; }
.formulario-acceso .boton { width: 100%; margin-top: 14px; }
.linea-clave { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.linea-clave label { flex: 1; margin-bottom: 0; min-width: 220px; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }

/* --- Indicadores del panel --- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.indicador {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--tinta);
  display: block;
  box-shadow: var(--sombra-suave);
  transition: transform .15s ease, box-shadow .15s ease;
}
.indicador::after {
  content: "";
  position: absolute;
  width: 92px; height: 92px;
  right: -34px; top: -34px;
  border-radius: 50%;
  background: var(--fondo);
}
.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; }
.indicador-numero {
  position: relative; z-index: 1;
  display: block; font-family: var(--letra-titulo);
  font-size: 34px; font-weight: 700; letter-spacing: -1.5px;
  line-height: 1.05; color: var(--tinta);
}
.indicador-titulo {
  position: relative; z-index: 1;
  display: block; font-size: 12.5px; color: var(--apagado); margin-top: 6px;
}
.indicador-destacado { background: var(--tinta); border-color: var(--tinta); }
.indicador-destacado::after { background: rgba(255, 255, 255, .06); }
.indicador-destacado .indicador-numero { color: #fff; }
.indicador-destacado .indicador-titulo { color: #b9c6ce; }
/* Los indicadores de plazo llevan el color del semáforo: un número rojo
   grande en el panel es lo que hace que nadie se entere tarde. */
.indicador-vencida::after { background: var(--rojo-fondo); }
.indicador-vencida .indicador-numero { color: var(--rojo); }
.indicador-hoy::after { background: var(--rojo-fondo); }
.indicador-hoy .indicador-numero { color: var(--rojo); }
.indicador-proxima::after { background: var(--ambar-fondo); }
.indicador-proxima .indicador-numero { color: var(--ambar); }
.indicador-ok::after { background: var(--verde-fondo); }
.indicador-ok .indicador-numero { color: var(--verde); }

/* --- Avisos --- */
.avisos { margin-bottom: 16px; }
.aviso {
  border: 1px solid var(--borde);
  background: var(--panel);
  padding: 14px 20px;
  border-radius: var(--radio-l);
  margin-bottom: 10px;
}
.aviso ul { margin: 6px 0 0 18px; padding: 0; }
.aviso-exito { border-color: var(--verde-borde); background: var(--verde-fondo); color: #27543f; }
.aviso-aviso { border-color: var(--ambar-borde); background: var(--ambar-fondo); color: #7a4616; }
.aviso-error { border-color: var(--rojo-borde); background: var(--rojo-fondo); color: #8d1f18; }
.mensaje-error { color: var(--rojo); }
.oculto { display: none; }

/* --- Formularios --- */
.formulario fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: 8px 22px 22px;
  margin: 0 0 18px;
  background: var(--panel);
}
.formulario legend {
  font-family: var(--letra-titulo);
  font-weight: 700; color: var(--tinta); padding: 0 10px;
  font-size: 15px;
}
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
label { display: block; font-size: 13px; color: var(--apagado); margin-bottom: 12px; }
.campo-ancho { grid-column: 1 / -1; }
label > .sutil { display: block; font-size: 11.5px; line-height: 1.35; }
.casilla { display: flex; align-items: center; gap: 10px; }
.casilla input { width: auto; }
input[type="text"], input[type="search"], input[type="date"], input[type="number"],
input[type="time"], input[type="password"], input[type="email"], select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 10px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  background: var(--panel);
}
textarea { resize: vertical; border-radius: var(--radio-m); }
input:focus, select:focus, textarea:focus {
  outline: 3px solid #6d9ab5; outline-offset: 1px; border-color: var(--borde-fuerte);
}
input:disabled, select:disabled { background: var(--fondo); color: var(--apagado); }
.obligatorio { color: var(--rojo); }
.acciones-formulario { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* El resultado del cálculo del plazo, debajo de los campos que lo producen.
   Es el dato más delicado del formulario: se muestra en grande y con el día
   de la semana, porque un «vence el sábado» salta a la vista y un
   «2026-10-10» no. */
.calculo-plazo {
  margin: 14px 0 0;
  padding: 16px 20px;
  border-radius: var(--radio-l);
  background: var(--azul-fondo);
  border: 1px solid #cfe0e8;
}
.calculo-plazo strong {
  display: block;
  font-family: var(--letra-titulo);
  font-size: 19px;
  letter-spacing: -.4px;
  color: var(--tinta);
}
.calculo-plazo .sutil { margin-top: 2px; }
.calculo-plazo.alerta { background: var(--ambar-fondo); border-color: var(--ambar-borde); }

/* --- Cuadernos de la causa --- */
.lista-bloques { display: grid; gap: 14px; margin: 4px 0 16px; }
.bloque {
  background: var(--fondo);
  border-radius: var(--radio-l);
  padding: 18px 20px 6px;
}
.bloque-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.bloque-cabecera strong {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--apagado);
}
.quitar-bloque {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--rojo); padding: 4px 8px;
  border-radius: var(--pastilla);
}
.quitar-bloque:hover { background: var(--rojo-fondo); }
.bloque-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 18px; align-items: start;
}
.bloque-campos .campo-ancho { grid-column: 1 / -1; }
.bloque-campos label { margin-bottom: 10px; }
.bloque-campos select, .bloque-campos input[type="text"] { background: var(--panel); }

/* --- Filtros --- */
.filtros { padding-bottom: 20px; }
.buscador { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.buscador label { margin-bottom: 0; }
.buscador input { min-width: 420px; flex: 1; }
.panel-filtros { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 14px; }
.panel-filtros summary {
  cursor: pointer; color: var(--azul); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
}
.rejilla-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 18px;
  margin-top: 16px;
}
.acciones-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.resultado-conteo { color: var(--apagado); margin: 10px 0 14px; font-size: 13px; }

/* --- Tablas --- */
.tabla-contenedor {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-suave);
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); }
.tabla th, .tabla td {
  border-bottom: 1px solid var(--borde);
  padding: 12px 16px; text-align: left; vertical-align: top;
}
.tabla td { white-space: nowrap; }
.tabla thead th {
  background: var(--panel);
  color: var(--apagado);
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap; position: sticky; top: 0;
  border-bottom: 1px solid var(--borde-fuerte);
}
.tabla thead th a { color: var(--apagado); text-decoration: none; }
.tabla thead th a:hover { color: var(--azul); }
.tabla tbody a, .linea-tiempo a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.tabla tbody a:hover, .linea-tiempo a:hover { color: var(--azul); text-decoration: underline; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--panel-tenue); }
.tabla-compacta td, .tabla-compacta th { padding: 9px 12px; }
.tabla td.celda-larga { max-width: 320px; min-width: 170px; white-space: normal; }
.derecha { text-align: right; }
.flecha { margin-left: 5px; font-size: 9px; color: var(--azul); }
.acciones-fila { white-space: nowrap; }
.acciones-fila a { margin-right: 12px; font-weight: 600; }
.tabla-interior { overflow-x: auto; margin-top: 4px; }

.etiqueta-estado {
  display: inline-block;
  background: var(--fondo);
  border: 0;
  color: var(--tinta-suave);
  border-radius: var(--pastilla);
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta-estado.grande { font-size: 12.5px; padding: 5px 15px; margin-left: 10px; }

/* --- El semáforo de los plazos --- */
.plazo {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--pastilla);
  padding: 4px 13px;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.plazo::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.plazo-vencida { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }
.plazo-hoy { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.plazo-proxima { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
.plazo-a_tiempo { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-borde); }
.plazo-cumplida { background: var(--fondo); color: var(--apagado); border-color: var(--borde); }
.plazo-sin_efecto { background: var(--fondo); color: var(--apagado); border-color: var(--borde); }
.plazo.grande { font-size: 13px; padding: 6px 16px; }

/* --- La agenda --- */
.grupo-agenda { margin-bottom: 22px; }
.grupo-agenda > h2 {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid var(--borde);
}
.grupo-agenda.grupo-vencidas > h2 { border-bottom-color: var(--rojo); color: var(--rojo); }
.grupo-agenda.grupo-hoy > h2 { border-bottom-color: var(--rojo); }
.grupo-agenda.grupo-semana > h2 { border-bottom-color: var(--ambar); }

.fichas-gestion { display: grid; gap: 10px; }
.ficha-gestion {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 8px 20px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--borde-fuerte);
  border-radius: var(--radio-l);
  padding: 16px 20px;
  box-shadow: var(--sombra-suave);
}
.ficha-gestion.es-vencida { border-left-color: var(--rojo); }
.ficha-gestion.es-hoy { border-left-color: var(--rojo); }
.ficha-gestion.es-proxima { border-left-color: var(--ambar); }
.ficha-gestion.es-a_tiempo { border-left-color: var(--verde); }
.gestion-cuando { font-variant-numeric: tabular-nums; }
.gestion-cuando .dia {
  display: block; font-family: var(--letra-titulo); font-size: 17px;
  font-weight: 700; letter-spacing: -.3px; color: var(--tinta);
}
.gestion-cuando .semana { display: block; font-size: 11.5px; color: var(--apagado); text-transform: capitalize; }
.gestion-que strong { font-size: 15px; display: block; }
.gestion-que .causa { font-size: 12.5px; color: var(--tinta-suave); margin-top: 3px; }
.gestion-que .tribunal { font-size: 12px; color: var(--apagado); }
.gestion-que .detalle { font-size: 12.5px; color: var(--tinta-suave); margin-top: 6px; white-space: pre-wrap; }
.gestion-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gestion-responsable {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--azul-fondo); color: var(--azul-oscuro);
  border-radius: var(--pastilla); padding: 3px 11px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* La fila para registrar un cuaderno dentro de la tabla de la ficha. */
.linea-formulario { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.linea-formulario select { min-width: 160px; }
.linea-formulario input[type="date"] { min-width: 145px; }
.linea-formulario input[type="text"] { min-width: 130px; }
.linea-formulario select, .linea-formulario input {
  width: auto; margin-top: 0; padding: 7px 12px; font-size: 13px;
}
.linea-formulario .boton { padding: 8px 16px; font-size: 13px; }

.paginacion { display: flex; align-items: center; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.pagina-actual { color: var(--apagado); font-size: 13px; }

/* --- Ficha --- */
.ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 22px;
  margin: 0 0 10px;
}
.ficha-datos dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--apagado); font-weight: 700;
}
.ficha-datos dd { margin: 4px 0 0; font-size: 14px; }
.bloque-texto p { margin: 2px 0 14px; white-space: pre-wrap; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
  border-left: 2px solid var(--borde-fuerte);
  padding: 8px 0 8px 18px;
  margin-left: 6px;
  font-size: 13.5px;
}
.linea-tiempo li:hover { border-left-color: var(--azul); }
.momento { color: var(--apagado); font-variant-numeric: tabular-nums; margin-right: 8px; }
.tipo-evento {
  background: var(--fondo); border-radius: var(--pastilla); padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--tinta-suave);
}
.autor-evento {
  background: var(--azul-fondo); border-radius: var(--pastilla); padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--azul-oscuro);
}
.zona-riesgo { border-color: var(--rojo-borde); }
.zona-riesgo h2 { color: var(--rojo); }

/* --- Pantalla de acceso --- */
.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--fondo);
}
.acceso-caja {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 34px;
  box-shadow: var(--sombra);
  padding: 44px 40px 40px;
  width: 100%;
  max-width: 430px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.acceso-caja::before {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: var(--azul-fondo);
  right: -120px; top: -120px;
}
.acceso-caja > * { position: relative; z-index: 1; }
.acceso-caja .marca { font-size: 34px; letter-spacing: -1.6px; }
.acceso-caja h1 { font-size: 21px; margin: 22px 0 4px; }
.acceso-caja .sutil { margin-bottom: 22px; display: block; }
.acceso-caja .formulario-acceso + .sutil { margin: 22px 0 0; }

/* --- Portada --- */
.portada { background: var(--panel); }
.portada-cabecera {
  padding: 18px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
}
.portada-hero { padding: 76px 32px 60px; max-width: 960px; margin: 0 auto; text-align: center; }
.portada-hero h1 { font-size: 46px; letter-spacing: -2px; margin-bottom: 14px; }
.portada-hero p { font-size: 17px; color: var(--tinta-suave); max-width: 640px; margin: 0 auto 26px; }
.portada-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; max-width: 1100px; margin: 0 auto; padding: 0 32px 70px;
}
.portada-rejilla .tarjeta { margin: 0; }
.portada-rejilla h2 { font-size: 16px; }
.portada-rejilla p { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }

@media (max-width: 900px) {
  .encabezado { padding: 14px 18px; }
  .contenido { padding: 18px 18px 40px; }
  .pie { padding: 18px; }
  h1 { font-size: 25px; }
  .tarjeta { padding: 20px; border-radius: var(--radio-l); }
  .buscador input { min-width: 0; }
  .encabezado-marca .seccion { padding-left: 0; border-left: 0; }
  .ficha-gestion { grid-template-columns: 1fr; }
  .gestion-acciones { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .portada-hero { padding: 48px 20px 36px; }
  .portada-hero h1 { font-size: 32px; }
  .portada-rejilla { padding: 0 18px 48px; }
}