/* ===========================================================================
   ESTADOS
   Las tres dimensiones del §11.3 del documento maestro: transporte, evidencia
   y validación. Nunca se colapsan en un indicador único.
   El color jamás es la única señal: cada tono lleva forma de punto propia.
   =========================================================================== */

.pastilla{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 11px 0 9px;
	height: 26px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-pil);
	background: var(--superficie-2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
	font-size: 12.5px;
	font-weight: 650;
	color: var(--texto-suave);
	white-space: nowrap;
}

.pastilla-punto{
	position: relative;
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--tono-neutro);
	box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

/* Forma distinta por tono: legible también sin percepción de color. */
.pastilla--espera  .pastilla-punto{ background: var(--tono-espera);  border-radius: 2px; transform: rotate(45deg); }
.pastilla--proceso .pastilla-punto{ background: var(--tono-proceso); border-radius: 50%; }
.pastilla--listo   .pastilla-punto{ background: var(--tono-listo);   border-radius: 50%; }
.pastilla--alerta  .pastilla-punto{ background: var(--tono-alerta);  border-radius: 1px; clip-path: polygon(50% 0,100% 100%,0 100%); box-shadow:none; }
.pastilla--baja    .pastilla-punto{ background: transparent; border: 2px solid var(--tono-baja); box-shadow:none; }
.pastilla--neutro  .pastilla-punto{ background: var(--tono-neutro); }

.pastilla--espera{ color: var(--aviso);   border-color: rgba(var(--aviso-rgb), .30);   background: rgba(var(--aviso-rgb), .10); }
.pastilla--proceso{ color: var(--info);   border-color: rgba(var(--info-rgb), .30);    background: rgba(var(--info-rgb), .10); }
.pastilla--listo{  color: var(--exito);   border-color: rgba(var(--exito-rgb), .30);   background: rgba(var(--exito-rgb), .10); }
.pastilla--alerta{ color: var(--peligro); border-color: rgba(var(--peligro-rgb), .32); background: rgba(var(--peligro-rgb), .11); }
.pastilla--baja{   color: var(--texto-tenue); }

.pastilla--compacta{ height: 24px; padding: 0 9px 0 8px; font-size: 11.5px; gap: 6px; }

/* --- La tripleta: las tres dimensiones leídas juntas. --- */
.tripleta{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

/* En tablas densas se muestran solo los puntos; el texto vive en el title. */
.tripleta--puntos .pastilla{
	width: 24px;
	padding: 0;
	justify-content: center;
}
.tripleta--puntos .pastilla-texto{ display: none; }

/* --- Aviso en bloque. --- */
.aviso{
	position: relative;
	display: flex;
	gap: 13px;
	padding: 15px 17px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-md);
	background: var(--superficie);
	box-shadow: var(--sombra-1);
	font-size: 13.5px;
	color: var(--texto-suave);
	overflow: hidden;
}
.aviso::before{
	content:"";
	position:absolute;
	left:0; top:0; bottom:0;
	width: 3px;
	background: var(--tono-neutro);
}
.aviso .icono{ color: var(--texto-tenue); margin-top: 1px; }
.aviso b{ display:block; margin-bottom: 3px; }

.aviso--info{    background: rgba(var(--info-rgb), .07);    border-color: rgba(var(--info-rgb), .22); }
.aviso--info::before{ background: var(--info); }
.aviso--info .icono{ color: var(--info); }

.aviso--espera{  background: rgba(var(--aviso-rgb), .07);   border-color: rgba(var(--aviso-rgb), .22); }
.aviso--espera::before{ background: var(--aviso); }
.aviso--espera .icono{ color: var(--aviso); }

.aviso--peligro{ background: rgba(var(--peligro-rgb), .08); border-color: rgba(var(--peligro-rgb), .24); }
.aviso--peligro::before{ background: var(--peligro); }
.aviso--peligro .icono{ color: var(--peligro); }

/* --- Sello de corte: toda cifra del panel declara hasta cuándo sabe. --- */
.corte{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--texto-tenue);
}
.corte::before{
	content:"";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--exito);
	box-shadow: 0 0 0 3px rgba(var(--exito-rgb), .16);
	animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido{
	0%,100%{ opacity:1; }
	50%{ opacity:.35; }
}