/* Soporte: aspecto propio (franja ámbar) para no confundirlo con el panel de un cliente. Sin estilos en línea (CSP). */
body { margin: 0; background: var(--color-surface); color: var(--color-on-surface); font: 14px/1.5 var(--fuente-texto); }
h1, h2 { font-family: var(--fuente-titulos); margin: 0; }
h1 { font-size: 22px; } h2 { font-size: 18px; }
.hidden { display: none !important; }
.mut { color: var(--color-outline); font-size: 13px; }
.msg { font-size: 13px; margin-top: 8px; }
.pantalla-carga { position: fixed; inset: 0; z-index: 100; background: var(--color-primary-container); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pantalla-carga img { height: 40px; }
.pantalla-carga .giro { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--color-secondary-container); border-radius: 50%; animation: g .8s linear infinite; }
@keyframes g { to { transform: rotate(360deg); } }
#login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--color-primary-container); padding: 16px; }
#login .logo-acceso { height: 44px; }
#login .card { width: 100%; max-width: 380px; }
.col { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
input, select { font: inherit; min-height: 40px; padding: 6px 12px; border: 1px solid var(--color-outline); border-radius: var(--radio-sm); background: #fff; }
.barra { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--color-primary-container); color: #fff; border-bottom: 4px solid var(--color-secondary-container); }
.barra img { height: 28px; }
.etiqueta { background: var(--color-secondary-container); color: var(--color-on-ambar); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 2px 8px; border-radius: 4px; }
.grow { flex: 1; } .mut-barra { font-size: 13px; opacity: .8; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; }
.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.fila h1 { margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.emp { background: #fff; border: 1px solid var(--color-outline-variant); border-left: 6px solid var(--color-outline-variant); border-radius: var(--radio-md); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.emp.rojo { border-left-color: var(--color-error); } .emp.ambar { border-left-color: var(--color-secondary-container); } .emp.verde { border-left-color: var(--color-on-tertiary-container); }
.emp h3 { margin: 0; font-size: 16px; font-family: var(--fuente-titulos); }
.emp .id { font-size: 12px; color: var(--color-outline); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aviso-error { background: var(--color-error-container); color: var(--color-error); padding: 10px 14px; border-radius: var(--radio-sm); margin-bottom: 12px; }
.franja { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px; background: var(--color-secondary-fixed); color: var(--color-ambar-texto); font-weight: 600; border-bottom: 1px solid var(--color-secondary-container); }
.emp .acciones { margin-top: 6px; }
dialog { border: 0; border-radius: var(--radio-md); padding: 20px; width: min(440px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.botones { display: flex; gap: 8px; justify-content: flex-end; }
.err { color: var(--color-error); }