/* ==========================================================================
   MODO REVISIÓN — el prototipo en sus dos vistas (2026-09-15)
   ==========================================================================
   Lo pide Manuel en «CMCS DESIGN SYSTEM / EXISTING CLIENT-REVIEW SITE»: el
   mismo sitio, dos vistas.

     · REVISIÓN — se ve TODO lo que falta, cada cosa marcada con el estado que
       tiene en el pedido de insumos al cliente
       (`01_client_inputs/CMCS_FINAL_INPUT_CLOSURE_REQUEST.md`).
     · PÚBLICA  — el sitio como saldría: sin identificadores internos, sin
       borradores legales, sin acciones bloqueadas.

   CÓMO FUNCIONA. Un atributo en <html>: `data-modo="revision"` o `"publico"`.
   Lo pone un guion en el <head> ANTES de pintar, para que no parpadee. Lo que
   sólo existe en revisión lleva `data-solo="revision"`; lo que sólo existe en
   la pública, `data-solo="publico"`. Sin atributo —o si el guion falla— manda
   revisión: el prototipo es privado, y equivocarse hacia enseñar lo pendiente
   es equivocarse hacia el lado seguro.                                        */

html[data-modo="publico"] [data-solo="revision"],
html:not([data-modo="publico"]) [data-solo="publico"] { display: none !important; }


/* ---- La marca de estado ----------------------------------------------------
   Cinco familias de color para los nueve estados, porque lo que tiene que leer
   quien revisa es QUÉ HAY QUE HACER, no el nombre exacto:
     ámbar   — lo pone o lo confirma el colegio  (PENDING_CLIENT_VALIDATION,
                                                  CLIENT_INPUT_REQUIRED)
     violeta — lo revisa alguien antes de salir  (LEGAL_REVIEW_REQUIRED,
                                                  DOCUMENT_REVIEW_REQUIRED)
     azul    — falta un archivo                  (ASSET_REQUIRED)
     rojo    — no sale                           (DO_NOT_PUBLISH)
     verde   — resuelto                          (VERIFIED, APPROVED_CONTENT,
                                                  READY_FOR_PUBLICATION)
   Fondo claro y tinta oscura de su mismo tono en las cinco: se leen igual
   sobre el marino que sobre el claro, que es donde ya se equivocó tres veces
   este proyecto. El filo izquierdo grueso es la señal que se ve de lejos.     */
.estado {
  --estado-fondo: #FFE9B8;
  --estado-tinta: #4A3300;
  --estado-filo: #C98A00;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin: 0;
  max-width: 64ch;
  padding: 0.55rem 0.85rem 0.6rem;
  border: 1px solid var(--estado-filo);
  border-left-width: 4px;
  border-radius: 0.35rem;
  background: var(--estado-fondo);
  color: var(--estado-tinta);
  font-family: var(--fuente-texto, inherit);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-shadow: none;
}
.estado__codigo {
  font-family: var(--fuente-codigo);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.estado__ref { font-family: var(--fuente-codigo); font-weight: 600; }
/* El enlace dentro de una marca va en la tinta de la marca, con `!important`
   a propósito: sobre marino, las reglas de enlace del campo (`.sobre-marino a`)
   le ganaban y lo pintaban en blanco sobre el violeta claro —1,29:1, lo cazó el
   barrido en Gobierno y documentos—. Una marca tiene que leerse igual en
   cualquier campo, y es la única pieza del sitio que no cambia con él. */
.estado a { color: var(--estado-tinta) !important; text-decoration: underline; text-underline-offset: 0.15em; }
.estado a:hover { text-decoration-thickness: 2px; }

.estado--pendiente  { --estado-fondo: #FFE9B8; --estado-tinta: #4A3300; --estado-filo: #C98A00; }
.estado--revision   { --estado-fondo: #E9DDFF; --estado-tinta: #34176E; --estado-filo: #7A4FD0; }
.estado--falta      { --estado-fondo: #D5E8FF; --estado-tinta: #0B2E5C; --estado-filo: #2F74C8; }
.estado--bloqueo    { --estado-fondo: #FFD6D1; --estado-tinta: #5E120A; --estado-filo: #C23A2B; }
.estado--verificado { --estado-fondo: #CDEFD9; --estado-tinta: #0E3D22; --estado-filo: #2E9A5B; }

/* Suelta en un bloque: centrada bajo lo que marca, con el aire de una pieza. */
.estado--bloque {
  display: flex;
  width: fit-content;
  margin: clamp(var(--e-6), 4vw, var(--e-7)) auto 0;
}
.encabezado .estado--bloque { margin-top: var(--e-6); }


/* ---- La barra del prototipo -------------------------------------------------
   Arriba del todo y en negro, fuera de la paleta del sitio a propósito: no es
   parte de la web del colegio, es el mando de quien la revisa, y tiene que
   leerse como tal en la primera mirada.                                       */
.revision {
  position: relative;
  z-index: 60;
  background: #0B0D22;
  color: #E6E8F5;
  font-size: var(--t-xs);
}
.revision__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-5);
  min-height: 2.6rem;
  padding-block: 0.3rem;
}
.revision__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin: 0;
  max-width: none;
}
.revision__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fuente-codigo);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.revision__punto { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #FFB020; }
html[data-modo="publico"] .revision__punto { background: #4ADE80; }
.revision__cuenta { color: #B3B8DC; }
.revision__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.revision__modos {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.revision__modo,
.revision__boton {
  min-height: 1.85rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: #E6E8F5;
  cursor: pointer;
}
.revision__modo { border: 0; background: transparent; }
.revision__modo[aria-pressed="true"] { background: #FFF; color: #14161C; }
.revision__boton { border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; }
.revision__boton:hover { background: rgba(255, 255, 255, 0.1); }
.revision__modo:focus-visible,
.revision__boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }


/* ---- La leyenda de estados --------------------------------------------------- */
.leyenda {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100svh - 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 0;
  border-radius: 1rem;
  background: #FFF;
  color: var(--tinta);
  box-shadow: 0 30px 80px rgba(8, 10, 26, 0.45);
}
.leyenda::backdrop { background: rgba(8, 10, 26, 0.6); }
.leyenda__cabeza { display: flex; justify-content: space-between; align-items: start; gap: var(--e-4); }
.leyenda__titulo { margin: 0; font-size: var(--t-md); line-height: 1.2; color: var(--marino); letter-spacing: -0.02em; }
.leyenda__cerrar {
  flex: none;
  min-height: 2rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(42, 46, 104, 0.3);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--marino);
  cursor: pointer;
}
.leyenda__entrada { margin: var(--e-3) 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-suave); }
.leyenda__lista { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.leyenda__lista li {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.leyenda__lista .estado { width: 100%; }
@media (max-width: 36rem) {
  .leyenda__lista li { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
}


/* ---- La salida al Portal Cervantista ----------------------------------------
   Manuel: «Portal Cervantista → mensaje corto de orientación → Acceder al
   Portal Cervantista → destino externo de DPDSoft», y que quede claro cuándo
   se sale del sitio del colegio. Es un `<dialog>`, como el menú del teléfono:
   el foco entra, Escape cierra y nada detrás se puede pulsar por error.       */
.salida {
  width: min(34rem, calc(100% - 2rem));
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 0;
  border-radius: 1.2rem;
  box-shadow: 0 30px 80px rgba(8, 10, 26, 0.55);
  text-align: left;
}
.salida::backdrop { background: rgba(8, 10, 26, 0.65); }
.salida__rotulo { margin: 0; color: #8FD0F0; }
.salida__titulo {
  margin: var(--e-3) 0 0;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #FFF;
}
.salida__cuerpo { margin: var(--e-4) 0 0; font-size: var(--t-base); line-height: 1.55; color: var(--marino-tinte); }
.salida__destino { font-family: var(--fuente-codigo); color: #FFF; }
.salida__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin: var(--e-6) 0 0; }
.salida__acciones .boton svg { width: 1em; height: 1em; }
.salida .estado { margin-top: var(--e-5); }


/* ---- Lo que sustituye al formulario en la vista pública ---------------------
   El formulario no puede enviar (LEGAL-004 sin certificar) y la vista pública
   no admite acciones bloqueadas. En su lugar, los dos canales verificados. */
.forma-publica {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  margin: clamp(var(--e-7), 5vw, var(--e-8)) auto 0;
  text-align: center;
}
.forma-publica__dato {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: var(--t-md);
  overflow-wrap: anywhere;
}
.forma-publica__dato a { color: inherit; }
.es-clara .forma-publica__dato { color: var(--marino); }


/* ---- La marca junto al botón de WhatsApp ------------------------------------- */
.muelle__estado {
  position: absolute;
  right: calc(100% + 0.75rem);
  bottom: 0.4rem;
  width: max-content;
  /* 17rem y no 13: `PENDING_CLIENT_VALIDATION` es una sola palabra y a 13rem
     se salía de la caja. En el teléfono cabe igual: queda a la izquierda del
     botón con 19rem libres a 375 px. */
  max-width: min(17rem, calc(100vw - 7rem));
  pointer-events: auto;
  box-shadow: 0 10px 24px rgba(8, 10, 26, 0.28);
}
/* En el teléfono, a la izquierda del botón caía ENCIMA del de la música, que
   vive en la esquina opuesta del mismo renglón. Sube por encima del oso. */
@media (max-width: 40rem) {
  .muelle__estado { right: 0; bottom: calc(100% + 3.6rem); max-width: min(15rem, calc(100vw - 2rem)); }
}