/* ==========================================================================
   Serie DDD · fichas de modelo y post-its de Event Storming
   Los post-its usan los colores canónicos de Event Storming, apagados para
   convivir con los colores de estado de la serie (rojo = fallo, siempre).
   ========================================================================== */

/* ---------- Ficha de un modelo ---------- */

.ficha__marco { fill: var(--papel); stroke: var(--tinta); stroke-width: 1; transition: height 0.3s; }
.ficha__raya { stroke: var(--linea); stroke-width: 0.8; }
.ficha__titulo { font-size: 9.5px; font-weight: 500; }
.ficha__contexto { font-size: 7px; fill: var(--tinta-suave); letter-spacing: 0.06em; text-transform: uppercase; }
.ficha__campo { font-size: 8px; fill: var(--tinta); }
.ficha__fila--nueva .ficha__campo { fill: var(--ok); }
.ficha__fila--opcional .ficha__campo { fill: var(--lento); }
.ficha__fila--choque .ficha__campo { fill: var(--fallo); font-weight: 500; }
.ficha__fila--ok .ficha__campo { fill: var(--ok); }
.ficha__fila--tenue .ficha__campo { fill: var(--tinta-suave); }
.ficha__fila { animation: ficha-entra 0.4s ease-out; }
@keyframes ficha-entra { from { opacity: 0; } to { opacity: 1; } }
.ficha--choque .ficha__marco { stroke: var(--fallo); stroke-width: 1.6; fill: var(--fallo-fondo); }
.ficha--ok .ficha__marco { stroke: var(--ok); stroke-width: 1.4; }
.ficha--activa .ficha__marco { stroke: var(--activo); stroke-width: 1.8; }
.ficha--bloqueada .ficha__marco { stroke: var(--lento); stroke-width: 1.8; fill: var(--lento-fondo); }
.ficha--tenue { opacity: 0.4; }
.lab .ficha__titulo { font-size: 10.5px; }
.lab .ficha__campo { font-size: 8.8px; }

/* Unión por id entre fichas */
.union { fill: none; stroke: var(--linea); stroke-width: 0.9; stroke-dasharray: 3 3; }
.union__texto { font-size: 7px; fill: var(--tinta-suave); }

/* ---------- Post-its ---------- */

.postit { transition: transform 0.7s ease-in-out, opacity 0.4s; }
.postit--quieto { transition: none; }
.postit rect { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.6; }
.postit--evento rect { fill: #f5b06a; }
.postit--comando rect { fill: #8cc4ec; }
.postit--agregado rect { fill: #f3e27a; }
.postit--actor rect { fill: #fbf2b4; }
.postit--sistema rect { fill: #eba7c4; }
.postit__texto { font-size: 6.6px; fill: #1d1d1d; font-weight: 500; }
.lab .postit__texto { font-size: 7.2px; }
.postit__etiqueta { font-size: 6.5px; fill: var(--activo); font-weight: 500; }
.postit--resaltado rect { stroke: var(--activo); stroke-width: 2; }
.postit--pivote rect { stroke: #1d1d1d; stroke-width: 2.2; }
.postit--tenue { opacity: 0.3; }
.postit--cambia rect { stroke: var(--fallo); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .postit, .ficha__fila { transition: none; animation: none; } }

:root[data-theme="dark"] .postit rect { filter: saturate(0.8) brightness(0.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .postit rect { filter: saturate(0.8) brightness(0.9); }
}

/* Frontera de un contexto sobre la pared */
.frontera { fill: none; stroke: var(--tinta); stroke-width: 1.2; stroke-dasharray: 6 3; }
.frontera--nueva { stroke: var(--activo); }
.frontera__nombre { font-size: 8px; font-weight: 500; fill: var(--tinta); }
.heuristica { stroke: var(--activo); stroke-width: 1.4; stroke-dasharray: 2 3; }
.heuristica__texto { font-size: 7px; fill: var(--activo); }

/* ---------- Estilo 8 bits ---------- */

.pixel .ficha__marco { rx: 0; fill: #05060d; stroke: #34427a; stroke-width: 2; }
.pixel .ficha__raya { stroke: #34427a; stroke-width: 2; }
.pixel .ficha__titulo.rotulo-pixel { fill: var(--acento); }
.pixel .ficha__contexto.rotulo-pixel { fill: var(--linea); }
.pixel .ficha__campo.rotulo-pixel { fill: var(--tinta-suave); }
.pixel .ficha__fila--nueva .rotulo-pixel,
.pixel .ficha__fila--ok .rotulo-pixel { fill: var(--ok); }
.pixel .ficha__fila--opcional .rotulo-pixel { fill: var(--lento); }
.pixel .ficha__fila--choque .rotulo-pixel { fill: var(--fallo); }
.pixel .ficha--choque .ficha__marco { stroke: var(--fallo); fill: #2a0a14; }
.pixel .ficha--ok .ficha__marco { stroke: var(--ok); }
.pixel .ficha--activa .ficha__marco { stroke: #8fb3ff; }
.pixel .ficha--bloqueada .ficha__marco { stroke: var(--lento); fill: #2a1a05; }
.pixel .union { stroke: var(--linea); stroke-width: 2; stroke-dasharray: 2 4; }
.pixel .postit { transition: transform 0.7s steps(7, jump-none); }
.pixel .postit rect { rx: 0; stroke: none; }
.pixel .postit--evento rect { fill: #ff9f1c; }
.pixel .postit--comando rect { fill: #3d7cf0; }
.pixel .postit--agregado rect { fill: #f4e04d; }
.pixel .postit--actor rect { fill: #fff3a8; }
.pixel .postit--sistema rect { fill: #ff6fae; }
.pixel .postit .rotulo-pixel { fill: #05060d; }
.pixel .postit--comando .rotulo-pixel { fill: #fff; }
.pixel .postit .postit__etiqueta.rotulo-pixel { fill: #8fb3ff; }
.pixel .postit--resaltado rect { stroke: #fff; stroke-width: 2; }
.pixel .postit--pivote rect { stroke: #fff; stroke-width: 2; }
.pixel .postit--cambia rect { stroke: var(--fallo); stroke-width: 2; }
.pixel .frontera { stroke: var(--acento); stroke-width: 2; stroke-dasharray: 4 4; }
.pixel .frontera__nombre.rotulo-pixel { fill: var(--acento); }
.pixel .heuristica { stroke: #8fb3ff; stroke-width: 2; }
.pixel .heuristica__texto.rotulo-pixel { fill: #8fb3ff; }

/* ---------- Detalle del panel ---------- */

/* Dos fichas lado a lado en el laboratorio (no hay código en la segunda columna) */
.lab .panel__detalle--dos > :nth-child(2) { grid-column: 2; grid-row: 1; }
.caso__marca { font-family: var(--mono); width: 1.1rem; flex: none; }
.ficha-sim__lista .ficha-sim__ok { color: var(--ok); }

/* ---------- Agregados (episodio 4) ---------- */

.agregado__marco { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.2; }
.agregado--grande .agregado__marco { stroke-width: 1.6; }
.entidad { fill: none; stroke: var(--linea); stroke-width: 0.8; stroke-dasharray: 3 2; }
.agregado__version { font-size: 8px; fill: var(--tinta-suave); }
.agregado__trabajo { font-size: 8.5px; font-weight: 500; fill: var(--activo); }
.agregado__cola { font-size: 8px; fill: var(--lento); }
.agregado--activo .agregado__marco { stroke: var(--activo); stroke-width: 2; fill: var(--activo-fondo); }
.agregado--conflicto .agregado__marco { stroke: var(--fallo); stroke-width: 2; fill: var(--fallo-fondo); }
.agregado--conflicto .agregado__trabajo { fill: var(--fallo); }
.doble { fill: none; stroke: var(--lento); stroke-width: 1.6; stroke-dasharray: 6 3; }

.pixel .agregado__marco { rx: 0; fill: #05060d; stroke: #34427a; stroke-width: 2; }
.pixel .agregado--activo .agregado__marco { stroke: #8fb3ff; fill: #0b1a3a; }
.pixel .agregado--conflicto .agregado__marco { stroke: var(--fallo); fill: #2a0a14; }
.pixel .entidad { stroke: #34427a; stroke-width: 2; }
.pixel .agregado__version.rotulo-pixel { fill: var(--linea); }
.pixel .agregado__trabajo.rotulo-pixel { fill: #8fb3ff; }
.pixel .agregado--conflicto .agregado__trabajo.rotulo-pixel { fill: var(--fallo); }
.pixel .agregado__cola.rotulo-pixel { fill: var(--lento); }
.pixel .doble { stroke: var(--lento); stroke-width: 2; }