/* ==========================================================================
   EL SELLO DEL REMITENTE
   --------------------------------------------------------------------------
   La identidad de quien escribe, dibujada SÓLO al nivel que distingue. El
   servidor la resuelve en `app/identidad.py` y la emite
   `parciales/identidad.html`; aquí sólo se dibuja.

     máquina      → no llega nada. Ni un nodo. 112 de 188 renglones.
     persona      → disco  + una letra, con el tinte de su dominio.
     institución  → cuadro + la marca de su casa, con el mismo tinte.

   ►► LO PRIMERO QUE HACE ESTE SISTEMA ES QUITAR UN COLOR. ◄◄
   `.avatar` se pintaba con `--marca-fondo` + `--marca-texto-vivo`: TODO
   avatar del producto era azul de marca —la barra superior, la cabecera de
   lectura, la ficha del contacto, las sugerencias del redactor, los
   asistentes de la agenda—. El azul de este producto significa UNA cosa,
   «sin leer», y llevaba tiempo significando además «aquí hay alguien». El
   sello se lo quita y se lo devuelve al filo del renglón (§6, EL PUENTE).

   NO ENGORDA EL RENGLÓN, y está medido: el alto del renglón y el ancho del
   registro son los mismos con sello y sin él. Los 18 px de la pista salen
   de `--col-remitente`, no de la ventana.

   Ningún color se escribe aquí: la rampa `--tinte-1 … --tinte-5` vive en
   tokens.css §4.9 con sus tres ramas de edición. Ninguna animación: el sello
   no late, no gira y no aparece con retardo.
   ========================================================================== */

/* --- 1. EL COMPONENTE ------------------------------------------------------
   Un solo objeto con cuatro tamaños. No son cuatro tamaños nuevos: son los
   tres que ya tenía `.avatar` más el del renglón, que es el que faltaba.   */

.sello {
  --sello-medida: 1.125rem;                 /* 18 px · la medida del renglón */
  /* Sin tinte —caso defensivo: hoy el servidor siempre manda uno— el sello
     se hunde en el panel con la tinta de la meta. Se deriva de --superficie-1
     como todos los demás: dentro de un panel sólo hay dos superficies.     */
  --sello-color: var(--txt-3);

  --sello-fondo: color-mix(in oklab, var(--sello-color) var(--tinte-fondo-pct),
                           var(--superficie-1));
  --sello-filo:  color-mix(in oklab, var(--sello-color) var(--tinte-filo-pct),
                           transparent);

  inline-size: var(--sello-medida);
  block-size: var(--sello-medida);
  flex: 0 0 auto;
  /* Flex y no grid: `place-items:center` en un grid coloca cada hijo en su
     propia fila, y el sello tiene que centrar tanto un nodo de texto como un
     <svg> sin que el resultado dependa de cuál de los dos sea.             */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  border-radius: var(--radio-1);
  background: var(--sello-fondo);
  border: 1px solid var(--sello-filo);
  color: var(--sello-color);

  font-family: var(--fuente-texto);
  font-size: calc(var(--sello-medida) * 0.5);
  font-weight: var(--peso-medio);
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
  overflow: hidden;
}

/* Una PERSONA es un disco; una INSTITUCIÓN es un cuadro. La distinción ya
   existía en el producto —`.avatar` redondo, `.avatar--sistema` cuadrado— y
   se hereda tal cual: no se inventa vocabulario, se le pone nombre al que
   había. Lo único que cambia es que ahora la regla está escrita y la decide
   el servidor, en vez de que cada plantilla ponga o quite `--sistema` a ojo. */
.sello--persona { border-radius: var(--radio-pleno); }
.sello--entidad { border-radius: var(--radio-1); }

/* La marca ocupa dos tercios del sello: el aire alrededor es lo que la hace
   leerse como marca y no como un icono suelto que se salió de su botón.   */
.sello > svg {
  inline-size: 66%;
  block-size: 66%;
  display: block;
}

/* Los cuatro tamaños. `--sello-medida` es lo único que cambia: el tipo y el
   dibujo se calculan solos. Los tres últimos son, al píxel, `.avatar`,
   `.avatar--grande` y `.avatar--ficha` de hoy — están declarados para que la
   integración pueda SUSTITUIRLOS, no para sumarse a ellos.                 */
.sello--renglon { --sello-medida: 1.125rem; }  /* 18 px · el registro        */
.sello--fila    { --sello-medida: 1.75rem;  }  /* 28 px · = .avatar          */
.sello--lectura { --sello-medida: 2.5rem;   }  /* 40 px · = .avatar--grande  */
.sello--ficha   { --sello-medida: 3.25rem;  }  /* 52 px · = .avatar--ficha   */

/* --- 2. LA RAMPA -----------------------------------------------------------
   Cinco tintes. El número lo elige `identidad.tinte()` en el servidor y llega
   como CLASE, no como `style="--tinte: …"`: así ningún color sale de
   tokens.css y la auditoría de literales de la SPEC §11.b sigue dando cero.

   El tinte 1 —la casa— es el más callado de la rampa (croma 0.030 contra
   0.055 del resto) porque es el que más se repite: 69 de los 76 sellos del
   buzón real. El tono más frecuente tiene que ser el más silencioso.      */
.sello--t1 { --sello-color: var(--tinte-1); }
.sello--t2 { --sello-color: var(--tinte-2); }
.sello--t3 { --sello-color: var(--tinte-3); }
.sello--t4 { --sello-color: var(--tinte-4); }
.sello--t5 { --sello-color: var(--tinte-5); }

/* --- 3. LA PISTA DEL REGISTRO ----------------------------------------------
   El sello NO va dentro de `.renglon__remitente`: va en su PROPIA PISTA de
   subgrid, la tercera. Si fuera hijo del remitente, los nombres de los
   renglones con sello arrancarían 26 px a la derecha de los que no lo llevan
   —el 59 % del buzón— y la promesa del registro («el remitente de un martes
   alinea con el de un jueves») se rompería justo donde más se nota.

   Y NO ENSANCHA NADA: los 18 px del sello más su hueco de 8 px salen de la
   pista FLEXIBLE del asunto, que en la primera línea del renglón plegado está
   vacía. El nombre conserva sus 9rem enteros.

   ►► CORRECCIÓN A LA PROPIA DIRECCIÓN DE ESTA TANDA. ◄◄
   El plan aprobado decía sacar los 26 px de `--col-remitente` (9rem →
   7.375rem) «para que la suma de las pistas no cambie». La suma no cambia de
   ninguna manera: `--col-asunto` es `minmax(0,1fr)` y absorbe lo que se le
   ponga delante. Se midieron LAS DOS VARIANTES y donde importa dan lo mismo:
   registro 1215 px y línea del asunto 1155 px con el nombre estrecho y con el
   nombre entero, porque el cuerpo arranca en la pista del nombre y lo que hay
   a su derecha le da igual. Lo único que cambiaba era el NOMBRE: a 7.375rem
   «Monitoreo Factible» pasaba a «Monitoreo Fac…» y «Servicio de respaldo» a
   «Servicio de r…», con 849 px de pista vacía justo al lado. Estrechar el
   nombre era pérdida pura. Se retiró.

   ►► SE APUNTA A `#registro`, Y SÓLO CUANDO HAY UN SELLO. ◄◄
   `.registro` es COMPARTIDO: contactos, búsqueda, calendario, cuarentena y
   los seis registros de administración declaran cada uno su propio juego de
   columnas. Redefinirlo en `.registro` a secas se los pisaba todos. Y
   `:has(.sello)` hace que un registro sin un solo sello —DMARC con sus 37 y
   TLS con sus 22, máquinas las 59— no entre siquiera en estas reglas: se
   queda byte por byte como estaba, comprobado midiendo las columnas contra el
   servidor sin este sistema. Por eso la pista no se declara «a cero»: una
   pista de 0 px sigue cobrando su `column-gap` de 8 px y esas dos carpetas
   dejarían de alinear igual que las demás.

   `--pista-sello` y `--pista-remitente` existen porque el juego de columnas
   cambia con el ancho del panel y un `grid-column: 3` en duro se equivoca en
   cuanto cae la casilla. Son índices, no medidas.                          */
#registro:has(.sello) {
  --pista-sello: 3;
  --pista-remitente: 4;
  --registro-columnas:
    var(--col-regla) var(--col-marca) var(--col-sello) var(--col-remitente)
    var(--col-asunto) var(--col-senales) var(--col-hora);
}
@container lista (min-width: 40rem) {          /* entra la pista de tamaño */
  #registro:has(.sello) {
    --registro-columnas:
      var(--col-regla) var(--col-marca) var(--col-sello) var(--col-remitente)
      var(--col-asunto) var(--col-senales) var(--col-cifra) var(--col-hora);
  }
}
@container lista (max-width: 26rem) {          /* caen las señales */
  #registro:has(.sello) {
    --registro-columnas:
      var(--col-regla) var(--col-marca) var(--col-sello) var(--col-remitente)
      var(--col-asunto) var(--col-hora);
  }
}
@container lista (max-width: 21rem) {          /* cae la casilla */
  #registro:has(.sello) {
    --pista-sello: 2;
    --pista-remitente: 3;
    --registro-columnas:
      var(--col-regla) var(--col-sello) var(--col-remitente)
      var(--col-asunto) var(--col-hora);
  }
}

/* El encabezado de columnas hereda el subgrid y tiene una celda por pista;
   con la pista nueva le sobra un hueco y todos sus rótulos se corrían uno a
   la izquierda —«Tamaño» y «Hora» acababan uno encima del otro contra el filo
   del panel—. Basta con anclar UNO: el rótulo del remitente. Desde ahí la
   colocación automática sigue sola y cuadra en los cuatro juegos de columnas,
   incluidos aquellos en los que la casilla o el tamaño están apagados.

   DEFECTO CORREGIDO, Y CONVIENE DEJARLO ESCRITO: la primera versión ponía la
   celda que falta con `::before { grid-column: 3 }`, que en un contenedor de
   rejilla SÍ es un elemento de rejilla. No funciona: un elemento con columna
   definida mueve el cursor de colocación automática hasta su columna, así que
   los rótulos siguientes empezaban a repartirse una pista más a la derecha en
   vez de rellenar el hueco.

   Se ancla por posición y no por clase (`:has(+ .col-asunto)` = «la celda
   justo antes de la del asunto») porque el rótulo del remitente es el único
   del membrete que no lleva clase propia, y porque así esta regla sobrevive a
   que se le cambie el texto o se le quite. Si el membrete entero se retira
   —el plan de reducción lo pide—, esta regla no encuentra a nadie y no deja
   rastro.                                                                   */
#registro:has(.sello) > .registro__cabecera > :has(+ .col-asunto) {
  grid-column: var(--pista-remitente);
}

/* --- 4. LA COLOCACIÓN ------------------------------------------------------
   ES EXPLÍCITA, y no por el orden del DOM. En el renglón plegado de
   escritorio app.css fija `grid-row: 1` en marca, remitente, señales, cifra y
   hora; un elemento con fila definida se coloca ANTES que uno totalmente
   automático, así que el sello —insertado antes del remitente en el HTML—
   acababa colocándose DESPUÉS, en la pista del asunto y centrado sobre el
   renglón. Con la pista escrita no hay nada que adivinar.

   El relleno vertical se neutraliza aquí: `.renglon > *` reparte
   `--renglon-aire` a todas las celdas y el sello tiene alto fijo, así que un
   relleno le comería la caja. Es la línea que permite que la celda y el
   componente sean UN SOLO NODO en vez de dos anidados.                     */
#registro:has(.sello) .renglon__sello {
  grid-column: var(--pista-sello);
  padding-block: 0;
  align-self: center;
}

@media (min-width: 50.0625rem) {
  /* EL SELLO VA EN LA LÍNEA DEL NOMBRE, no centrado contra la entrada de dos
     líneas. Se probaron las dos: centrado queda flotando entre el nombre y el
     asunto y se lee como si fuera del ASUNTO, que no tiene remitente. */
  #registro:has(.sello) .renglon:has(> .renglon__cuerpo) > .renglon__sello {
    grid-row: 1;
    align-self: start;
    margin-block-start: var(--renglon-aire);
  }
  /* El nombre pasa a la cuarta pista. Sin esto, el renglón de una máquina
     —que no trae sello— colocaría su nombre en la pista del sello y los dos
     tipos de renglón dejarían de alinear: exactamente lo que la pista propia
     existe para evitar. */
  #registro:has(.sello) .renglon:has(> .renglon__cuerpo) > .renglon__remitente {
    grid-column: var(--pista-remitente);
  }
  /* El cuerpo baja a la segunda línea empezando bajo el NOMBRE, no bajo el
     sello: así el bloque de texto conserva un solo filo izquierdo y el sello
     se queda solo en su margen. Cuesta 26 px de la línea del asunto, que es
     lo único que el sello cobra de verdad. La alternativa —arrancar bajo el
     sello— no cuesta píxeles pero deja el asunto colgando 26 px a la
     izquierda del nombre, y eso es un filo dentado. Se eligió pagar. */
  #registro:has(.sello) .renglon:has(> .renglon__cuerpo) > .renglon__cuerpo {
    grid-column: var(--pista-remitente) / -1;
  }
}

/* --- 5. EL TELÉFONO NO LLEVA SELLO -----------------------------------------
   A ≤50rem el renglón ya se plegó a tres pistas —margen · contenido · hora—
   y el nombre comparte línea con la hora: 18 px ahí se los quita al nombre,
   que es lo único que no puede faltar. Se restituye el juego de columnas del
   teléfono porque el de arriba, más específico, ganaría.                   */
@media (max-width: 50rem) {
  #registro:has(.sello) {
    --registro-columnas: var(--col-regla) minmax(0, 1fr) var(--col-hora);
  }
  #registro .renglon__sello { display: none; }
}

/* --- 6. EL PUENTE: EL AVATAR DEJA DE SER AZUL ------------------------------
   ESTO ES PROVISIONAL Y SE BORRA EN LA INTEGRACIÓN, junto con las 22 líneas
   de `app.css:327-348` y las 5 de `view-contactos.css:682` que este sistema
   sustituye. Está aquí porque la promesa del sello no es «un icono más»: es
   devolverle a la regla de margen el único azul del producto, y esa promesa
   se cumple hoy o no se cumple.

   Se acota con `:not(.avatar--sistema)` para no tocar la variante que ya era
   neutra: lo que sobra es el azul, no el objeto.                           */
.avatar:not(.avatar--sistema) {
  background: color-mix(in oklab, var(--txt-3) var(--tinte-fondo-pct),
                        var(--superficie-1));
  border-color: color-mix(in oklab, var(--txt-3) var(--tinte-filo-pct),
                          transparent);
  color: var(--txt-2);
}