/* Panel de Kitae. Solo variables y clases de tokens.css (copia literal del sistema de marca):
   colores, --space-*, --radius-*, --font-* y los estilos de texto .t-* (en las plantillas).
   Plano: sin sombras; superficies por cambio de fondo o líneas de 1 px en --linea. */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--washi); }
body { margin: 0; background: var(--washi); color: var(--sumi); }
input, select, button, textarea { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-4); }
a { color: var(--ai); text-underline-offset: var(--space-1); }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--font-mono); }
.secundario { color: var(--hagane); }
.nowrap { white-space: nowrap; }
.partir { overflow-wrap: anywhere; }

.saltar {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8) * 3);
  padding: var(--space-2) var(--space-4);
  background: var(--sumi);
  color: var(--washi);
  border-radius: var(--radius-sm);
}
.saltar:focus { top: var(--space-4); }
.saltar:focus-visible { outline-color: var(--ai-on-sumi); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Iconos Lucide en línea (trazo 2 px, currentColor) */
.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
  stroke-width: 2;
}

/* Logotipo provisional (parcial _logotipo.html): Manrope 800, minúsculas, sumi sobre washi */
.logotipo {
  margin: 0;
  font-weight: 800;
  color: var(--sumi);
  text-decoration: none;
  text-transform: lowercase;
}

/* Cabecera */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-4) var(--space-8);
  background: var(--washi);
  border-bottom: 1px solid var(--linea);
}
.nav { display: flex; gap: var(--space-4); }
.nav-enlace, .volver, .paginacion a, .tenant-activo, .usuario {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-enlace { color: var(--sumi); text-decoration: none; font-weight: 700; padding: var(--space-1) 0; }
.nav-enlace:hover { color: var(--ai); }
.cabecera-sesion {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.cabecera-sesion form { margin: 0; }
.tenant-activo { font-weight: 700; }
.usuario { color: var(--hagane); }
.selector-tenant { display: flex; align-items: center; gap: var(--space-2); }

/* Contenido */
.contenido { max-width: 1040px; margin: 0 auto; padding: var(--space-8); }
.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.encabezado h1 { margin: 0; }
.seccion { margin-top: var(--space-8); }

.superficie {
  background: var(--kasumi);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.superficie > :last-child { margin-bottom: 0; }
.vacio { padding: var(--space-8) var(--space-4); }

/* Acceso */
.acceso { max-width: 640px; margin: var(--space-8) auto; }
.acceso .logotipo { margin-bottom: var(--space-2); }
.lema { color: var(--hagane); margin-bottom: var(--space-8); }
.acceso-entrar { margin: var(--space-4) 0; }

/* Botones (los pequeños llevan .t-label; los principales, .t-body en 700) */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.boton-primario { background: var(--ai); color: var(--washi); border: 1px solid var(--ai); }
.boton-primario:hover { background: var(--sumi); border-color: var(--sumi); }
.boton-secundario { background: transparent; color: var(--sumi); border: 1px solid var(--hagane); }
.boton-secundario:hover { background: var(--kasumi); }

/* Formularios */
.formulario { max-width: 640px; }
.campo { margin-bottom: var(--space-4); }
.campo label, .datos dt { display: block; margin-bottom: var(--space-1); }
/* 14: tipo de proyecto (Estático / PHP) */
.opciones-tipo { border: 0; padding: 0; margin-inline: 0; }
.opciones-tipo legend { padding: 0; margin-bottom: var(--space-1); }
.opciones-tipo .opcion { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.opciones-tipo .ayuda { margin: 0 0 0 calc(var(--space-2) + 1.1em); }
.seguridad-base { margin-top: var(--space-4); }
.seguridad-base h3 { margin: 0 0 var(--space-2); }
input[type="text"], input[type="file"], select, textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--washi);
  color: var(--sumi);
  border: 1px solid var(--hagane);
  border-radius: var(--radius-sm);
}
select { width: auto; padding: var(--space-1) var(--space-2); }
.ayuda { color: var(--hagane); margin: var(--space-1) 0 0; }
.error, .aviso, .correcto {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-2) 0 0;
}
.error { color: var(--peligro); }
.correcto { color: var(--sumi); }
.correcto .icono { color: var(--ok); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--peligro); }
textarea { resize: vertical; }
/* Casilla con su texto al lado (VEX, «He revisado este aviso concreto») */
.casilla { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.casilla label { display: inline; margin: 0; }
.casilla .error { flex-basis: 100%; }
/* 22: «Avisos por correo» (casilla con su explicación debajo) */
.casilla .ayuda { flex-basis: 100%; margin-top: 0; }
.reapertura-vex { overflow-wrap: anywhere; }
.mensaje-vex { margin-bottom: var(--space-4); }
.aviso { padding: var(--space-4); border-radius: var(--radius-md); background: var(--kasumi); border-left: 2px solid var(--peligro); margin-bottom: var(--space-4); }
.aviso-peligro .icono { color: var(--peligro); }
.aviso-info { border-left-color: var(--ai); }
.aviso-info .icono { color: var(--ai); }
.acciones { margin-top: var(--space-4); }

/* Datos de la ficha */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); }
.datos dd { margin: 0; display: flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }
.datos dd.prueba-local { margin-top: var(--space-1); }
.tabla form { margin: 0; }

/* Código y kitae.yaml (.t-code en la plantilla) */
.codigo {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--kasumi);
  color: var(--sumi);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.superficie .codigo { background: var(--washi); }

/* Tablas (cabeceras con .t-label) */
.tabla { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.tabla th { background: var(--kasumi); text-align: left; padding: var(--space-2) var(--space-4); }
.tabla th:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.tabla th:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.tabla td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla .fila-mensaje td { padding-top: 0; }
.tabla tbody tr:has(+ .fila-mensaje) td { border-bottom: 0; }

.paginacion { display: flex; justify-content: space-between; gap: var(--space-4); }

/* Estados de despliegue (§4.1 v5): color + palabra + icono, la palabra siempre en su color.
   En curso (ai): icono animado solo por CSS; nada de animación con prefers-reduced-motion. */
.estado { display: inline-flex; align-items: center; gap: var(--space-1); }
.estado-ai { color: var(--ai); }
.estado-hagane { color: var(--hagane); }
.estado-ok { color: var(--ok); }
.estado-peligro { color: var(--peligro); }
.estado-giro .icono { animation: kitae-giro 1s linear infinite; }
.estado-pulso .icono { animation: kitae-pulso 1.6s ease-in-out infinite; }
@keyframes kitae-giro { to { transform: rotate(360deg); } }
@keyframes kitae-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .estado .icono { animation: none; }
}

/* 11 (e2a-diseno.md §2.1): artefacto firmado. `hi` es el bermellón del sello: solo el sello y esta
   marca (nunca errores). Va en el icono; la palabra queda en el color del texto (contraste). */
.firmado { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); }
.firmado .icono { color: var(--hi); }

@media (max-width: 640px) {
  .contenido, .cabecera { padding: var(--space-4); }
  .cabecera-sesion { margin-left: 0; }
}

/* Estado de seguridad (08, e3-vigilancia.md §5): color + palabra + icono, como los de despliegue.
   `aviso` solo para estados de seguridad. Los textos de los avisos son contenido externo: se
   muestran como texto (pre-wrap), nunca como HTML. */
.estado-aviso { color: var(--aviso); }
.seguridad-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0; }
.seguridad-feeds { border-left-color: var(--hagane); background: var(--washi); }
.seguridad-feeds .icono { color: var(--hagane); }
.enlace-estado { text-decoration: none; }
.titulo-aviso { margin-top: 0; }
.texto-aviso { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch; }
.referencias { padding-left: var(--space-4); }
.detalles summary { cursor: pointer; }
.detalles[open] summary { margin-bottom: var(--space-4); }