/* ===================================================================
CTH MyDay · módulos. Los tokens, el armazón y los componentes base viven en base.css
(cargado antes). Aquí quedan los estilos propios de cada módulo.
=================================================================== */
/* ---------- Línea gráfica de la empresa (color y logo) ---------- */
.color-campo { display: flex; align-items: center; gap: .6rem; }
.color-campo .form-control { flex: 1; min-width: 0; }
/* El selector nativo de color trae relleno y borde propios en cada navegador; se recorta a
una muestra cuadrada para que no desentone al lado del campo de texto. */
.color-muestra {
width: 44px; height: 42px;
padding: 2px;
border: 1px solid var(--color-borde, var(--color-border));
border-radius: var(--radius-sm, 8px);
background: none;
cursor: pointer;
flex-shrink: 0;
}
.logo-campo { display: flex; align-items: flex-start; gap: 1rem; }
/* Recuadro de tamaño fijo: el logo de cada empresa llega con una proporción distinta y sin un
marco estable el formulario daría un salto cada vez que se elige un archivo. */
.logo-vista {
width: 96px; height: 72px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--color-borde, var(--color-border));
border-radius: var(--radius-sm, 8px);
background: #f7f9fc;
overflow: hidden;
}
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vacio { font-size: .8rem; color: var(--color-text-muted); }
.logo-acciones { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; min-width: 0; }
.logo-acciones input[type="file"] { font-size: .88rem; max-width: 100%; }
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.filtros .form-group { margin-bottom: 0; }
/* ---- Landing del portal PQRS: las tarjetas por las que entra la gente ---- */
.pqrs-tarjetas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1rem;
margin: 1.25rem 0;
}
/* Tarjetas blancas, sobrias: el color de cada canal va solo en el círculo del icono y en el
borde al pasar por encima. Antes cada tarjeta era un bloque pastel con marco blanco y el
conjunto parecía un juego infantil; un portal de reclamos tiene que verse serio. */
.pqrs-tarjeta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .55rem;
padding: 1.6rem 1.1rem 1.4rem;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface, #fff);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
cursor: pointer;
font-family: inherit;
transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.pqrs-tarjeta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
border-color: var(--borde, var(--color-primary));
}
/* El icono en un círculo con un tinte suave del color del canal. */
.pqrs-tarjeta .icono {
width: 68px; height: 68px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--tinte, var(--color-primary-light));
font-size: 2rem; line-height: 1;
margin-bottom: .2rem;
}
.pqrs-tarjeta .icono .icono-color { width: 40px; height: 40px; }
.pqrs-tarjetas > *:nth-child(6n+1) { --tinte: #e8edf9; --borde: #1e3a8a; }
.pqrs-tarjetas > *:nth-child(6n+2) { --tinte: #fff1d6; --borde: #c9860b; }
.pqrs-tarjetas > *:nth-child(6n+3) { --tinte: #e2f6e9; --borde: #17a34a; }
.pqrs-tarjetas > *:nth-child(6n+4) { --tinte: #eee8fb; --borde: #6d4fc4; }
.pqrs-tarjetas > *:nth-child(6n+5) { --tinte: #dff4f7; --borde: #0a8a9a; }
.pqrs-tarjetas > *:nth-child(6n+6) { --tinte: #f1f3f7; --borde: #475569; }
:root[data-theme="dark"] .pqrs-tarjeta { background: var(--color-surface-2); }
.pqrs-tarjeta .titulo { font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.pqrs-tarjeta .detalle { font-size: .88rem; color: var(--color-text-muted); line-height: 1.45; max-width: 26ch; }
/* La denuncia se distingue del resto: es un canal aparte y debe verse aparte. */
.pqrs-tarjeta.reservada { --tinte: #efe9fb; --borde: #52309a; border-style: dashed; }
.pqrs-tarjeta.reservada:hover { border-color: #52309a; }
/* Termómetro de satisfacción publicado en el landing */
.pqrs-termometro {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
justify-content: center;
margin: 1rem 0;
}
.pqrs-medidor { text-align: center; min-width: 160px; }
.pqrs-medidor .marca { font-size: 1.8rem; letter-spacing: .1rem; }
.pqrs-medidor .cara { font-size: 2.6rem; line-height: 1; }
.pqrs-medidor .nota { font-size: 1.9rem; font-weight: 700; color: var(--color-primary); }
.pqrs-medidor .rotulo { font-size: .85rem; color: var(--color-text-muted); }
/* Requisito OBLIGATORIO todavía sin cumplir (evidencia, nota de cierre): rojo con borde para
que nadie llegue al final de la tarea sin saberlo. Cumplido, el badge pasa al verde de
siempre. El amarillo "pendiente" que se usaba antes se confundía con el estado de la tarea. */
.badge-obligatorio {
background: var(--color-danger-bg);
color: var(--color-danger);
border: 1px solid var(--color-danger);
font-weight: 700;
}
/* Marca de campo obligatorio dentro de una etiqueta de formulario. */
.texto-obligatorio { color: var(--color-danger); font-weight: 700; }
/* Tarea que LLEGÓ de otro departamento: chip morado bien visible y fila teñida. Antes el
dato solo vivía como un badge chico en el detalle y nadie notaba que el trabajo venía de
fuera — que es exactamente lo que el equipo debe saber antes de abrirla. */
.badge-solicitud {
background: var(--sec-clientes);
color: #fff;
font-weight: 700;
}
.fila-solicitud > td { background: #f5f0ff; box-shadow: inset 3px 0 0 var(--sec-clientes); }
.fila-solicitud > td + td { box-shadow: none; }
.alerta-solicitud { background: #efe7ff; color: #4a2d85; border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--sec-clientes); }
/* Responsable de la tarea: quién la tiene se ve de un vistazo — un chip con sus iniciales y su
nombre. Y cuando NADIE la tiene, el chip rojo grita más que un "Sin asignar" en texto plano,
que era invisible entre las demás columnas. */
.responsable-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .12rem .6rem .12rem .15rem;
border-radius: 999px;
font-weight: 600;
font-size: .85rem;
background: var(--color-primary-light);
color: var(--color-primary-dark);
white-space: nowrap;
}
.responsable-inicial {
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .68rem;
font-weight: 700;
flex: none;
}
.responsable-chip.sin-asignar {
padding-left: .6rem;
background: var(--color-danger-bg);
color: var(--color-danger);
}
.responsable-chip.responsable-grande { font-size: .95rem; }
/* Código de la tarea (CTH-n del ticket o referencia corta del Id): monoespaciado y siempre
visible junto al título — es lo que se dicta por teléfono para ubicar UNA tarea concreta. */
.codigo-tarea {
display: inline-block;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: .78rem;
font-weight: 700;
padding: .05rem .45rem;
border-radius: 6px;
background: var(--color-primary-light);
color: var(--color-primary-dark);
white-space: nowrap;
}
/* Tarea creada hace poco: pequeño y pegado al título, para localizar lo nuevo de un vistazo.
Verde y parpadeando: es el único distintivo del listado que llama la atención a propósito,
para que lo recién llegado se encuentre sin leer fila por fila. */
.badge-nueva {
display: inline-block;
margin-left: .45rem;
padding: .12rem .55rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .3px;
background: var(--color-success);
color: #fff;
vertical-align: middle;
white-space: nowrap;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
animation: badge-nueva-parpadeo 1.1s ease-in-out infinite;
}
/* Parpadeo: el brillo se enciende y se apaga, y el fondo pasa de verde a verde claro. Nunca
desaparece del todo: tiene que poder leerse en cualquier instante. */
@keyframes badge-nueva-parpadeo {
0%, 100% { background: var(--color-success); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
50% { background: #4ade80; box-shadow: 0 0 10px 3px rgba(34, 197, 94, .75); }
}
/* Quien pidió menos movimiento en su sistema ve el verde fijo con brillo, sin parpadeo. */
@media (prefers-reduced-motion: reduce) {
.badge-nueva { animation: none; box-shadow: 0 0 6px 1px rgba(34, 197, 94, .6); }
}
@media print {
.badge-nueva { animation: none; box-shadow: none; }
}
.prioridad-baja { color: var(--color-text-muted); }
.prioridad-media { color: var(--color-info); font-weight: 600; }
.prioridad-alta { color: var(--color-warning); font-weight: 700; }
.prioridad-critica { color: var(--color-danger); font-weight: 800; }
/* Dirección del formulario público en el listado de departamentos. */
.url-publica { display: flex; align-items: center; gap: .5rem; }
.url-publica a { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; word-break: break-all; }
/* La dirección del portal PQRS, en grande y con marco: es lo que se copia y se reparte fuera. */
.url-publica-destacada {
flex-wrap: wrap; gap: .75rem;
padding: .9rem 1.1rem;
border: 2px solid var(--color-primary); border-radius: var(--radius);
background: var(--color-primary-light);
}
.url-publica-destacada a { font-size: 1.15rem; font-weight: 700; color: var(--color-primary-dark, var(--color-primary)); }
/* Quién despacha las PQRS: fichas con avatar, el dueño marcado, y la ✕ para quitar. */
.despachadores { display: flex; flex-wrap: wrap; gap: .5rem; }
.despachador {
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid var(--color-border); border-radius: 999px; padding: .3rem .75rem .3rem .35rem;
background: var(--color-surface);
}
.despachador.dueno { border-color: var(--color-primary); background: var(--color-primary-light); }
.despachador-nombre { display: grid; line-height: 1.15; font-size: .92rem; font-weight: 600; }
.despachador-nombre small { font-weight: 400; font-size: .75rem; }
.despachador-quitar { font-size: .9rem; padding: 0 .2rem; }
/* El dibujo de cada tarjeta del portal: el actual, los botones y el catálogo desplegable. */
.iconos-canales { display: grid; gap: .6rem; }
.icono-canal { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .6rem .8rem; display: grid; gap: .5rem; background: var(--color-surface); }
.icono-canal.abierto { border-color: var(--color-primary); }
.icono-canal-actual { display: flex; align-items: center; gap: .75rem; }
.icono-canal-actual > div { display: grid; line-height: 1.2; }
.icono-canal-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.icono-canal-acciones .btn { position: relative; overflow: hidden; cursor: pointer; }
.icono-catalogo { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .25rem; }
.icono-opcion {
width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--color-bg); cursor: pointer;
transition: transform var(--transicion), border-color var(--transicion);
}
.icono-opcion:hover { transform: scale(1.08); }
.icono-opcion.activo { border-color: var(--color-primary); background: var(--color-primary-light); }
.icono-propio { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); }
.pqrs-tarjeta .icono .icono-propio { width: 52px; height: 52px; }
/* Los avisos de la aplicación van arriba a la derecha; los de notificaciones siguen abajo. */
.toasts-zona.toasts-app { bottom: auto; top: calc(5rem + env(safe-area-inset-top, 0px)); }
.toasts-app .toast-aviso { cursor: default; }
/* ---------- Recorte del logo ---------- */
.modal-recorte { max-width: 560px; }
.recorte-lienzo {
display: flex; justify-content: center;
margin: .5rem 0 1rem;
/* El tablero de ajedrez deja ver la transparencia del PNG: sin él, un logo con fondo
transparente y otro con fondo blanco se ven idénticos al encuadrar. */
background-image:
linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%),
linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
border-radius: var(--radius-sm, 8px);
overflow: hidden;
}
.recorte-lienzo canvas {
display: block;
max-width: 100%;
cursor: grab;
touch-action: none; /* el arrastre es nuestro, no un desplazamiento de la página */
}
.recorte-lienzo canvas:active { cursor: grabbing; }
.recorte-controles { display: flex; align-items: center; gap: .8rem; }
.recorte-controles input[type="range"] { flex: 1; accent-color: var(--color-primary); }
.recorte-controles .form-label { margin: 0; white-space: nowrap; }
.password-temporal {
font-family: Consolas, "Courier New", monospace;
font-size: 1.2rem;
font-weight: 700;
background: var(--color-surface);
border: 2px dashed var(--color-success);
border-radius: var(--radius-sm);
padding: .6rem 1rem;
display: inline-block;
margin: .45rem 0;
user-select: all;
}
/* ---------------- Pasos de una tarea ---------------- */
.lista-pasos { list-style: none; margin: 0; padding: 0; }
.paso-item {
display: flex; align-items: flex-start; gap: .8rem;
padding: .8rem .5rem;
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: background var(--transicion);
font-size: 1.02rem;
}
.paso-item:hover { background: var(--color-primary-light); }
.paso-item:last-child { border-bottom: none; }
.paso-item input[type="checkbox"] {
margin-top: .25rem; width: 22px; height: 22px; cursor: pointer; flex-shrink: 0;
accent-color: var(--color-success);
transition: transform var(--transicion);
}
.paso-item input[type="checkbox"]:hover { transform: scale(1.15); }
.paso-texto.completado { text-decoration: line-through; color: var(--color-text-muted); }
.paso-meta { font-size: .84rem; color: var(--color-text-muted); }
/* Desglose personal dentro del paso a paso */
.desglose-separado { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--color-border); }
.desglose-titulo { margin: 0; font-size: .95rem; color: var(--color-text-muted); font-weight: 700; }
.paso-cuerpo { flex: 1; min-width: 0; }
.paso-acciones { margin-left: auto; white-space: nowrap; display: flex; gap: .35rem; opacity: 0; transition: opacity .15s; }
.paso-item:hover .paso-acciones { opacity: 1; }
.agregar-paso { display: flex; gap: .5rem; margin-top: .6rem; }
.agregar-paso .form-control { flex: 1; }
.paso-editor { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.paso-editor .paso-numero { width: 30px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: .95rem; font-weight: 700; flex-shrink: 0; }
.progreso-barra { height: 10px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.progreso-barra > div {
height: 100%;
background: #16a862;
border-radius: 999px;
transition: width .6s var(--ease-out);
}
/* ---------------- Comentarios ---------------- */
.comentario {
padding: 1rem 1.2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: .75rem;
background: var(--color-surface-2);
animation: aparecer var(--dur-3) var(--ease-out) backwards;
font-size: 1rem;
}
.comentario-cabecera { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--color-text-muted); margin-bottom: .4rem; font-weight: 600; }
/* ---------------- Instrucciones de suscripción al calendario ---------------- */
.pasos-calendario { margin: .5rem 0 .75rem 1.25rem; padding: 0; font-size: .95rem; }
.pasos-calendario > li { margin-bottom: .5rem; }
.pasos-calendario ul { margin: .35rem 0 .35rem 1.1rem; padding: 0; color: var(--color-text-muted); }
.pasos-calendario ul li { margin-bottom: .2rem; }
/* ---------------- Línea de tiempo de una tarea ---------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* La línea vertical que une los puntos. */
.timeline::before {
content: "";
position: absolute;
left: 15px; top: 8px; bottom: 8px;
width: 2px;
background: var(--color-border);
}
.timeline-item {
display: flex; gap: .9rem; align-items: flex-start;
position: relative;
padding: .55rem 0;
animation: aparecer var(--dur-3) var(--ease-out) backwards;
}
.timeline-punto {
width: 32px; height: 32px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--color-border);
font-size: .95rem;
z-index: 1;
}
.timeline-creacion { border-color: var(--color-info); }
.timeline-asignacion { border-color: var(--color-primary); }
.timeline-paso { border-color: var(--color-success); }
.timeline-comentario { border-color: var(--color-text-muted); }
.timeline-revision { border-color: var(--color-warning); }
.timeline-completada, .timeline-aprobada { border-color: var(--color-success); background: var(--color-success-bg); }
.timeline-devuelta { border-color: var(--color-danger); background: var(--color-danger-bg); }
.timeline-pospuesta { border-color: var(--color-warning); background: var(--color-warning-bg); }
.timeline-contenido { flex: 1; min-width: 0; padding-top: .2rem; }
.timeline-cabecera {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-size: .95rem;
}
.timeline-fecha { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; }
.timeline-detalle {
font-size: .9rem;
color: var(--color-text-muted);
margin-top: .15rem;
white-space: pre-wrap;
word-break: break-word;
}
/* ---------------- Notificaciones ---------------- */
.notif-wrapper { position: relative; }
.notif-boton {
position: relative;
background: none; border: none; cursor: pointer;
font-size: 1.5rem;
color: var(--color-text);
padding: .5rem .6rem;
border-radius: 50%;
transition: background var(--transicion), transform var(--transicion);
}
.notif-boton:hover { background: var(--color-primary-light); transform: scale(1.08); }
.notif-contador {
position: absolute; top: 0; right: 0;
background: var(--color-danger); color: #fff;
font-size: .7rem; font-weight: 800;
border-radius: 999px; padding: 2px 6px;
animation: latido 1.6s ease-in-out infinite;
}
.notif-panel {
position: absolute; right: 0; top: 3.2rem;
width: min(380px, calc(100vw - 1.5rem)); max-height: 460px; overflow-y: auto;
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--elev-4);
z-index: 50;
animation: escalar var(--dur-2) var(--ease-out) both;
transform-origin: top right;
}
/* Queda por debajo del panel (50) y por encima del resto: un toque fuera cierra. Vive dentro
del contexto de apilamiento de la barra, así que tapa también la campana — y ese toque
también cierra, que es lo que se espera. */
.notif-velo { position: fixed; inset: 0; z-index: 40; background: transparent; }
.notif-cabecera {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .75rem 1.25rem;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
/* "Marcar todas" + la ✕, juntas a la derecha de la cabecera. La cabecera es sticky, así que la
acción queda a la vista aunque la lista se desplace. */
.notif-acciones { display: flex; align-items: center; gap: .5rem; }
.notif-acciones .btn-link { font-size: .82rem; white-space: nowrap; }
.notif-cerrar {
background: none; border: none; cursor: pointer;
font-size: 1.1rem; line-height: 1; color: var(--color-text-muted);
border-radius: 50%;
/* 40px de lado: objetivo táctil cómodo en el teléfono, que es donde hacía falta. */
min-width: 40px; height: 40px;
transition: background var(--transicion), color var(--transicion);
}
.notif-cerrar:hover { background: var(--color-primary-light); color: var(--color-text); }
.notif-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); font-size: .95rem; cursor: pointer; transition: background var(--transicion); }
.notif-item:hover { background: var(--color-primary-light); }
.notif-item.no-leida { background: var(--color-primary-light); }
.notif-item .notif-titulo { font-weight: 700; margin-bottom: .2rem; }
.notif-item .notif-fecha { font-size: .78rem; color: var(--color-text-muted); margin-top: .3rem; }
.notif-vacio { padding: 1.5rem; text-align: center; color: var(--color-text-muted); font-size: .95rem; }
/* En el móvil el panel de la campana se fija al viewport, no al botón: anclado al botón con
380px de ancho se salía de la pantalla y quedaba cortado. dvh y no vh: en el navegador del
teléfono la barra de direcciones come parte del alto y con vh el final del panel quedaba
detrás de ella. */
@media (max-width: 700px) {
.notif-panel {
position: fixed;
left: .75rem;
right: .75rem;
/* El 76px fijo era el fallo: instalada como app en un iPhone con muesca, la barra crece
con env(safe-area-inset-top) y el panel arrancaba DENTRO de ella, tapando la campana.
Como el panel gana en z-index dentro del contexto de la barra, no había forma de
volver a tocarla y el panel se quedaba abierto ocupando la pantalla entera.
Misma fórmula que los paneles de cuentas y bitácora: justo bajo la franja de sección. */
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 10px);
width: auto;
max-height: calc(100dvh - var(--topbar-height) - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
}
/* ---------------- Imágenes adjuntas ---------------- */
/* El input de archivo real queda oculto; el botón visible es la etiqueta que lo envuelve. */
.adjunto-input { display: none; }
.adjunto-miniatura {
display: block;
max-width: 220px;
max-height: 160px;
margin-top: .6rem;
border-radius: var(--radius-sm);
box-shadow: var(--elev-1);
cursor: zoom-in;
transition: transform var(--transicion), box-shadow var(--transicion);
}
.adjunto-miniatura:hover { transform: scale(1.05); box-shadow: var(--elev-3); }
.imagen-ampliada {
max-width: 92vw;
max-height: 88vh;
border-radius: var(--radius);
box-shadow: var(--elev-4);
cursor: zoom-out;
animation: escalar var(--dur-2) var(--ease-out) both;
}
/* ---------------- Inicio de sesión ----------------
Dos hojas: a la izquierda la marca sobre el escritorio (pestañas de sección como
geometría), a la derecha el formulario. En el teléfono, solo el formulario. */
.login-shell {
min-height: 100dvh;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
background: var(--color-bg);
}
.login-lado {
position: relative;
overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
padding: 2.5rem 3rem;
/* Azul de marca fijo: en oscuro el primario se aclara y el blanco dejaría de leerse. */
background: #1e3a8a;
color: #fff;
}
/* Dos discos de color sólido, como calcomanías sobre la hoja. */
.login-lado::before {
content: "";
position: absolute; width: 210px; height: 210px; right: -60px; top: -70px;
border-radius: 50%; background: #ffc02e;
}
.login-lado::after {
content: "";
position: absolute; width: 150px; height: 150px; left: -55px; bottom: 130px;
border-radius: 50%; background: #17a34a;
}
.login-marca { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.login-marca .marca-sello { background: #22c55e; color: #fff; box-shadow: none; }
.login-frase { position: relative; z-index: 1; max-width: 26ch; }
.login-frase h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin-bottom: .75rem; }
.login-frase p { color: rgba(255, 255, 255, .8); font-size: 1rem; margin: 0; }
/* La agenda: cinco pestañas de color que se despliegan al cargar, geometría pura. */
.login-agenda { position: relative; z-index: 1; display: grid; gap: .5rem; max-width: 380px; margin: 2rem 0; }
.login-agenda span {
display: flex; align-items: center; gap: .6rem;
background: rgba(255, 255, 255, .96);
color: var(--color-text);
border-radius: 10px;
padding: .6rem .8rem;
font-size: .85rem; font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
animation: aparecer-lateral .5s var(--ease-out) both;
transform-origin: left center;
}
:root[data-theme="dark"] .login-agenda span { color: #1c2330; }
.login-agenda span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tab); flex: none; }
.login-agenda span { border-radius: 999px; }
.login-agenda span:nth-child(1) { --tab: var(--sec-mi); animation-delay: .1s; }
.login-agenda span:nth-child(2) { --tab: var(--sec-trabajo); animation-delay: .18s; margin-left: 1.2rem; }
.login-agenda span:nth-child(3) { --tab: var(--sec-clientes); animation-delay: .26s; margin-left: 2.4rem; }
.login-agenda span:nth-child(4) { --tab: var(--sec-rrhh); animation-delay: .34s; margin-left: 1.2rem; }
.login-agenda span:nth-child(5) { --tab: var(--sec-supervision); animation-delay: .42s; }
.login-agenda small { margin-left: auto; color: var(--color-text-muted); font-weight: 500; }
.login-pie { position: relative; z-index: 1; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.login-card {
background: var(--color-surface);
border-radius: 20px;
box-shadow: var(--elev-3);
padding: 2.25rem 2.25rem 1.75rem;
width: 100%; max-width: 420px;
animation: aparecer var(--dur-3) var(--ease-out) both;
}
:root[data-theme="dark"] .login-card { box-shadow: var(--elev-3), inset 0 0 0 1px var(--color-border); }
.login-brand { margin-bottom: 1.5rem; }
.login-sello { width: 46px; height: 46px; border-radius: 14px; margin-bottom: .9rem; }
.login-sello .icono { width: 24px; height: 24px; }
.login-brand h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.login-card .btn { width: 100%; min-height: 46px; font-size: 1rem; }
.campo-clave { display: flex; gap: .4rem; align-items: stretch; }
.campo-clave .form-control { flex: 1; }
.campo-clave .btn { width: 44px; min-height: 40px; padding: 0; }
.login-olvide {
display: block;
text-align: center;
margin-top: 1rem;
padding: .35rem;
font-size: .9rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
.login-olvide:hover { text-decoration: underline; }
.login-ayuda { margin: 0 0 1.25rem; padding-left: 1.1rem; font-size: .9rem; color: var(--color-text-muted); }
.login-ayuda li { margin-bottom: .45rem; }
.login-card .validation-message { color: var(--color-danger); font-size: .85rem; margin-top: .25rem; }
@media (max-width: 900px) {
.login-shell { grid-template-columns: 1fr; }
.login-lado { display: none; }
.login-form { min-height: 100dvh; align-items: flex-start; padding-top: 3rem; }
.login-card { padding: 1.75rem 1.4rem 1.4rem; box-shadow: var(--elev-2); }
}
/* ---------------- Landing pública ---------------- */
.landing { background: #e4f3fd; }
.landing-nav {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 2.5rem;
z-index: 10;
}
.landing-marca {
display: inline-flex; align-items: center; gap: .6rem;
font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -0.4px;
}
.landing-marca-icono {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: #22c55e;
color: #fff; font-size: 1.3rem; font-weight: 700;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(34, 197, 94, .45);
}
.landing-marca-azul { color: #ffc02e; }
.landing-hero {
position: relative;
overflow: hidden;
min-height: 92vh;
display: flex; align-items: center; justify-content: center;
text-align: center;
background: #1e3a8a;
padding: 7rem 1.5rem 9rem;
}
.landing-hero-contenido { position: relative; z-index: 1; max-width: 860px; animation: aparecer .7s var(--ease-out) both; }
.landing-hero h1 { color: #fff; font-size: 2.9rem; line-height: 1.15; letter-spacing: -1px; margin-bottom: 1.2rem; }
.landing-sub { color: rgba(255, 255, 255, .86); font-size: 1.2rem; line-height: 1.7; max-width: 700px; margin: 0 auto 2.2rem; }
.landing-acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-grande { padding: .95rem 2.2rem; font-size: 1.05rem; }
.btn-claro { background: #ffc02e; color: #000; border-color: #ffc02e; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.btn-claro:hover { filter: none; background: #f0b21a; }
.btn-transparente { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.btn-transparente:hover { background: rgba(255, 255, 255, .18); filter: none; }
.landing-chips { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
.landing-chips span {
background: rgba(255, 255, 255, .16);
color: #fff;
border-radius: 999px;
padding: .45rem 1.1rem;
font-size: .92rem;
font-weight: 600;
}
.landing-seccion { max-width: 1100px; margin: 0 auto; padding: 4.5rem 1.5rem; }
.landing-seccion h2 { text-align: center; font-size: 2rem; letter-spacing: -0.6px; margin-bottom: 2.5rem; }
.landing-alterna { max-width: none; background: var(--color-surface); }
.landing-alterna > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.landing-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.landing-func {
background: var(--color-surface);
border-radius: 24px;
padding: 2rem 1.75rem;
box-shadow: var(--elev-1);
transition: transform var(--transicion), box-shadow var(--transicion);
}
.landing-func:hover { transform: translateY(-6px); box-shadow: var(--elev-3); }
.landing-func-icono { display: inline-flex; padding: 14px; border-radius: 50%; background: var(--tinte-func, #dfe6f8); margin-bottom: .9rem; }
.landing-func-icono .icono-color { width: 42px; height: 42px; }
/* Cada teja toma un color del arcoíris, en ciclo. */
.landing-grid > *:nth-child(4n+1) { --tinte-func: #dfe6f8; }
.landing-grid > *:nth-child(4n+2) { --tinte-func: #ffeecc; }
.landing-grid > *:nth-child(4n+3) { --tinte-func: #dcfae4; }
.landing-grid > *:nth-child(4n+4) { --tinte-func: #eae2ff; }
.landing-func h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.landing-func p { color: var(--color-text-muted); font-size: .98rem; line-height: 1.65; margin: 0; }
.landing-rol { text-align: center; }
.landing-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; padding: 0 1.5rem; }
.landing-paso { text-align: center; padding: 1rem; }
.landing-paso-numero {
width: 56px; height: 56px;
margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
background: #ffc02e;
color: #000; font-size: 1.5rem; font-weight: 800;
border-radius: 50%;
box-shadow: 0 6px 0 #e0a300;
}
.landing-paso h3 { font-size: 1.08rem; }
.landing-paso p { color: var(--color-text-muted); font-size: .95rem; line-height: 1.6; }
.landing-cta {
background: #1e3a8a;
text-align: center;
padding: 5rem 1.5rem;
}
.landing-cta h2 { color: #fff; font-size: 2rem; letter-spacing: -0.6px; }
.landing-cta p { color: rgba(255, 255, 255, .88); font-size: 1.1rem; margin-bottom: 2rem; }
.landing-footer { background: #162c6b; text-align: center; padding: 2.5rem 1.5rem; }
.landing-footer .landing-marca { justify-content: center; margin-bottom: .75rem; font-size: 1.1rem; }
.landing-footer p { color: #c3d0f0; font-size: .88rem; margin: 0; }
@media (max-width: 700px) {
.landing-hero h1 { font-size: 2rem; }
.landing-nav { padding: 1rem 1.25rem; }
.landing-hero { min-height: 80vh; padding-top: 6rem; }
}
/* ---------------- Aviso de notificaciones push ---------------- */
.push-banner {
display: flex;
align-items: center;
gap: 1rem;
background: var(--color-primary-light);
border: 1px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: .9rem 1.25rem;
margin-bottom: 1.25rem;
}
.push-banner-icono { font-size: 1.6rem; line-height: 1; }
.push-banner-texto { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.push-banner-texto strong { color: var(--color-primary-dark); }
.push-banner-texto span { font-size: .92rem; color: var(--color-text-muted); line-height: 1.5; }
.push-banner-error { color: var(--color-danger) !important; }
.push-banner-acciones { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
@media (max-width: 700px) {
.push-banner { flex-wrap: wrap; }
.push-banner-acciones { width: 100%; justify-content: flex-end; }
}
/* ---------------- Informe de desempeño ---------------- */
.informe-hoja { max-width: 900px; margin: 0 auto; }
.informe-encabezado {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 3px solid var(--color-primary);
padding-bottom: .75rem;
margin-bottom: 1.25rem;
}
.informe-marca { font-size: 1.35rem; font-weight: 700; color: var(--color-text); }
.informe-marca span { color: var(--color-primary); }
.informe-tipo { font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); }
.informe-meta { text-align: right; font-size: .85rem; color: var(--color-text-muted); }
.informe-seccion { margin-bottom: 1.25rem; }
.informe-seccion h3 { margin-bottom: .75rem; }
.informe-persona { display: flex; gap: 1.25rem; align-items: center; }
.informe-persona h2 { margin-bottom: .2rem; }
.informe-persona p { margin: 0; font-size: .92rem; }
.informe-avatar {
width: 64px; height: 64px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--color-primary); color: #fff;
font-size: 1.5rem; font-weight: 700; border-radius: 50%;
}
.informe-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
.informe-kpi-principal { border: 2px solid var(--color-primary); }
.informe-kpi-principal .kpi-valor { color: var(--color-primary); }
.informe-cifras { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.informe-cifras div { display: flex; flex-direction: column; }
.informe-cifras strong { font-size: 1.6rem; color: var(--color-text); }
.informe-cifras span { font-size: .85rem; color: var(--color-text-muted); }
.informe-pie {
text-align: center;
font-size: .8rem;
color: var(--color-text-muted);
margin-top: 1.5rem;
}
/* La traza de auditoría trae detalles largos y sin espacios (rutas, correos, JSON):
sin reparto fijo de columnas y permiso para quebrar, la tabla se sale del card.
El min-width evita que en pantallas angostas las columnas se aplasten: ahí entra
el scroll horizontal del contenedor .tabla-scroll. */
table.tabla-traza { table-layout: fixed; min-width: 640px; font-size: .9rem; }
table.tabla-traza th, table.tabla-traza td { padding: .7rem .6rem; }
table.tabla-traza th:nth-child(1) { width: 108px; } /* la fecha parte en dos líneas: día y hora */
table.tabla-traza th:nth-child(2) { width: 18%; }
table.tabla-traza th:nth-child(3) { width: 16%; }
table.tabla-traza th:nth-child(5) { width: 118px; } /* una IPv4 completa sin quebrar */
table.tabla-traza td:nth-child(2),
table.tabla-traza td:nth-child(4),
table.tabla-traza td:nth-child(5) { overflow-wrap: anywhere; }
/* ---------------- Impresión (guardar como PDF) ---------------- */
@media print {
.sidebar, .topbar, .push-banner, .no-print, #blazor-error-ui { display: none !important; }
/* Sin soltar la altura y el overflow, el armazón de ventana fija recortaría el informe
a la primera hoja: todo lo que quedara por debajo del alto de pantalla no se imprime. */
.app-shell, .main-area { display: block !important; height: auto !important; overflow: visible !important; }
.content { padding: 0 !important; height: auto !important; overflow: visible !important; }
body, .content { background: var(--color-surface) !important; }
.card { box-shadow: none !important; border: 1px solid var(--color-border); break-inside: avoid; }
.informe-hoja { max-width: none; }
.informe-kpis { grid-template-columns: repeat(4, 1fr); }
/* En papel no hay scroll: el contenido debe quedar visible y quebrar dentro de la hoja. */
.tabla-scroll { overflow-x: visible !important; }
a { text-decoration: none; color: inherit; }
}
/* FocusOnNavigate enfoca el h1 al cambiar de página (bueno para lectores de pantalla);
el recuadro de foco visible ahí solo confunde. */
h1:focus { outline: none; }
/* ---------------- Chat interno ---------------- */
.chat-layout {
display: flex;
padding: 0;
overflow: hidden;
height: calc(100vh - 220px);
min-height: 420px;
}
.chat-lista {
width: 300px;
flex-shrink: 0;
border-right: 1px solid var(--color-border);
overflow-y: auto;
}
.chat-lista-cabecera { padding: .9rem; border-bottom: 1px solid var(--color-border); }
.chat-vacio-lista { padding: 1rem; font-size: .9rem; }
.chat-conversacion {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem .9rem;
cursor: pointer;
border-bottom: 1px solid var(--color-border);
}
.chat-conversacion:hover { background: var(--color-bg); }
.chat-conversacion.activa { background: var(--color-primary-light); }
.chat-conv-avatar {
width: 40px; height: 40px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--color-primary); color: #fff;
font-size: .9rem; font-weight: 700; border-radius: 50%;
}
.chat-conv-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-conv-texto small {
color: var(--color-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-badge {
background: var(--color-danger); color: #fff;
font-size: .75rem; font-weight: 700;
border-radius: 999px; padding: .15rem .5rem;
}
.chat-hilo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-hilo-cabecera { padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.chat-hilo .empty-state { margin: auto; }
.chat-mensajes {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.chat-burbuja {
max-width: 70%;
align-self: flex-start;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px 12px 12px 4px;
padding: .6rem .9rem;
}
.chat-burbuja.mia {
align-self: flex-end;
background: var(--color-primary-light);
border-color: var(--color-primary);
border-radius: 12px 12px 4px 12px;
}
.chat-burbuja p { margin: 0; font-size: .95rem; white-space: pre-wrap; word-break: break-word; }
.chat-burbuja small { color: var(--color-text-muted); font-size: .72rem; }
.chat-envio {
display: flex;
gap: .75rem;
padding: .9rem 1.25rem;
border-top: 1px solid var(--color-border);
}
.chat-envio input { flex: 1; }
.chat-hilo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.chat-hilo-aviso { margin: auto; text-align: center; font-size: .9rem; }
.chat-hilo-error { margin: 0 1.25rem; }
.chat-burbuja-autor { display: block; font-size: .75rem; font-weight: 700; color: var(--color-primary); margin-bottom: .15rem; }
.chat-conv-avatar.grupo { background: var(--color-text-muted); font-size: 1.1rem; }
.chat-lista-cabecera { display: flex; flex-direction: column; gap: .6rem; }
.chat-nuevo-grupo { align-self: flex-start; }
.chat-seleccion { max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius); padding: .5rem; }
.chat-seleccion-fila {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .4rem .3rem; font-size: .95rem;
}
.chat-seleccion-fila input { margin-right: .5rem; }
@media (max-width: 900px) {
.chat-layout { flex-direction: column; height: auto; }
.chat-lista { width: 100%; max-height: 240px; border-right: none; border-bottom: 1px solid var(--color-border); }
.chat-mensajes { min-height: 300px; }
}
/* ---------------- Burbujas de chat (ChatBurbujas.razor) ----------------
Capa que flota sobre toda la aplicación. Va anclada al viewport y no al armazón: se monta en
MainLayout para que la conversación siga abierta al navegar entre páginas.
Por debajo del velo de los diálogos (100) a propósito: un modal sí debe taparlo todo. */
.chat-capa {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 70;
display: flex;
align-items: flex-end;
gap: .75rem;
/* La capa no intercepta clics; solo sus hijos. Sin esto, la franja invisible de la derecha
se comía los clics de la página que hay debajo. */
pointer-events: none;
}
.chat-capa > * { pointer-events: auto; }
.chat-cabezas { display: flex; flex-direction: column-reverse; gap: .6rem; }
.chat-cabeza {
position: relative;
width: 52px; height: 52px;
border: none; border-radius: 50%; cursor: pointer;
background: var(--color-primary); color: #fff;
font-weight: 700;
box-shadow: var(--elev-4);
transition: transform var(--transicion);
}
.chat-cabeza:hover { transform: scale(1.08); }
.chat-cabeza-iniciales { font-size: .95rem; }
.chat-cabeza-badge {
position: absolute; top: -2px; right: -2px;
background: var(--color-danger); color: #fff;
font-size: .7rem; font-weight: 800;
border-radius: 999px; padding: 2px 6px;
}
.chat-ventana {
width: 320px; height: 420px;
display: flex; flex-direction: column;
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--elev-4);
overflow: hidden;
animation: escalar var(--dur-2) var(--ease-out) both;
transform-origin: bottom right;
}
.chat-ventana-cabecera {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: .5rem .5rem .5rem .9rem;
background: var(--color-primary); color: #fff;
}
.chat-ventana-titulo {
flex: 1; min-width: 0; text-align: left;
background: none; border: none; cursor: pointer;
color: #fff; font-weight: 700; font-size: .95rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-ventana-acciones { display: flex; gap: .15rem; }
.chat-ventana-boton {
background: none; border: none; cursor: pointer;
color: #fff; font-size: 1rem; line-height: 1;
/* 36px: objetivo táctil, no un icono de 12px imposible de acertar con el pulgar. */
min-width: 36px; height: 36px; border-radius: 50%;
}
.chat-ventana-boton:hover { background: rgba(255, 255, 255, .2); }
.chat-ventana .chat-mensajes { padding: .75rem; gap: .4rem; }
.chat-ventana .chat-burbuja { max-width: 85%; }
.chat-ventana .chat-envio { padding: .6rem .75rem; gap: .5rem; }
/* En el teléfono no caben ventanitas: la conversación abre a pantalla completa, como Messenger.
dvh y zonas seguras por lo mismo que el panel de notificaciones — con vh y un top fijo, la
barra del navegador y la muesca dejaban el final del panel (y su salida) fuera de alcance. */
@media (max-width: 700px) {
.chat-capa {
right: .5rem;
bottom: calc(.5rem + env(safe-area-inset-bottom));
}
.chat-ventana {
position: fixed;
inset: 0;
top: env(safe-area-inset-top);
width: auto; height: auto;
padding-bottom: env(safe-area-inset-bottom);
border-radius: 0;
}
.chat-ventana-cabecera { padding: .75rem .5rem .75rem 1rem; }
.chat-ventana .chat-burbuja { max-width: 80%; }
}
/* ---------------- Mi calendario ---------------- */
.cal-controles { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cal-vistas, .cal-navegacion { display: flex; gap: .35rem; }
.cal-titulo { margin-bottom: 1rem; font-size: 1.15rem; color: var(--color-text-muted); font-weight: 600; }
/* Colores por estado/prioridad de la tarea, compartidos por las tres vistas */
.cal-pendiente { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); }
.cal-urgente { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-danger); }
.cal-enprogreso { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-warning); }
.cal-completada { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-success); opacity: .75; }
.cal-vencida { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-danger); background: var(--color-danger-bg) !important; }
.cal-cancelada { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-border); opacity: .55; }
/* ---- Vista semana ---- */
.cal-semana {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: .6rem;
align-items: start;
}
.cal-sem-dia {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: .6rem;
min-height: 180px;
}
.cal-sem-dia.hoy { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }
.cal-sem-cabecera {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px solid var(--color-border);
padding-bottom: .4rem; margin-bottom: .5rem;
}
.cal-sem-nombre { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); }
.cal-sem-numero { font-size: 1.15rem; font-weight: 700; }
.cal-sem-dia.hoy .cal-sem-numero { color: var(--color-primary); }
.cal-tarea {
background: var(--color-bg);
border-radius: 6px;
padding: .45rem .6rem;
margin-bottom: .4rem;
cursor: pointer;
display: flex; flex-direction: column; gap: .1rem;
}
.cal-tarea:hover { filter: brightness(.96); }
.cal-tarea strong { font-size: .82rem; line-height: 1.3; }
.cal-tarea small { font-size: .72rem; color: var(--color-text-muted); }
/* ---- Vista mes ---- */
.cal-mes-card { padding: 1rem; }
.cal-mes-cabeceras {
display: grid; grid-template-columns: repeat(7, 1fr);
font-size: .78rem; text-transform: uppercase; letter-spacing: .5px;
color: var(--color-text-muted); text-align: center;
padding-bottom: .5rem;
}
.cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal-mes-dia {
border: 1px solid var(--color-border);
border-radius: 8px;
min-height: 92px;
padding: .35rem;
overflow: hidden;
}
.cal-mes-dia { cursor: pointer; transition: background .12s; }
.cal-mes-dia:hover { background: var(--color-primary-light); }
.cal-mes-dia.fuera { opacity: .4; background: var(--color-bg); }
.cal-mes-dia.hoy { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }
.cal-mes-numero { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.cal-mes-dia.hoy .cal-mes-numero { color: var(--color-primary); }
.cal-chip {
background: var(--color-bg);
font-size: .72rem;
border-radius: 4px;
padding: .15rem .4rem;
margin-bottom: .2rem;
cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip:hover { filter: brightness(.95); }
.cal-mas { color: var(--color-primary); cursor: pointer; font-size: .72rem; }
/* El diálogo con todo un día: cada cosa es un enlace que se abre en otra pestaña. */
.cal-dia-abrible { cursor: pointer; }
.cal-dia-abrible:hover .cal-sem-numero { color: var(--color-primary); }
.cal-dia-ayuda { font-size: .85rem; margin-bottom: .75rem; }
.cal-dia-seccion { font-size: .85rem; margin: .9rem 0 .4rem; color: var(--color-text-muted); }
.cal-dia-item { text-decoration: none; color: var(--color-text); position: relative; padding-right: 1.6rem; }
a.cal-dia-item::after { content: "↗"; position: absolute; right: .6rem; top: .45rem; font-size: .8rem; opacity: .5; }
a.cal-dia-item:hover::after { opacity: 1; }
a.cal-dia-item strong { font-size: .88rem; }
/* Una cita no es una tarea: tiene hora fija y alguien esperando al otro lado. El borde de la
izquierda la separa de las tareas del mismo día sin tener que leerla. */
.cal-cita {
background: var(--color-primary-light);
color: var(--color-primary-dark);
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary);
font-weight: 600;
}
/* ---- Vista año ---- */
.cal-anio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1rem;
}
.cal-anio-mes { cursor: pointer; padding: .9rem; }
.cal-anio-mes:hover { border-color: var(--color-primary); }
.cal-anio-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.cal-anio-dias {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px; text-align: center; font-size: .7rem;
}
.cal-anio-inicial { color: var(--color-text-muted); font-weight: 600; }
.cal-anio-dia { border-radius: 4px; padding: .15rem 0; color: var(--color-text-muted); }
.cal-anio-dia.con-tareas { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; }
.cal-anio-dia.hoy { outline: 2px solid var(--color-primary); }
@media (max-width: 900px) {
.cal-semana { grid-template-columns: 1fr; }
.cal-sem-dia { min-height: auto; }
.cal-mes-dia { min-height: 64px; }
}
/* ---------------- Carrera de avance ---------------- */
.carrera-pista { display: flex; flex-direction: column; gap: .35rem; }
.carrera-carril {
display: grid;
grid-template-columns: 220px 1fr 260px;
align-items: center;
gap: 1rem;
padding: .55rem .35rem;
border-radius: var(--radius-sm);
}
.carrera-carril:nth-child(odd) { background: var(--color-bg); }
.carrera-carril.rezagado { background: var(--color-danger-bg); }
.carrera-carril.sin-tareas { opacity: .55; }
.carrera-info { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.carrera-posicion { font-size: 1.1rem; width: 2rem; text-align: center; flex-shrink: 0; }
.carrera-nombre { display: flex; flex-direction: column; min-width: 0; }
.carrera-nombre strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrera-nombre small { color: var(--color-text-muted); }
.carrera-via {
position: relative;
height: 30px;
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: 999px;
}
.carrera-relleno {
position: absolute; top: 0; left: 0; bottom: 0;
background: var(--color-primary-light);
border-radius: 999px;
transition: width 1.2s cubic-bezier(.25, .8, .35, 1);
}
.carrera-marcador {
position: absolute; top: 50%;
transform: translate(-60%, -50%);
font-size: 1.25rem;
transition: left 1.2s cubic-bezier(.25, .8, .35, 1);
z-index: 1;
}
.carrera-meta {
position: absolute; right: .5rem; top: 50%;
transform: translateY(-50%);
opacity: .6;
}
.carrera-datos {
display: flex; align-items: center; gap: .6rem;
font-size: .85rem; color: var(--color-text-muted);
flex-wrap: wrap;
}
.carrera-datos strong { font-size: 1.05rem; color: var(--color-text); }
/* "(3 entregas)" dentro del chip del reloj: acompaña al dato sin competir con él. */
.carrera-datos .chip small { font-weight: 500; opacity: .8; }
@media (max-width: 900px) {
.carrera-carril { grid-template-columns: 1fr; gap: .4rem; }
}
/* ---------------- Emoji de estado del dashboard ---------------- */
.animo-card {
display: flex;
align-items: center;
gap: 1.5rem;
cursor: pointer;
user-select: none;
}
.animo-emoji { font-size: 4.2rem; line-height: 1; display: inline-block; flex-shrink: 0; }
.animo-burbuja {
position: relative;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: .8rem 1.1rem;
flex: 1;
}
.animo-burbuja::before {
content: "";
position: absolute;
left: -8px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 14px; height: 14px;
background: var(--color-bg);
border-left: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.animo-burbuja strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; }
.animo-burbuja p { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
/* Un recordatorio al calendario del celular: la fila de botones del diálogo. */
.cal-recordatorio-celular { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
/* El enlace de "ver cuáles son": la burbuja se abre con un clic y enseña las tareas del ánimo. */
.animo-ver { display: inline-block; margin-top: .45rem; font-weight: 600; color: var(--color-primary); font-size: .9rem; }
.animo-card.animo-abierto .animo-burbuja { border-color: var(--color-primary); }
/* Un ánimo, una forma de moverse */
.animo-feliz { animation: animo-rebote 2.2s ease-in-out infinite; }
.animo-celebrando { animation: animo-fiesta 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
.animo-relajado { animation: animo-flotar 3.5s ease-in-out infinite; }
.animo-preocupado { animation: animo-temblor 1.6s ease-in-out infinite; }
.animo-salto { animation: animo-brinco .8s cubic-bezier(.28, .84, .42, 1) !important; }
@keyframes animo-rebote {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes animo-fiesta {
0%, 100% { transform: rotate(0) scale(1); }
25% { transform: rotate(-8deg) scale(1.08); }
50% { transform: rotate(0) scale(1); }
75% { transform: rotate(8deg) scale(1.08); }
}
@keyframes animo-flotar {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes animo-temblor {
0%, 100% { transform: translateX(0); }
10%, 30%, 50% { transform: translateX(-3px) rotate(-3deg); }
20%, 40%, 60% { transform: translateX(3px) rotate(3deg); }
70% { transform: translateX(0); }
}
@keyframes animo-brinco {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-26px) scale(1.15) rotate(-10deg); }
55% { transform: translateY(0) scale(.95); }
70% { transform: translateY(-10px) scale(1.05) rotate(6deg); }
100% { transform: translateY(0) scale(1); }
}
@media (max-width: 700px) {
.animo-card { flex-direction: column; text-align: center; gap: .75rem; }
.animo-burbuja::before { display: none; }
}
/* ---------------- Radar de tareas del supervisor ---------------- */
.radar-columnas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.radar-columna h4 {
display: flex; align-items: center; gap: .5rem;
margin-bottom: .6rem; font-size: .95rem;
}
.radar-item {
display: flex; flex-direction: column; gap: .1rem;
padding: .5rem .7rem;
margin-bottom: .4rem;
background: var(--color-bg);
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary);
border-radius: 6px;
text-decoration: none;
color: inherit;
}
.radar-item:hover { filter: brightness(.96); }
.radar-item strong { font-size: .88rem; }
.radar-item small { color: var(--color-text-muted); font-size: .76rem; }
.radar-item.radar-critico { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
/* ---------- Formulario público de departamento ----------
Vive fuera de la aplicación: lo abre gente sin cuenta, desde un enlace, a menudo en el móvil.
Por eso es una columna centrada y estrecha, sin barra lateral ni nada que invite a navegar. */
.publico-shell {
max-width: 640px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.publico-card {
background: var(--color-surface, #fff);
border: 1px solid var(--color-border, #e3e7f0);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.publico-cabecera {
text-align: center;
margin-bottom: 1.5rem;
}
.publico-cabecera h1 { margin: .25rem 0 0; }
.publico-logo {
max-height: 56px;
max-width: 100%;
margin-bottom: .5rem;
}
/* Sustituto del logo cuando la empresa todavía no subió uno: su inicial en un círculo con el
color de la marca. Una empresa sin logo tiene que verse cuidada igual, no a medio hacer —y un
hueco vacío en una página pública se lee como que algo falló. */
.publico-inicial {
width: 56px; height: 56px;
margin: 0 auto .5rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 1.7rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
}
/* El enlace del portal es lo único que quien reservó debe llevarse: perderlo es perder el acceso
a su cita. Se le da el tratamiento del código de seguimiento — monoespaciada y con espacio para
respirar—, y se parte por donde haga falta para que no desborde en un teléfono. */
.publico-enlace {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .9rem;
background: var(--color-surface, #fff);
border: 1px dashed var(--color-border, var(--color-border-strong));
border-radius: 6px;
padding: .6rem .75rem;
word-break: break-all;
}
.publico-mensaje {
margin-bottom: 1.5rem;
white-space: pre-line;
}
/* El código es lo único que el usuario debe llevarse de esta pantalla: se le da el tamaño y el
espaciado de algo que se copia a mano, con monoespaciada para no confundir caracteres. */
.publico-codigo {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: .12em;
text-align: center;
margin: .75rem 0;
user-select: all;
}
.publico-ticket {
border-top: 1px solid var(--borde, #e2e8f0);
padding-top: 1rem;
}
@media (max-width: 600px) {
.publico-card { padding: 1.25rem; }
.publico-codigo { font-size: 1.25rem; letter-spacing: .08em; }
}
/* ---- Etiquetas de tareas: chips con el color del catálogo del departamento ---- */
.etiqueta-chip {
display: inline-block;
padding: 0.1rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
line-height: 1.5;
vertical-align: middle;
}
.etiqueta-punto {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
vertical-align: middle;
}
/* ---- Carrera: marcador general, celebraciones y modo TV ---- */
.carrera-marcadores {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.marcador-kpi {
flex: 1;
min-width: 140px;
background: var(--color-surface);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
padding: 0.6rem 1rem;
text-align: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.marcador-kpi span { font-size: 1.4rem; }
.marcador-kpi strong {
display: block;
font-size: 1.9rem;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.marcador-kpi small { color: var(--color-text-muted); }
.marcador-kpi.kpi-ok strong { color: #16a34a; }
.marcador-kpi.kpi-mal strong { color: #dc2626; }
.marcador-kpi.kpi-latido {
border-color: #f59e0b;
animation: kpi-latido 2.2s ease-in-out infinite;
}
@keyframes kpi-latido {
0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
}
.carrera-banner {
background: #16a34a;
color: #ffffff;
font-size: 1.25rem;
font-weight: 700;
text-align: center;
padding: 0.7rem 1rem;
border-radius: 14px;
margin-bottom: 0.6rem;
animation: banner-entra var(--dur-3) var(--ease-out);
}
@keyframes banner-entra {
from { transform: translateY(-8px) scale(0.97); opacity: 0; }
to { transform: none; opacity: 1; }
}
.carrera-ticker {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 0.8rem;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.carrera-carril.celebrando {
animation: carril-celebra 1.1s ease 4;
border-radius: 10px;
}
@keyframes carril-celebra {
0%, 100% { background: transparent; }
50% { background: rgba(34, 197, 94, 0.16); }
}
.carrera-carril.lider .carrera-nombre strong { color: var(--color-warning); }
.carrera-frase {
text-align: center;
color: var(--color-text-muted);
font-style: italic;
margin-top: 0.9rem;
}
.carrera-reloj {
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 1.1rem;
}
/* El modo TV cubre toda la ventana (tapa el menú lateral) y agranda todo lo importante para
leerse desde el otro lado de la oficina. */
.carrera-tv {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--color-surface-2);
overflow-y: auto;
padding: 1.2rem 2rem 2rem;
font-size: 1.15rem;
}
.carrera-tv h1 { font-size: 2.3rem; }
.carrera-tv .marcador-kpi strong { font-size: 3rem; }
.carrera-tv .marcador-kpi span { font-size: 1.9rem; }
.carrera-tv .marcador-kpi small { font-size: 1rem; }
.carrera-tv .carrera-nombre strong { font-size: 1.45rem; }
.carrera-tv .carrera-posicion { font-size: 1.8rem; }
.carrera-tv .carrera-marcador { font-size: 1.7rem; }
.carrera-tv .carrera-datos { font-size: 1.05rem; }
.carrera-tv .carrera-banner { font-size: 1.8rem; padding: 1rem; }
.carrera-tv .carrera-frase { font-size: 1.3rem; }
.carrera-tv .carrera-ticker { font-size: 1rem; }
/* ---- Etiquetas: versión sólida y protagonista ---- */
.etiqueta-chip {
font-size: 0.85rem;
font-weight: 700;
padding: 0.22rem 0.75rem;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.etiqueta-chip.grande {
font-size: 1rem;
padding: 0.3rem 1rem;
}
/* ---- Meta de la tarea: estado, prioridad y etiqueta como una fila de pastillas ---- */
.tarea-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.4rem;
}
.meta-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.3px;
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: var(--elev-1);
}
.meta-pill.aviso {
background: var(--color-warning-bg);
color: var(--color-warning);
border-color: transparent;
}
.meta-punto {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: currentColor;
flex: none;
}
.btn-etiquetar {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.28rem 0.85rem;
border-radius: 999px;
border: 1.5px dashed var(--color-text-muted);
background: transparent;
color: var(--color-text-muted);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.btn-etiquetar:hover {
border-style: solid;
border-color: var(--color-primary);
color: var(--color-primary-dark);
background: var(--color-primary-light);
}
/* ---- Editor de etiqueta: elegir del catálogo o crear una nueva sin salir ---- */
.etiqueta-editor-cabecera {
display: flex;
align-items: baseline;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 0.9rem;
}
.etiqueta-editor-cabecera h3 { margin: 0; }
.etiqueta-opciones {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.etiqueta-chip.seleccionable {
background: transparent;
border: 2px solid;
cursor: pointer;
box-shadow: none;
transition: transform var(--transicion), box-shadow var(--transicion);
}
.etiqueta-chip.seleccionable:hover {
transform: translateY(-1px);
box-shadow: var(--elev-1);
}
.etiqueta-crear {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
padding: 0.75rem 0.85rem;
background: var(--color-bg);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
margin-bottom: 1rem;
}
.etiqueta-crear .form-control {
flex: 1;
min-width: 200px;
max-width: 320px;
}
/* El input de color nativo se esconde dentro de un círculo de color, como una paleta */
.etiqueta-color {
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
position: relative;
overflow: hidden;
cursor: pointer;
flex: none;
border: 2px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-border), var(--elev-1);
}
.etiqueta-color input {
position: absolute;
inset: -30%;
width: 160%;
height: 160%;
opacity: 0;
cursor: pointer;
}
.etiqueta-editor-acciones {
display: flex;
gap: 0.6rem;
}
/* ---- Toasts de notificación: avisos flotantes con personalidad, imposibles de no ver ---- */
.toasts-zona {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 0.7rem;
max-width: min(420px, calc(100vw - 2rem));
}
.toast-aviso {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 0.7rem;
color: #ffffff;
border-radius: 16px;
padding: 0.85rem 1rem 1rem;
cursor: pointer;
animation: toast-entra .4s var(--ease-out);
transition: transform 0.15s ease;
}
.toast-aviso:hover { transform: scale(1.02); }
.toast-aviso.saliendo {
animation: toast-sale .22s var(--ease-out) forwards;
}
@keyframes toast-entra {
from { transform: translateX(120%) rotate(3deg); opacity: 0; }
60% { transform: translateX(-6px) rotate(-1deg); opacity: 1; }
to { transform: none; opacity: 1; }
}
@keyframes toast-sale {
to { transform: translateX(120%) rotate(3deg); opacity: 0; }
}
/* El icono vive en una burbuja y rebota un par de veces para atrapar el ojo. */
.toast-icono {
font-size: 1.6rem;
line-height: 1;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
width: 2.6rem;
height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: toast-rebota 0.9s ease 2;
}
@keyframes toast-rebota {
0%, 100% { transform: translateY(0); }
35% { transform: translateY(-7px) scale(1.12); }
60% { transform: translateY(2px); }
}
.toast-cuerpo { flex: 1; min-width: 0; }
/* La frase juguetona, en mayúsculas pequeñas, como titular de tabloide. */
.toast-grito {
display: block;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
margin-bottom: 0.1rem;
}
.toast-cuerpo strong {
display: block;
font-size: 1rem;
line-height: 1.25;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toast-mensaje {
font-size: 0.85rem;
opacity: 0.92;
margin-top: 0.15rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.toast-cerrar {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
color: #ffffff;
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
flex-shrink: 0;
}
.toast-cerrar:hover { background: rgba(255, 255, 255, 0.4); }
/* La barrita de vida: cuando se agota, el toast se despide solo. */
.toast-progreso {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background: rgba(255, 255, 255, 0.75);
border-radius: 0 4px 4px 0;
animation: toast-vida 8s linear forwards;
}
@keyframes toast-vida {
from { width: 100%; }
to { width: 0; }
}
/* El color grita de qué va el aviso antes de leer una sola palabra. */
.toast-aviso.toast-verde {
background: #15803d;
box-shadow: 0 10px 30px rgba(22, 163, 74, 0.45);
}
.toast-aviso.toast-rojo {
background: #b91c1c;
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.5);
animation: toast-entra .4s var(--ease-out), toast-tiembla .5s ease .45s 2;
}
/* Las urgentes se sacuden al llegar: una alarma que no se mueve no parece alarma. */
@keyframes toast-tiembla {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.toast-aviso.toast-ambar {
background: var(--color-warning);
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.45);
}
.toast-aviso.toast-azul {
background: #1d4ed8;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
}
.toast-aviso.toast-gris {
background: #334155;
box-shadow: 0 10px 30px rgba(51, 65, 85, 0.45);
}
/* ---------------- Valoración pública (estrellas) ---------------- */
.valorar-envoltura { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.valorar-tarjeta { max-width: 480px; width: 100%; text-align: center; padding: 2rem; }
.estrellas-selector, .estrellas-fijas { display: flex; justify-content: center; gap: .35rem; margin: 1rem 0 .25rem; }
.estrellas-selector .estrella, .estrellas-fijas .estrella {
background: none; border: none; padding: 0;
font-size: 2.6rem; line-height: 1;
color: var(--color-border);
transition: color .12s, transform .12s;
}
.estrellas-selector .estrella { cursor: pointer; }
.estrellas-selector .estrella:hover { transform: scale(1.15); }
.estrellas-selector .estrella.activa, .estrellas-fijas .estrella.activa { color: #f5a623; }
.estrellas-texto { text-align: center; min-height: 1.2em; }
/* ---------------- Servicios por valorar (dentro de la plataforma) ----------------
La valoración del cliente interno: una ficha amarillo pastel que se queda en Inicio, en Mi día
y en la tarea hasta que el solicitante vota. Cada servicio es una hoja blanca dentro de la
ficha, para que las estrellas se lean: a la izquierda qué se pidió y quién atendió, a la
derecha las estrellas; el comentario y el botón salen debajo solo al marcar una. */
.valoraciones-pendientes { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-accent); background: var(--color-warning-bg); }
.valoracion-fila {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.25rem; align-items: center;
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
padding: .75rem 1rem;
}
.valoracion-fila + .valoracion-fila { margin-top: .5rem; }
.valoracion-info { display: grid; gap: .15rem; min-width: 0; }
/* El enlace es texto corrido (código + título), no una fila de fichas: en bloque, para que un
título largo parta por palabras y el código no se rompa por la mitad en el teléfono. */
.valoracion-info .btn-link { display: block; text-align: left; overflow-wrap: anywhere; }
.valoracion-info .btn-link strong { white-space: nowrap; }
.valoracion-nota { color: var(--color-text-muted); font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.valoracion-voto { display: grid; justify-items: end; gap: .1rem; }
.valoracion-estrellas.estrellas-selector, .valoracion-estrellas.estrellas-fijas { margin: 0; gap: .2rem; justify-content: flex-end; }
/* La estrella vacía tiene que verse como algo que se puede tocar: el borde fuerte basta sobre
la hoja blanca, pero en oscuro se pierde y sube al gris del texto suave. */
.valoracion-estrellas { --estrella-vacia: var(--color-border-strong); }
:root[data-theme="dark"] .valoracion-estrellas { --estrella-vacia: var(--color-text-soft); }
.valoracion-estrellas .estrella { font-size: 2rem; color: var(--estrella-vacia); }
.valoracion-estrellas .estrella.activa { color: var(--color-accent); }
.valoracion-estrellas .estrella:disabled { cursor: default; opacity: .6; }
.valoracion-texto { color: var(--color-text-muted); min-height: 1.2em; }
.valoracion-envio { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.valoracion-envio textarea { flex: 1; min-width: 220px; }
.valoracion-error { grid-column: 1 / -1; margin: 0; }
.valoracion-gracias { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; color: var(--color-success); font-weight: 600; }
@media (max-width: 640px) {
.valoracion-fila { grid-template-columns: 1fr; }
.valoracion-voto { justify-items: start; }
.valoracion-estrellas.estrellas-selector, .valoracion-estrellas.estrellas-fijas { justify-content: flex-start; }
.valoracion-gracias { justify-content: flex-start; }
/* Objetivo táctil de 44 px por estrella. */
.valoracion-estrellas.estrellas-selector .estrella { font-size: 2.3rem; min-width: 44px; min-height: 44px; }
.valoracion-envio .btn { width: 100%; }
}
/* ---------------- Presencia (en línea · ausente · última vez) ----------------
Un punto de color y su texto, como en un programa de mensajería. Verde: usando la plataforma
ahora. Amarillo: estuvo hace poco. Gris: desconectado. Rojo: una semana o más sin entrar. Aro
vacío: nunca ha entrado. El anillo del color de la hoja lo separa de un avatar o de un nombre. */
.presencia { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .88rem; vertical-align: middle; }
.presencia-punto { width: .68rem; height: .68rem; border-radius: 50%; flex: none; background: var(--presencia); box-shadow: 0 0 0 2px var(--color-surface); }
.presencia-enlinea { --presencia: var(--color-success); }
.presencia-ausente { --presencia: var(--color-accent); }
.presencia-desconectado { --presencia: var(--color-border-strong); color: var(--color-text-muted); }
.presencia-inactivo { --presencia: var(--color-danger); color: var(--color-danger); font-weight: 600; }
.presencia-nunca { color: var(--color-text-soft); }
.presencia-nunca .presencia-punto { background: transparent; box-shadow: inset 0 0 0 2px var(--color-border-strong); }
/* En oscuro el borde fuerte se pierde sobre la hoja: el gris sube al del texto suave. */
:root[data-theme="dark"] .presencia-desconectado { --presencia: var(--color-text-soft); }
:root[data-theme="dark"] .presencia-nunca .presencia-punto { box-shadow: inset 0 0 0 2px var(--color-text-soft); }
.presencia-enlinea .presencia-texto { color: var(--color-success); font-weight: 600; }
.chat-conv-texto .presencia { margin-left: .25rem; }
/* Solo para lectores de pantalla: el dato existe, pero no ocupa sitio. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Opciones excluyentes en fila (de quién se espera): la misma pastilla del selector de tema. */
.segmentos { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.segmento {
flex: 1 1 auto; border: none; background: transparent; color: var(--color-text-muted);
font-family: inherit; font-size: .88rem; font-weight: 700; padding: .45rem .8rem; min-height: 38px;
border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: background var(--transicion), color var(--transicion), transform var(--dur-1) var(--ease-out);
}
.segmento.activo { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--elev-1); }
.segmento:active { transform: scale(.97); }
/* ---------------- Matriz de riesgo ----------------
Probabilidad × impacto en un mapa de calor de 5 × 5. Los cuatro niveles toman su color de los
estados del sistema —verde, amarillo, naranja, rojo— y cada pieza (celda, tarjeta de nivel,
insignia, tramo de barra) lo recibe por la variable --nivel: así el oscuro lo sigue solo. Todo
lo que se puede tocar es un botón de verdad: se alcanza con el teclado y se anuncia pulsado. */
.riesgo-bajo { --nivel: var(--riesgo-bajo, var(--color-success)); }
.riesgo-moderado { --nivel: var(--riesgo-moderado, var(--color-accent)); }
.riesgo-alto { --nivel: var(--riesgo-alto, var(--color-warning)); }
.riesgo-critico { --nivel: var(--riesgo-critico, var(--color-danger)); }
.riesgo-filtros { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: .25rem 1.5rem; align-items: start; }
.riesgo-filtros .form-group { margin-bottom: .5rem; min-width: 0; }
.riesgo-filtro-situacion { grid-column: 1 / -1; }
.riesgo-filtros .segmentos { display: inline-flex; }
.riesgo-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.riesgo-chip {
display: inline-flex; align-items: center; gap: .35rem;
border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
font-family: inherit; font-size: .84rem; font-weight: 600; padding: .3rem .75rem; min-height: 34px;
border-radius: 999px; cursor: pointer;
transition: background var(--transicion), color var(--transicion), transform var(--dur-1) var(--ease-out);
}
.riesgo-chip strong { font-variant-numeric: tabular-nums; }
.riesgo-chip.activo { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.riesgo-chip:active { transform: scale(.97); }
/* Las cuatro tarjetas de nivel: son botones, así que se les quita lo de botón. */
.riesgo-niveles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-card.riesgo-nivel { --kpi: var(--nivel); font-family: inherit; text-align: left; width: 100%; color: inherit; }
.kpi-card.riesgo-nivel .kpi-valor { color: var(--color-text); }
.riesgo-nivel-rango { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: .76rem; }
.riesgo-tablero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.riesgo-paneles { display: grid; gap: 1rem; min-width: 0; }
.riesgo-matriz-card { min-width: 0; }
/* La rejilla: el rótulo vertical ocupa la primera columna a lo largo de las cinco filas; cada
fila es su rótulo más cinco celdas; debajo, los rótulos de columna y el nombre del eje. */
.riesgo-matriz { display: grid; grid-template-columns: 1.4rem minmax(2rem, auto) repeat(5, minmax(0, 1fr)); gap: .4rem; align-items: stretch; }
.riesgo-eje-y { grid-column: 1; grid-row: 1 / span 5; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.riesgo-eje-x { grid-column: 3 / span 5; text-align: center; }
.riesgo-eje-x, .riesgo-eje-y { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.riesgo-esquina { grid-column: 1 / span 2; }
.riesgo-fila-rotulo, .riesgo-columna-rotulo { display: flex; gap: .35rem; font-size: .78rem; line-height: 1.2; color: var(--color-text-muted); min-width: 0; }
.riesgo-fila-rotulo { align-items: center; justify-content: flex-end; text-align: right; padding-right: .2rem; }
.riesgo-columna-rotulo { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.riesgo-fila-rotulo strong, .riesgo-columna-rotulo strong { color: var(--color-text); font-size: .9rem; }
.riesgo-celda {
position: relative; display: grid; place-items: center; min-height: 3.6rem; aspect-ratio: 3 / 2; width: 100%;
border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; color: var(--color-text);
background: color-mix(in srgb, var(--nivel) 30%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 55%, transparent);
transition: background var(--transicion), box-shadow var(--transicion), transform var(--dur-1) var(--ease-out);
}
.riesgo-celda-cuenta { font-family: var(--font-titulo); font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.riesgo-celda-puntos { position: absolute; right: .4rem; bottom: .25rem; font-size: .66rem; font-weight: 700; color: var(--color-text-muted); }
.riesgo-celda.vacia { cursor: default; background: color-mix(in srgb, var(--nivel) 11%, var(--color-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 22%, transparent); }
.riesgo-celda.vacia .riesgo-celda-cuenta { font-size: 1rem; color: var(--color-text-soft); }
.riesgo-celda.seleccionada { background: color-mix(in srgb, var(--nivel) 62%, var(--color-surface)); box-shadow: 0 0 0 3px var(--color-primary), var(--elev-2); }
.riesgo-celda:not(.vacia):active { transform: scale(.97); }
.riesgo-celda:focus-visible, .riesgo-barra-fila:focus-visible, .riesgo-chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.riesgo-celda:not(.vacia):hover { background: color-mix(in srgb, var(--nivel) 46%, var(--color-surface)); }
.riesgo-barra-fila:hover { background: var(--color-surface-2); }
.riesgo-fila:hover > td { background: var(--color-surface-2); }
}
.riesgo-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .9rem; font-size: .82rem; }
.riesgo-leyenda-item { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.riesgo-leyenda-item small { color: var(--color-text-muted); font-weight: 400; }
.riesgo-muestra { width: .85rem; height: .85rem; border-radius: 4px; background: color-mix(in srgb, var(--nivel) 55%, var(--color-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 70%, transparent); }
.riesgo-leyenda-nota { color: var(--color-text-muted); flex-basis: 100%; }
/* Los tres paneles (por qué, dónde, quién): filas que filtran, con su barra. */
.riesgo-barras { display: grid; gap: .15rem; }
.riesgo-barra-fila {
display: grid; grid-template-columns: minmax(0, 12rem) minmax(3rem, 1fr) 2.2rem; gap: .6rem; align-items: center; width: 100%;
border: none; background: none; color: inherit; font-family: inherit; font-size: .88rem; text-align: left;
padding: .4rem .5rem; min-height: 36px; border-radius: var(--radius-xs); cursor: pointer;
transition: background var(--transicion);
}
.riesgo-barra-fila strong { text-align: right; font-variant-numeric: tabular-nums; }
.riesgo-barra-fila.activa { background: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); }
.riesgo-barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riesgo-barra { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: var(--color-bg); }
.riesgo-barra > span { height: 100%; background: var(--color-primary); border-radius: 999px; }
.riesgo-barra-apilada > span { background: var(--nivel); border-radius: 0; min-width: 0; }
/* ---- Por departamento: una tarjeta por área (TarjetasRiesgoDepartamento) ----
La tarjeta toma el color del nivel más grave que tiene (la franja de la izquierda); dentro, una
minimatriz de 5 × 5 que se lee de un vistazo, las cuatro cuentas, lo que más pesa y la línea de
las últimas semanas. Es un botón entero: tocarla abre la matriz de esa área. */
.riesgo-vistas { display: inline-flex; }
.riesgo-deptos-resumen { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-bottom: .8rem; color: var(--color-text-muted); font-size: .9rem; }
.riesgo-deptos-resumen strong { color: var(--color-text); }
.riesgo-deptos-alerta { color: var(--color-danger); font-weight: 700; }
.riesgo-deptos-leyenda { display: inline-flex; flex-wrap: wrap; gap: .2rem .7rem; margin-left: auto; font-size: .8rem; }
.riesgo-deptos-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.riesgo-deptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.riesgo-depto {
display: grid; gap: .6rem; width: 100%; margin: 0; text-align: left; font-family: inherit; color: inherit; cursor: pointer;
border: 1px solid var(--color-border); box-shadow: inset 4px 0 0 var(--nivel), var(--elev-1);
transition: transform var(--dur-1) var(--ease-out), box-shadow var(--transicion);
}
/* En la rejilla, el ".card + .card" de base.css las descuadraba: cada una arranca arriba. */
.riesgo-deptos > .card.riesgo-depto { margin: 0; }
.riesgo-depto:active { transform: scale(.99); }
.riesgo-depto:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
.riesgo-depto:hover { box-shadow: inset 4px 0 0 var(--nivel), var(--elev-2); }
}
.riesgo-depto-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.riesgo-depto-nombre { font-family: var(--font-titulo); font-weight: 800; font-size: 1.05rem; }
.riesgo-depto-gente { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .8rem; color: var(--color-text-muted); }
.riesgo-depto-cuerpo { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; align-items: center; }
.riesgo-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.riesgo-mini-celda {
display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px;
font-size: .62rem; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--nivel) 38%, var(--color-surface));
}
.riesgo-mini-celda.vacia { background: color-mix(in srgb, var(--nivel) 10%, var(--color-surface)); }
.riesgo-depto-cifras { display: grid; gap: .3rem; min-width: 0; }
.riesgo-depto-niveles { display: flex; gap: .3rem; }
.riesgo-cuenta {
min-width: 2rem; padding: .15rem .45rem; border-radius: 999px; text-align: center;
font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--nivel) 26%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 60%, transparent);
}
.riesgo-depto-dato { font-size: .8rem; color: var(--color-text-muted); }
.riesgo-depto-dato strong { color: var(--color-text); }
.riesgo-depto-tranquilo { font-weight: 700; color: var(--color-success); }
.riesgo-depto-tendencia { display: flex; align-items: center; gap: .6rem; padding-top: .5rem; border-top: 1px dashed var(--color-border); }
.riesgo-sparkline { width: 7.5rem; height: 1.75rem; flex: none; overflow: visible; }
.riesgo-sparkline polyline { fill: none; stroke: var(--color-text-muted); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.riesgo-sparkline circle { fill: var(--nivel); }
.riesgo-sube { color: var(--color-danger) !important; font-weight: 700; }
.riesgo-baja { color: var(--color-success) !important; font-weight: 700; }
/* La ficha del área abierta: quién la dirige y hacia dónde va, encima de sus filtros. */
.riesgo-ficha-depto { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.riesgo-ficha-depto-texto { flex: 1 1 18rem; min-width: 0; }
.riesgo-ficha-depto-texto h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.riesgo-ficha-depto-cifra { display: grid; justify-items: end; text-align: right; line-height: 1.2; }
.riesgo-ficha-depto-cifra strong { font-family: var(--font-titulo); font-size: 1.8rem; }
.riesgo-ficha-depto-cifra span, .riesgo-ficha-depto-cifra small { font-size: .82rem; color: var(--color-text-muted); }
@media (max-width: 560px) {
.riesgo-ficha-depto-cifra { justify-items: start; text-align: left; }
.riesgo-depto-cuerpo { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
/* La lista de detalle: cada fila abre su tarea, su mapa o su caso. */
.riesgo-fila { cursor: pointer; }
.riesgo-tabla td { vertical-align: top; }
.riesgo-insignia {
display: inline-block; white-space: nowrap; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 800;
color: var(--color-text); background: color-mix(in srgb, var(--nivel) 30%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 65%, transparent);
}
.riesgo-enlace { white-space: nowrap; }
.riesgo-titulo { max-width: 34ch; overflow-wrap: anywhere; }
.riesgo-causas { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 46ch; }
.riesgo-causa { font-size: .78rem; line-height: 1.35; padding: .12rem .55rem; border-radius: 999px; background: var(--color-warning-bg); color: var(--color-text); }
.riesgo-causa.de-impacto { background: var(--color-info-bg); }
@media (max-width: 1100px) {
.riesgo-tablero { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.riesgo-filtros { grid-template-columns: 1fr; }
.riesgo-filtros .segmentos { display: flex; }
.riesgo-niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.riesgo-matriz { grid-template-columns: 1.1rem 1.2rem repeat(5, minmax(0, 1fr)); gap: .25rem; }
.riesgo-fila-rotulo span, .riesgo-columna-rotulo span { display: none; }
.riesgo-celda { min-height: 3rem; aspect-ratio: 1; }
.riesgo-celda-cuenta { font-size: 1.2rem; }
.riesgo-celda-puntos { display: none; }
.riesgo-barra-fila { grid-template-columns: minmax(0, 9rem) minmax(2rem, 1fr) 2rem; }
/* La tabla pasa a fichas: una por riesgo, con lo importante arriba. */
.riesgo-tabla thead { display: none; }
.riesgo-tabla, .riesgo-tabla tbody { display: block; }
.riesgo-tabla tr { display: grid; gap: .35rem; padding: .85rem 0; border-bottom: 1px solid var(--color-border); }
.riesgo-tabla td { display: block; padding: 0; border: none; }
.riesgo-tabla td[data-label="Departamento"]::before, .riesgo-tabla td[data-label="Responsable"]::before {
content: attr(data-label) ": "; color: var(--color-text-muted); font-size: .82rem;
}
.riesgo-titulo, .riesgo-causas { max-width: none; }
}
@media print {
.riesgo-filtros, .pagina-acciones, .riesgo-paneles { display: none; }
.riesgo-tablero { grid-template-columns: 1fr; }
}
/* Fecha límite en dos controles: calendario + lista de horas */
.fecha-hora-limite { display: flex; gap: .5rem; }
.fecha-hora-limite input[type=date] { flex: 3; }
.fecha-hora-limite input[type=time] { flex: 2; }
/* Chips de estado del listado de tareas: contador + filtro rápido en un clic */
/* La página de detalle de un caso PQRS: dos columnas con aire; la lateral (acciones, ficha,
plazo, bitácora) se apila debajo en pantallas estrechas. */
.pqrs-detalle { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.pqrs-detalle-principal, .pqrs-detalle-lateral { min-width: 0; }
.pqrs-detalle-texto { font-size: 1.05rem; line-height: 1.65; white-space: pre-line; }
/* La guía corta del camino de un caso, encima de los botones: pasos numerados, los hechos en
verde tachado suave y el actual resaltado en el azul de la marca. */
.pqrs-flujo { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); padding: .7rem .9rem; margin-bottom: .75rem; }
.pqrs-flujo-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: .4rem; }
/* Plegada por defecto: ocupa una línea hasta que alguien la abre. */
details.pqrs-flujo > summary { cursor: pointer; margin-bottom: 0; list-style: none; }
details.pqrs-flujo > summary::before { content: "▸ "; }
details.pqrs-flujo[open] > summary { margin-bottom: .4rem; }
details.pqrs-flujo[open] > summary::before { content: "▾ "; }
.pqrs-flujo-pasos { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; font-size: .9rem; line-height: 1.4; }
.pqrs-flujo-pasos li::marker { font-weight: 700; color: var(--color-text-muted); }
.pqrs-flujo-pasos li.hecho { color: var(--color-text-muted); }
.pqrs-flujo-pasos li.hecho strong { color: var(--color-success); }
.pqrs-flujo-pasos li.hecho strong::after { content: " ✔"; }
.pqrs-flujo-pasos li.actual { background: var(--color-primary-light); border-radius: var(--radius-sm); padding: .25rem .5rem; margin-left: -.5rem; }
.pqrs-flujo-pasos li.actual::marker { color: var(--color-primary); }
.pqrs-flujo-pasos li.actual strong { color: var(--color-primary-dark, var(--color-primary)); }
.pqrs-flujo-pasos li.actual strong::before { content: "👉 "; }
.pqrs-flujo-nota { margin: .6rem 0 0; font-size: .82rem; color: var(--color-text-muted); line-height: 1.5; }
.pqrs-detalle-acciones { display: grid; gap: .5rem; }
.pqrs-detalle-acciones .btn { width: 100%; justify-content: center; }
.pqrs-detalle-ficha { display: grid; gap: .6rem; }
.pqrs-detalle-bitacora { max-height: 420px; overflow-y: auto; }
.pqrs-mensajes { display: grid; gap: .6rem; }
.pqrs-mensaje { border-left: 3px solid var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius-sm); padding: .6rem .8rem; }
.pqrs-mensaje-cuando { font-size: .78rem; color: var(--color-text-muted); margin-bottom: .2rem; }
.pqrs-mensaje-texto { white-space: pre-line; }
@media (max-width: 900px) {
.pqrs-detalle { grid-template-columns: 1fr; }
}
/* La bandeja de PQRS como tabla: el resumen se corta en una línea, las filas van rayadas
(una sí, una no, con un fondo suave) y la fila entera abre el caso. */
.pqrs-tabla-resumen { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqrs-tabla tbody tr:nth-child(even) > td { background: var(--color-bg); }
.pqrs-tabla tbody tr:hover > td { background: var(--color-primary-light); }
.pqrs-tabla tr.fila-reservada > td { box-shadow: inset 3px 0 0 var(--color-border-strong, var(--color-border)); }
/* El ticket del caso ya terminó: se ve en verde en la bandeja y en el expediente. */
.pqrs-ticket-listo { color: var(--color-success); font-weight: 600; }
/* El resumen del caso arriba del detalle: los datos duros en una rejilla, antes de las columnas,
para que estado, responsable, ticket y plazo se vean sin bajar. */
.pqrs-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem 1rem; }
.pqrs-resumen .dato { display: grid; gap: .1rem; min-width: 0; }
.pqrs-resumen .rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.pqrs-resumen .dato > span:not(.rotulo), .pqrs-resumen .dato > a { overflow-wrap: anywhere; font-weight: 600; }
.pqrs-resumen .codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; letter-spacing: .02em; }
/* En el teléfono las columnas se apilan y las acciones van primero: es lo que se viene a hacer. */
@media (max-width: 900px) {
.pqrs-detalle-lateral { order: -1; }
}
.estado-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.estado-chip {
background: none; cursor: pointer;
border: 1.5px solid var(--color-border); border-radius: 999px;
padding: .35rem .9rem; font-size: .88rem; font-weight: 600;
color: var(--color-text-muted);
transition: border-color .15s, color .15s, background .15s;
}
.estado-chip strong { margin-left: .25rem; color: var(--color-text); }
.estado-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.estado-chip.activo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.estado-chip.activo strong { color: #fff; }
/* ---------------- Tooltip de ayuda en formularios ---------------- */
.ayuda-tooltip { position: relative; display: inline-block; margin-left: .3rem; cursor: help; outline: none; }
.ayuda-icono { color: var(--color-text-muted); font-size: .95em; font-style: normal; }
.ayuda-tooltip:hover .ayuda-icono, .ayuda-tooltip:focus .ayuda-icono { color: var(--color-primary); }
/* La burbuja flota con coordenadas fijas (las pone JS) para que ningún diálogo con scroll la
recorte; --flecha es la distancia horizontal al icono, así la punta sigue señalándolo aunque
la burbuja se haya pegado al borde de la ventana. */
.ayuda-burbuja {
display: none;
position: fixed;
width: 300px; max-width: calc(100vw - 16px);
background: var(--color-text); color: #fff;
border-radius: var(--radius-sm);
padding: .7rem .85rem;
font-size: .84rem; font-weight: 400; line-height: 1.45;
text-transform: none; letter-spacing: normal; text-align: left; white-space: normal;
box-shadow: var(--elev-3);
z-index: 1000;
--flecha: 50%;
}
.ayuda-burbuja::before {
content: ""; position: absolute; left: var(--flecha); transform: translateX(-50%);
border: 7px solid transparent;
}
.ayuda-burbuja.abajo::before { bottom: 100%; border-bottom-color: var(--color-text); }
.ayuda-burbuja.arriba::before { top: 100%; border-top-color: var(--color-text); }
.ayuda-burbuja.visible { display: block; }
.ayuda-burbuja strong { color: #fff; }
.ayuda-burbuja.sin-flecha::before { display: none; }
/* En oscuro --color-text es claro: la burbuja pasaba a fondo claro con letra blanca, ilegible.
Se vuelve una superficie oscura elevada con borde, y la flecha toma su color. */
:root[data-theme="dark"] .ayuda-burbuja { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); }
:root[data-theme="dark"] .ayuda-burbuja strong { color: var(--color-text); }
:root[data-theme="dark"] .ayuda-burbuja.abajo::before { border-bottom-color: var(--color-border); }
:root[data-theme="dark"] .ayuda-burbuja.arriba::before { border-top-color: var(--color-border); }
/* El botoncito «?» del glosario de riesgo (QueSignifica): un círculo pequeño junto al término,
en el azul de la marca, que se rellena al pasar o al quedar abierto. Es un botón de verdad
para que funcione con el dedo; el área táctil crece con un margen invisible. */
.que-significa {
display: inline-flex; align-items: center; justify-content: center;
width: 1.15rem; height: 1.15rem; margin: 0 .1rem 0 .35rem; padding: 0;
border: 1.5px solid var(--color-primary); border-radius: 50%;
background: var(--color-surface); color: var(--color-primary);
font-family: inherit; font-size: .7rem; font-weight: 800; line-height: 1; vertical-align: .12em; cursor: pointer;
position: relative; flex: none;
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.que-significa::after { content: ""; position: absolute; inset: -.5rem; }
.que-significa:hover, .que-significa[aria-expanded="true"] { background: var(--color-primary); color: #fff; }
.que-significa:active { transform: scale(.92); }
.que-significa:focus-visible { outline: 2px solid var(--color-primary-ring, var(--color-primary)); outline-offset: 2px; }
/* La burbuja del glosario: más ancha, con las opciones en lista y el ejemplo aparte. */
.ayuda-burbuja.glosario { width: 360px; }
/* Solo cuando no cabe se desplaza por dentro; con overflow siempre, la flecha quedaría recortada. */
.ayuda-burbuja.glosario.sin-flecha { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ayuda-burbuja .glosario-titulo { display: block; font-size: .9rem; margin-bottom: .2rem; }
.ayuda-burbuja .glosario-texto { display: block; }
.ayuda-burbuja .glosario-opciones { display: grid; gap: .35rem; margin-top: .5rem; }
.ayuda-burbuja .glosario-opcion { display: block; padding-left: .6rem; border-left: 2px solid rgba(255, 255, 255, .35); }
.ayuda-burbuja .glosario-ejemplo { display: block; margin-top: .5rem; opacity: .85; font-style: italic; }
/* Un color estable por autor en el hilo de comentarios: borde y franja que separan voces */
.comentario { box-shadow: inset 3px 0 0 var(--voz, transparent); }
.comentario.autor-0 { --voz: var(--color-primary); background: #f6f8ff; }
.comentario.autor-1 { --voz: #0e8a50; background: #f4fbf7; }
.comentario.autor-2 { --voz: var(--color-warning); background: #fdf9f1; }
.comentario.autor-3 { --voz: #7c3aed; background: var(--sec-clientes-bg); }
.comentario.autor-4 { --voz: #0e7490; background: #f2fafc; }
.comentario.autor-5 { --voz: #be185d; background: #fdf5f9; }
.comentario.autor-6 { --voz: #4d7c0f; background: #f8fbf2; }
.comentario.autor-7 { --voz: #b91c1c; background: #fdf6f6; }
/* ---------------- Mi baúl ---------------- */
.clave-editor { display: flex; gap: .5rem; align-items: center; }
.clave-editor .form-control { flex: 1; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
/* Campo de contraseña con botón de mostrar/ocultar al lado (login y similares).
Como .clave-editor pero sin monospace: aquí el campo debe verse igual que los demás. */
.campo-clave { display: flex; gap: .5rem; align-items: center; }
.campo-clave .form-control { flex: 1; }
.secreto-revelado {
display: flex; align-items: center; gap: .75rem;
background: var(--color-text); border-radius: var(--radius-sm);
padding: .9rem 1.1rem;
}
.secreto-revelado code {
flex: 1; color: #a7f3d0;
font-size: 1.15rem; letter-spacing: .06em;
word-break: break-all;
user-select: all;
}
.secreto-notas { white-space: pre-line; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .7rem .9rem; }
.fortaleza { margin-top: .4rem; }
.fortaleza-barra { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.fortaleza-barra div { height: 100%; border-radius: 999px; transition: width .2s; }
.fortaleza small { font-weight: 600; }
.fortaleza-debil .fortaleza-barra div { background: var(--color-danger); }
.fortaleza-debil small { color: var(--color-danger); }
.fortaleza-media .fortaleza-barra div { background: var(--color-warning); }
.fortaleza-media small { color: var(--color-warning); }
.fortaleza-fuerte .fortaleza-barra div { background: var(--color-success); }
.fortaleza-fuerte small { color: var(--color-success); }
/* Tarjetas KPI que filtran al hacer clic (Mi día): se nota cuál está seleccionada. */
/* Fila marcada para una acción masiva (Tareas). */
.tabla tr.fila-seleccionada td { background: var(--color-primary-light); }
/* ---------------- Instalar como app (InstalarApp.razor) ---------------- */
.instalar-estado { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.instalar-estado li { display: flex; align-items: center; gap: .6rem; color: var(--color-text-muted); }
.instalar-estado li.ok { color: var(--color-text); }
.instalar-pasos {
background: var(--color-primary-light);
border-radius: var(--radius-sm);
padding: .9rem 1.1rem;
margin-top: .5rem;
}
.instalar-pasos h4 { margin: 0 0 .5rem; }
.instalar-pasos ol { margin: 0 0 .5rem; padding-left: 1.3rem; line-height: 1.7; }
.instalar-pasos p { margin: 0; font-size: .9rem; }
/* Réplica del ícono "Compartir" de iOS (cuadro con flecha hacia arriba), para que el usuario
lo reconozca en la barra de Safari. */
.icono-compartir {
display: inline-block;
width: 1em; height: 1.15em;
vertical-align: -0.2em;
margin: 0 .15em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* iPhone con muesca en modo app: respetar las zonas seguras para que nada quede bajo la barra. */
@media (display-mode: standalone) {
/* La altura va en la variable para que la franja de sección y los paneles de la barra
(cuentas, campana, bitácora) se coloquen con la medida real, no con los 64px de escritorio. */
:root { --topbar-height: 72px; }
.topbar { height: calc(var(--topbar-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
/* ---------------- Hoja de instalación en el teléfono (HojaInstalacion.razor) ---------------- */
.hoja-velo {
position: fixed; inset: 0; z-index: 1200;
background: rgba(12, 16, 35, .62);
display: flex; align-items: flex-end; justify-content: center;
padding: 0;
animation: desvanecer var(--dur-2) var(--ease-out);
}
.hoja {
width: 100%; max-width: 480px;
background: var(--color-surface);
border-radius: var(--radius) var(--radius) 0 0;
box-shadow: var(--elev-4);
padding: 1.5rem 1.5rem calc(4.5rem + env(safe-area-inset-bottom));
text-align: center;
animation: hoja-subir var(--dur-3) var(--ease-drawer);
}
.hoja-centrada {
border-radius: var(--radius);
margin: auto 1rem;
padding-bottom: 1.5rem;
}
.hoja-velo:has(.hoja-centrada) { align-items: center; padding: 1rem; }
.hoja-icono { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--elev-2); }
.hoja h2 { font-size: 1.3rem; margin: .9rem 0 .5rem; line-height: 1.25; }
.hoja p { color: var(--color-text-muted); line-height: 1.5; margin: 0 0 1rem; }
.hoja-pasos { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; display: flex; flex-direction: column; gap: .75rem; }
.hoja-pasos li { display: flex; align-items: center; gap: .75rem; line-height: 1.4; }
.hoja-pasos-grandes li { font-size: 1.08rem; background: var(--color-primary-light); border-radius: var(--radius-sm); padding: .7rem .9rem; }
.hoja-num {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
background: var(--color-primary); color: #fff; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.hoja-nota { font-size: .9rem; }
.hoja-boton { width: 100%; font-size: 1.1rem; padding: .9rem 1rem; border-radius: 14px; }
.hoja-despues { display: block; margin: .9rem auto 0; color: var(--color-text-muted); }
.icono-grande { width: 1.3em; height: 1.5em; vertical-align: -0.3em; }
/* "Agregar a pantalla de inicio" de iOS es un cuadrado con un + adentro. */
.icono-inicio {
display: inline-flex; align-items: center; justify-content: center;
width: 1.3em; height: 1.3em; vertical-align: -0.25em; margin: 0 .15em;
border: 2px solid currentColor; border-radius: 5px; font-weight: 700; line-height: 1;
}
/* La flecha que señala el botón Compartir de Safari: abajo al centro en iPhone, arriba a la
derecha en iPad. Rebota para que el ojo la siga. */
.hoja-flecha {
position: fixed; z-index: 1201;
font-size: 2.6rem; color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
pointer-events: none;
}
.hoja-flecha-abajo { left: 50%; transform: translateX(-50%); bottom: calc(.5rem + env(safe-area-inset-bottom)); animation: hoja-rebote-abajo 1.1s ease-in-out infinite; }
.hoja-flecha-arriba { right: 1.25rem; top: calc(.5rem + env(safe-area-inset-top)); animation: hoja-rebote-arriba 1.1s ease-in-out infinite; }
@keyframes hoja-subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hoja-rebote-abajo { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }
@keyframes hoja-rebote-arriba { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* ---------- Métricas de tiempo de una tarea ---------- */
.tiempos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .75rem;
margin: .5rem 0 1rem;
}
.tiempo-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary);
border-radius: var(--radius);
padding: .75rem .9rem;
box-shadow: var(--elev-1);
}
.tiempo-card .tiempo-valor { font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.tiempo-card .tiempo-etiqueta { font-size: .8rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: .2rem; }
.tiempo-card .tiempo-detalle { font-size: .8rem; color: var(--color-text-muted); margin-top: .25rem; }
.tiempo-card.ok { border-left-color: var(--color-success); }
.tiempo-card.ok .tiempo-valor { color: var(--color-success); }
.tiempo-card.mal { border-left-color: var(--color-danger); }
.tiempo-card.mal .tiempo-valor { color: var(--color-danger); }
.tiempo-card.aviso { border-left-color: var(--color-warning); }
.tiempo-card.aviso .tiempo-valor { color: var(--color-warning); }
.tiempo-card.neutro { border-left-color: var(--color-border); }
/* ---------- Comisión por meta ---------- */
.comision-editor .comision-panel {
border: 1px dashed #c9a227;
background: var(--color-warning-bg);
border-radius: var(--radius);
padding: .9rem 1rem;
margin: .5rem 0 1rem;
}
.comision-tramos td, .comision-tramos th { padding: .3rem .5rem; }
.comision-tramos input.form-control { max-width: 140px; }
.comision-resumen {
border: 1px solid #e6c75a;
background: #fffdf3;
border-radius: var(--radius);
padding: 1rem 1.1rem;
margin-bottom: 1rem;
box-shadow: var(--elev-1);
}
.comision-resumen.ganada { border-color: var(--color-success); background: #f4fff6; }
.comision-resumen.fallada { border-color: var(--color-border); background: #f7f7f9; }
.comision-escalera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .75rem 0; }
.comision-tramo {
min-width: 96px;
text-align: center;
border: 2px solid #e6c75a;
background: var(--color-surface);
border-radius: 10px;
padding: .45rem .5rem;
position: relative;
}
.comision-tramo-pct { font-size: 1.35rem; font-weight: 800; color: #8a6d00; line-height: 1.1; }
.comision-tramo-dias { font-size: .78rem; color: var(--color-text-muted); font-weight: 600; }
.comision-tramo-monto { font-size: .75rem; color: var(--color-text-muted); }
.comision-tramo.vigente { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(41, 82, 217, .18); transform: translateY(-3px); }
.comision-tramo.vigente .comision-tramo-pct { color: var(--color-primary); }
.comision-tramo.vigente::after { content: "en juego"; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; font-size: .62rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.comision-tramo.pasado, .comision-tramo.apagado { opacity: .45; filter: grayscale(.6); }
.comision-tramo.alcanzado { border-color: var(--color-success); box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.comision-tramo.alcanzado .comision-tramo-pct { color: var(--color-success); }
.comision-tramo.alcanzado::after { content: "ganado"; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--color-success); color: #fff; font-size: .62rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.comision-tramo.perdido { border-color: var(--color-danger); }
.comision-estado { margin-top: .5rem; font-size: .98rem; }
.comision-urgente { color: var(--color-danger); }
.comision-alertas { margin-top: .5rem; background: var(--color-warning-bg); color: #7a4b00; border-radius: 8px; padding: .5rem .75rem; font-size: .9rem; }
.comision-alertas ul { margin: .25rem 0 0 1.2rem; padding: 0; }
.badge-comision { background: #fff1b8; color: #7a5c00; }
.alerta-chip { display: inline-block; background: var(--color-warning-bg); color: #7a4b00; border-radius: 999px; padding: .1rem .5rem; font-size: .75rem; font-weight: 700; }
/* ---------- Explicaciones desplegables ("¿cómo se calcula?") ---------- */
.explicacion {
margin: .6rem 0 .25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
font-size: .92rem;
}
.explicacion > summary {
cursor: pointer;
padding: .55rem .85rem;
font-weight: 600;
color: var(--color-primary);
list-style: none;
}
.explicacion > summary::-webkit-details-marker { display: none; }
.explicacion > summary::before { content: "▸ "; }
.explicacion[open] > summary::before { content: "▾ "; }
.explicacion-cuerpo { padding: .25rem 1rem .9rem; line-height: 1.5; }
.explicacion-cuerpo h4 { margin: .8rem 0 .3rem; font-size: .95rem; }
.explicacion-cuerpo ul,
.explicacion-cuerpo ol { margin: .2rem 0 .4rem 1.2rem; padding: 0; }
.explicacion-cuerpo li { margin-bottom: .3rem; }
/* ---------- Metas de incentivos ---------- */
.modal-ancho { max-width: 1000px; width: 96vw; }
.meta-reglas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.meta-inactiva { opacity: .72; }
.fila-alerta td { background: #fffaf0; }
/* ---------- Centro de ayuda ---------- */
.faq dt { font-weight: 700; margin-top: .7rem; }
.faq dd { margin: .2rem 0 0 0; color: var(--color-text-muted); }
/* ---------- Hub de incentivos ---------- */
.incentivos-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.incentivos-accesos a.landing-func { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--elev-1); transition: transform var(--transicion), box-shadow var(--transicion); }
.incentivos-accesos a.landing-func:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.incentivos-accesos .landing-func-icono { font-size: 1.8rem; }
.incentivos-accesos h3 { margin: .4rem 0 .3rem; font-size: 1.05rem; }
.incentivos-accesos p { color: var(--color-text-muted); font-size: .9rem; margin: 0; }
/* Miniatura del fondo del portal en la pantalla de configuración. Conserva la proporción con la
que se publica, para que lo que se ve aquí sea lo que verá quien entre. */
.fondo-vista {
width: 100%;
max-width: 320px;
aspect-ratio: 16 / 9;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg);
}
.fondo-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fondo-vista.vacia {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: .75rem;
border-style: dashed;
color: var(--color-text-muted);
font-size: .85rem;
}
/* ===================================================================
Portal público de PQRS: la portada.
Quien abre este enlace llega de fuera, muchas veces molesto y casi
siempre desde el móvil. La portada tiene que verse cuidada y decir
en tres segundos por dónde se entra. El movimiento acompaña; nunca
estorba, y se apaga entero si el visitante lo pidió en su sistema.
=================================================================== */
/* La banda de marca. Con imagen de fondo lleva un velo oscuro encima: sin él, el texto blanco es
ilegible sobre según qué foto, y no controlamos la que suba cada entidad. */
/* La banda de cabecera: el color de la entidad (o su foto con un velo sólido del color de
marca) a todo el ancho de la ventana, solo arriba. La tarjeta de presentación se monta sobre
ella. En la portada la columna deja de pintarse de color: el resto es fondo neutro. */
.publico-shell.pqrs-shell { background-color: transparent !important; padding-top: 0; }
/* En los formularios y en la consulta, la banda es más corta y la primera tarjeta se monta
sobre ella, como la de presentación en la portada. */
/* Todas las tarjetas van por encima de la banda; la primera (la que sigue a la banda) se monta
sobre ella. No vale :first-of-type: la banda también es un div. */
.pqrs-shell > .publico-card { position: relative; z-index: 1; }
.pqrs-shell:not(.ancha) > .pqrs-banda + .publico-card { margin-top: 2.5rem; }
.pqrs-banda.corta { height: 150px; }
.pqrs-banda {
position: absolute;
left: 50%; top: 0;
width: 100vw; height: 260px;
transform: translateX(-50%);
background-color: var(--color-fondo-portal, var(--color-primary));
background-size: cover;
background-position: center;
z-index: 0;
}
.pqrs-banda.con-imagen::after {
content: "";
position: absolute; inset: 0;
background-color: var(--color-fondo-portal, var(--color-primary));
opacity: .86;
}
.pqrs-hero {
position: relative;
z-index: 1;
margin: 4.5rem 0 1.75rem;
padding: 2rem 2.25rem;
border-radius: 20px;
background: var(--color-surface, #fff);
border: 1px solid var(--color-border);
box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
color: var(--color-text);
animation: pqrs-hero-entra .5s var(--ease-out) both;
}
/* Burbujas blancas que derivan despacio dentro de la banda. */
.pqrs-burbuja {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
pointer-events: none;
animation: pqrs-burbuja-flota 16s ease-in-out infinite alternate;
}
.pqrs-burbuja:nth-child(1) { width: 260px; height: 260px; right: -80px; top: -110px; }
.pqrs-burbuja:nth-child(2) { width: 140px; height: 140px; right: 22%; bottom: -70px; animation-duration: 21s; animation-delay: -6s; }
.pqrs-burbuja:nth-child(3) { width: 90px; height: 90px; left: 36%; top: -40px; animation-duration: 13s; animation-delay: -3s; background: rgba(255, 255, 255, .2); }
@keyframes pqrs-burbuja-flota {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-28px, 22px) scale(1.12); }
}
/* La marca a un lado, el mensaje al otro: se lee como una tarjeta de presentación. */
.pqrs-hero-cuerpo {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1.75rem;
text-align: left;
}
.pqrs-hero-marca {
width: 104px; height: 104px;
display: flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 18px;
padding: .6rem;
}
.pqrs-hero-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.pqrs-hero-inicial {
font-size: 2.8rem; font-weight: 800; line-height: 1;
color: var(--color-primary);
}
.pqrs-hero-entidad {
display: inline-block;
margin: 0 0 .35rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-size: .74rem;
color: var(--color-primary);
}
.pqrs-hero h1 {
color: var(--color-text);
font-size: 2rem;
line-height: 1.15;
margin: 0 0 .5rem;
}
/* El saludo ocupa todo el ancho de la columna de texto y va justificado, con guiones cuando
hace falta: sin esto cada línea terminaba en un sitio distinto y el bloque se veía desordenado. */
.pqrs-hero-mensaje {
margin: 0;
max-width: none;
font-size: 1rem;
line-height: 1.65;
color: var(--color-text-muted);
white-space: pre-line;
text-align: justify;
text-wrap: pretty;
hyphens: auto;
-webkit-hyphens: auto;
}
.pqrs-hero-texto { min-width: 0; }
@media (max-width: 640px) {
.pqrs-hero-mensaje { text-align: left; hyphens: manual; }
}
/* Globos de color que flotan detrás del portal entero, muy despacio. */
.pqrs-cielo {
position: fixed; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.pqrs-cielo span {
position: absolute;
border-radius: 50%;
opacity: .55;
animation: pqrs-cielo-flota 28s ease-in-out infinite alternate;
}
.pqrs-cielo span:nth-child(1) { width: 320px; height: 320px; left: -120px; top: 12%; background: #c9e8ff; }
.pqrs-cielo span:nth-child(2) { width: 200px; height: 200px; right: -60px; top: 6%; background: #ffe9b3; animation-duration: 34s; animation-delay: -9s; }
.pqrs-cielo span:nth-child(3) { width: 150px; height: 150px; right: 14%; bottom: 14%; background: #cdf5da; animation-duration: 24s; animation-delay: -4s; }
.pqrs-cielo span:nth-child(4) { width: 110px; height: 110px; left: 12%; bottom: 8%; background: #e4dbff; animation-duration: 31s; animation-delay: -15s; }
.pqrs-cielo span:nth-child(5) { width: 70px; height: 70px; left: 45%; top: 4%; background: #cff3f8; animation-duration: 19s; animation-delay: -2s; }
.pqrs-cielo span:nth-child(6) { width: 240px; height: 240px; right: -90px; bottom: -80px; background: #c9e8ff; animation-duration: 37s; animation-delay: -20s; }
@keyframes pqrs-cielo-flota {
from { transform: translate(0, 0); }
to { transform: translate(40px, -60px); }
}
:root[data-theme="dark"] .pqrs-cielo span { opacity: .14; }
/* El contenido va por encima de los globos. */
.publico-shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.pqrs-burbuja, .pqrs-cielo span { animation: none; }
}
@media (max-width: 640px) {
.pqrs-hero { padding: 1.75rem 1.25rem; border-radius: 22px; }
.pqrs-hero-cuerpo { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1rem; }
.pqrs-hero-marca { width: 84px; height: 84px; border-radius: 20px; }
.pqrs-hero-inicial { font-size: 2.3rem; }
.pqrs-hero h1 { font-size: 1.7rem; }
.pqrs-hero-mensaje { font-size: .98rem; }
}
/* En la portada la tarjeta blanca no debe competir con la banda: se queda como soporte. */
.publico-card.es-portada { background: transparent; border: 0; box-shadow: none; padding: 0; }
/* ---- Las tarjetas de entrada ---- */
.pqrs-tarjeta { position: relative; }
/* Un lavado del color de la marca que crece al pasar por encima: da vida sin tapar el texto. */
.pqrs-tarjeta::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--color-primary-light, #e8edfc);
opacity: 0;
transition: opacity var(--transicion);
pointer-events: none;
}
.pqrs-tarjeta:hover::before,
.pqrs-tarjeta:focus-visible::before { opacity: .9; }
.pqrs-tarjeta > * { position: relative; }
.pqrs-tarjeta .icono { transition: transform var(--transicion); }
.pqrs-tarjeta:hover .icono { transform: scale(1.12) translateY(-2px); }
/* La flecha aparece al acercarse: sugiere que la tarjeta lleva a algún sitio. */
.pqrs-tarjeta .flecha {
font-size: 1.1rem;
color: var(--color-primary);
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--transicion), transform var(--transicion);
}
.pqrs-tarjeta:hover .flecha,
.pqrs-tarjeta:focus-visible .flecha { opacity: 1; transform: translateX(0); }
.pqrs-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--elev-3); }
.pqrs-tarjeta:active { transform: translateY(-1px); }
/* Foco visible de verdad: en un portal público hay quien navega solo con el teclado. */
.pqrs-tarjeta:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* ---- El termómetro de satisfacción ---- */
.pqrs-termometro {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: var(--radius);
background: var(--color-surface, #fff);
border: 1px solid var(--color-border);
box-shadow: var(--elev-1);
}
.pqrs-termometro-titulo {
text-align: center;
margin: 0 0 1rem;
font-weight: 600;
color: var(--color-text-muted);
}
.pqrs-medidores {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
justify-content: center;
}
/* La barra se llena sola al aparecer: el número se entiende antes viéndolo crecer. */
.pqrs-barra {
height: 6px;
border-radius: 99px;
background: var(--color-border);
overflow: hidden;
margin: .5rem 0 .4rem;
}
.pqrs-barra span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--color-primary);
transform-origin: left;
animation: pqrs-barra-crece .9s var(--ease-out) both;
}
/* ---- Movimiento ---- */
/* Entrada escalonada: --orden lo pone la página en cada tarjeta. El tope evita que el último
elemento de una lista larga tarde una eternidad en aparecer. */
.entra {
animation: pqrs-sube .45s var(--ease-out) both;
animation-delay: calc(min(var(--orden, 0), 8) * 70ms);
}
@keyframes pqrs-sube {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes pqrs-hero-entra {
from { opacity: 0; transform: scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes pqrs-barra-crece {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Hay gente a la que el movimiento le provoca mareo. Se respeta su ajuste del sistema: todo se
ve igual, pero quieto y ya colocado. */
@media (prefers-reduced-motion: reduce) {
.pqrs-hero,
.entra,
.pqrs-barra span {
animation: none;
}
.pqrs-tarjeta:hover { transform: none; }
.pqrs-tarjeta:hover .icono { transform: none; }
}
/* En el móvil la banda no necesita tanto aire: la pantalla se la come entera. */
@media (max-width: 600px) {
.pqrs-hero { padding: 2rem 1rem 1.75rem; border-radius: var(--radius-sm); }
.pqrs-hero h1 { font-size: 1.6rem; }
.pqrs-hero-mensaje { font-size: .98rem; }
.pqrs-hero-logo { max-height: 62px; }
}
/* La portada respira más que los formularios: ahí hay tarjetas que comparar, y a 640px se
apilarían en una sola columna larguísima. Al entrar a un formulario la columna se vuelve a
estrechar, que es lo que mejor se rellena. */
.publico-shell.ancha { max-width: 880px; }
/* En un teléfono no existe el "pasar por encima": la flecha nunca se vería y su hueco quedaría
vacío al pie de cada tarjeta. Ahí se muestra siempre, atenuada, que además es la señal de que
la tarjeta se puede tocar. */
@media (hover: none) {
.pqrs-tarjeta .flecha { opacity: .55; transform: none; }
}
/* ===================================================================
Portal público: enviar, y sobre todo SABER cómo va lo enviado.
=================================================================== */
/* El botón de acción del portal. Grande y redondo porque en el portal público no hay aprendizaje
previo ni segunda oportunidad: si no se ve que ahí se pulsa, la persona abandona el formulario
que acaba de rellenar. */
.btn-grande {
padding: .95rem 1.75rem;
border-radius: 999px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .01em;
box-shadow: var(--elev-2);
transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}
.btn-grande:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--elev-3); filter: brightness(1.05); }
.btn-grande:active:not(:disabled) { transform: translateY(0); box-shadow: var(--elev-1); }
.btn-grande:disabled { opacity: .65; box-shadow: none; }
/* La invitación a consultar un caso ya enviado, en la portada. */
.pqrs-consulta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin: 1.5rem 0 0;
padding: 1.1rem 1.4rem;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-surface, #fff);
box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.pqrs-consulta .icono {
width: 48px; height: 48px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-primary-light);
color: var(--color-primary);
font-size: 1.4rem; line-height: 1;
}
.pqrs-consulta .cuerpo { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .15rem; }
.pqrs-consulta .cuerpo strong { font-size: 1.05rem; }
.pqrs-consulta .cuerpo span { color: var(--color-text-muted); font-size: .9rem; }
/* Sobres apenas visibles flotando por la mitad baja de la página, muy despacio: profundidad sin
distraer. Van fijos al viewport, detrás de todo, en el color de marca con opacidad mínima. */
.pqrs-sobres { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pqrs-sobres span {
position: absolute;
color: var(--color-primary);
opacity: .06;
animation: pqrs-sobre-flota 50s ease-in-out infinite alternate;
}
.pqrs-sobres span svg { width: 100%; height: 100%; display: block; }
.pqrs-sobres span:nth-child(1) { width: 110px; height: 110px; left: 6%; top: 58%; transform: rotate(-12deg); }
.pqrs-sobres span:nth-child(2) { width: 70px; height: 70px; left: 22%; top: 82%; animation-duration: 64s; animation-delay: -20s; transform: rotate(8deg); }
.pqrs-sobres span:nth-child(3) { width: 90px; height: 90px; left: 46%; top: 90%; animation-duration: 58s; animation-delay: -35s; transform: rotate(-5deg); }
.pqrs-sobres span:nth-child(4) { width: 130px; height: 130px; right: 8%; top: 62%; animation-duration: 72s; animation-delay: -10s; transform: rotate(10deg); opacity: .05; }
.pqrs-sobres span:nth-child(5) { width: 60px; height: 60px; right: 26%; top: 78%; animation-duration: 46s; animation-delay: -28s; transform: rotate(-16deg); }
.pqrs-sobres span:nth-child(6) { width: 80px; height: 80px; left: 70%; top: 48%; animation-duration: 66s; animation-delay: -42s; transform: rotate(6deg); opacity: .045; }
.pqrs-sobres span:nth-child(7) { width: 50px; height: 50px; left: 12%; top: 40%; animation-duration: 54s; animation-delay: -15s; transform: rotate(14deg); opacity: .045; }
@keyframes pqrs-sobre-flota {
from { translate: 0 0; }
to { translate: 24px -36px; }
}
@media (prefers-reduced-motion: reduce) { .pqrs-sobres span { animation: none; } }
:root[data-theme="dark"] .pqrs-sobres span { opacity: .08; }
/* La vista previa del logo del portal en la configuración: un cuadrado con fondo a cuadros
suave, para que se note si trae transparencia. */
.logo-portal-vista {
width: 120px; height: 120px;
display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
background: var(--color-bg);
overflow: hidden; text-align: center; font-size: .78rem; color: var(--color-text-muted); padding: .4rem;
}
.logo-portal-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* El pie del portal: quién lo ofrece y la nota de privacidad. Discreto, en dos líneas. */
.pqrs-pie {
display: flex; flex-direction: column; gap: .2rem; align-items: center; text-align: center;
margin: 2rem 0 0;
font-size: .82rem; color: var(--color-text-muted);
}
.pqrs-pie a { color: var(--color-primary); }
/* La consulta del caso: cabecera con icono, y el campo del código en monoespaciada grande
(es lo que se copia de un correo o de un papel). */
.consulta-cabecera { display: flex; align-items: flex-start; gap: .9rem; margin: .5rem 0 1.25rem; }
.consulta-cabecera h2 { margin: 0 0 .25rem; }
.consulta-icono {
width: 52px; height: 52px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--color-primary-light); color: var(--color-primary);
}
.consulta-codigo {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase;
padding: .85rem 1rem; text-align: center;
}
@media (max-width: 640px) {
.pqrs-banda { height: 200px; }
.pqrs-hero { margin-top: 3rem; }
}
/* El código del caso, destacado tras enviarlo. */
.publico-card.codigo-caso { border-color: var(--color-primary); border-width: 2px; }
/* ---- La ficha del caso ---- */
.caso-cabecera {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.caso-tipo {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.caso-radicado { margin: .15rem 0 0; font-size: 1.6rem; letter-spacing: .02em; }
.caso-estado {
padding: .45rem 1rem;
border-radius: 999px;
font-weight: 700;
font-size: .85rem;
background: var(--color-primary-light);
color: var(--color-primary-dark, var(--color-primary));
white-space: nowrap;
}
/* Cerrada en verde, no procedió en gris: el color dice el desenlace antes que la letra. */
.caso-estado.estado-5 { background: var(--color-success-bg); color: var(--color-success); }
.caso-estado.estado-2, .caso-estado.estado-3 { background: #eceef4; color: var(--color-text-muted); }
.caso-estado.estado-6 { background: var(--color-warning-bg); color: var(--color-warning); }
/* Los datos duros en rejilla: es lo que se busca de un vistazo antes de leer nada. */
.caso-datos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin: 1.25rem 0;
}
.caso-datos > div { display: flex; flex-direction: column; gap: .15rem; }
.caso-datos .rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.caso-datos .caso-vencido { font-size: .8rem; font-weight: 700; color: var(--color-danger); }
/* La línea de tiempo. Los pasos que faltan se ven apagados pero SE VEN: saber lo que queda por
delante es justo lo que evita la llamada de "¿y ahora qué pasa?". */
.caso-pasos { list-style: none; margin: 1.5rem 0; padding: 0 0 0 .5rem; position: relative; }
.caso-pasos li { display: flex; gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.caso-pasos li:last-child { padding-bottom: 0; }
/* El hilo que une los pasos, salvo el último. */
.caso-pasos li:not(:last-child)::before {
content: "";
position: absolute;
left: 1.05rem;
top: 2.4rem;
bottom: .2rem;
width: 2px;
background: var(--color-border);
}
.caso-pasos li.cumplido:not(:last-child)::before { background: var(--color-primary); }
.caso-pasos .marca {
flex-shrink: 0;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
border: 2px solid var(--color-border);
font-size: 1rem;
z-index: 1;
}
.caso-pasos li.cumplido .marca { border-color: var(--color-primary); background: var(--color-primary-light); }
.caso-pasos .cuerpo { padding-top: .2rem; }
.caso-pasos .titulo { font-weight: 700; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.caso-pasos .titulo .fecha { font-weight: 400; font-size: .82rem; color: var(--color-text-muted); }
.caso-pasos .cuerpo p { margin: .25rem 0 0; color: var(--color-text-muted); font-size: .92rem; }
/* Lo pendiente, atenuado: presente, pero sin competir con lo que ya pasó. */
.caso-pasos li:not(.cumplido) .titulo { color: var(--color-text-muted); }
.caso-bloque {
margin-top: 1.5rem;
padding: 1.25rem;
border-radius: var(--radius-sm);
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.caso-bloque h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.caso-bloque.cierre { background: var(--color-success-bg); border-color: var(--color-success); }
.comentario.mio { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); }
/* ---- La ficha del caso, más cuidada: cabecera en panel, datos en tarjetas, línea de tiempo
con marcas grandes y la conversación como burbujas (las del socio a la derecha). ---- */
.caso-cabecera {
padding: 1.1rem 1.25rem;
border: 1px solid var(--color-border);
border-radius: 14px;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
align-items: center;
}
.caso-radicado { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.caso-estado { font-size: .9rem; padding: .5rem 1.1rem; }
.caso-datos { gap: .75rem; }
.caso-datos > div {
padding: .75rem .9rem;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface, #fff);
}
.caso-datos > div strong { font-size: 1rem; }
.caso-pasos { margin: 1.75rem 0 .5rem; padding-left: .25rem; }
.caso-pasos li { padding-bottom: 1.35rem; }
.caso-pasos li:not(:last-child)::before { left: 1.2rem; top: 2.7rem; }
.caso-pasos .marca {
width: 2.5rem; height: 2.5rem;
background: var(--color-surface, #fff);
border-width: 2px;
font-size: 1.05rem;
}
.caso-pasos li.cumplido .marca { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.caso-pasos li.cumplido .marca::after { content: "✓"; font-weight: 800; }
.caso-pasos li.cumplido .marca > * { display: none; }
.caso-pasos .cuerpo { padding-top: .45rem; }
.caso-pasos .titulo { font-size: 1rem; }
.caso-bloque { margin-top: 1.25rem; border-radius: 14px; background: var(--color-surface, #fff); }
.caso-bloque h3 { display: flex; align-items: center; gap: .5rem; }
/* La conversación: el equipo a la izquierda, el socio a la derecha, como en un chat. */
.caso-bloque .comentario {
max-width: 88%;
margin: .6rem 0;
padding: .7rem .9rem;
border: 1px solid var(--color-border);
border-radius: 14px 14px 14px 4px;
background: var(--color-bg);
}
.caso-bloque .comentario.mio {
margin-left: auto;
border-radius: 14px 14px 4px 14px;
background: var(--color-primary-light);
border-color: var(--color-primary-light);
box-shadow: none;
}
.caso-bloque .comentario-cabecera {
display: flex; justify-content: space-between; gap: 1rem;
font-size: .78rem; color: var(--color-text-muted); margin-bottom: .3rem;
}
@media (max-width: 600px) {
.caso-radicado { font-size: 1.3rem; }
.pqrs-consulta { flex-direction: column; align-items: stretch; text-align: center; }
.pqrs-consulta .btn-grande { width: 100%; }
}
/* Aviso de visibilidad en una tarea nacida de PQRS: al otro lado hay alguien mirando. Se pinta
distinto del resto de tarjetas porque su función es que NO pase desapercibido. */
.card-pqrs-visible { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--sec-clientes); background: var(--sec-clientes-bg); }
.lista-visibilidad { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.lista-visibilidad li { margin-bottom: .3rem; }
.lista-visibilidad.si li::marker { color: var(--color-success); }
.lista-visibilidad.no li::marker { color: var(--color-danger); }
/* ===== PQRS: el caso en la bandeja =====
Una tarjeta con zonas claras y en el mismo orden siempre: qué caso es (cabecera), quién
reclama y qué dijo (columna principal), la ficha del caso (columna lateral), qué ha pasado
desde entonces (línea de tiempo) y qué se puede hacer ahora (pie). Una sola tinta: el azul de
la marca para el avatar, el texto citado y la acción principal. Las etiquetas van en gris;
el único color que "grita" es el punto del semáforo del plazo legal. */
.card.pqrs-caso { padding: 0; overflow: hidden; }
.pqrs-caso-cab {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .5rem 1rem;
padding: .8rem 1.35rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.pqrs-caso-ids { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.pqrs-caso-plazo {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem 1rem;
font-size: .8rem;
color: var(--color-text-muted);
}
.pqrs-caso-fecha { white-space: nowrap; }
/* Etiqueta neutra: borde fino, sin relleno de color. La de tipo va en negrita porque es lo
primero que se lee después del radicado; la de alerta (fraude) es la única en rojo. */
.pqrs-etq {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .18rem .6rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
font-size: .78rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-text-muted);
white-space: nowrap;
}
.pqrs-etq-tipo { color: var(--color-text); font-weight: 700; border-color: var(--color-border-strong); }
.pqrs-etq-alerta { color: var(--color-danger); border-color: #f0c2be; background: var(--color-danger-bg); font-weight: 700; }
.pqrs-etq-socio { color: var(--color-text); border-color: var(--color-border-strong); }
/* Semáforo del plazo: un punto de color y texto en gris; en rojo solo si ya venció. */
.pqrs-semaforo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.pqrs-semaforo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.pqrs-semaforo.pronto::before { background: #e0a100; }
.pqrs-semaforo.vencida { color: var(--color-danger); }
.pqrs-semaforo.vencida::before { background: var(--color-danger); }
.pqrs-caso-cuerpo {
display: grid;
grid-template-columns: minmax(0, 1fr) 17rem;
gap: 1.25rem 2rem;
padding: 1.1rem 1.35rem;
}
.pqrs-caso-principal { min-width: 0; display: grid; gap: .9rem; align-content: start; }
.pqrs-caso-persona { display: flex; align-items: flex-start; gap: .85rem; }
.pqrs-caso-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light);
color: var(--color-primary);
font-weight: 700;
font-size: 1.05rem;
}
.pqrs-caso-avatar.anonimo { background: #eceef4; color: var(--color-text-muted); }
.pqrs-caso-quien { min-width: 0; display: grid; gap: .25rem; }
.pqrs-caso-nombre { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.pqrs-caso-datos { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 0; font-size: .86rem; color: var(--color-text-muted); }
.pqrs-caso-datos > * + *::before { content: "·"; margin: 0 .5rem; color: #b7bdcc; }
.pqrs-caso-datos .btn-link { font-size: .84rem; font-weight: 600; }
.pqrs-caso-texto {
margin: 0;
padding: .85rem 1.05rem;
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--color-surface-2);
white-space: pre-line;
line-height: 1.6;
font-size: .97rem;
}
.pqrs-caso-adjuntos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* La ficha lateral: rótulo arriba en gris pequeño, valor debajo. Se lee como una columna de
datos de expediente, no como una hilera de chips. */
.pqrs-caso-ficha {
display: grid;
gap: .65rem;
align-content: start;
padding-left: 1.25rem;
border-left: 1px solid var(--color-border);
font-size: .86rem;
}
.pqrs-caso-ficha .dato { display: grid; gap: .1rem; min-width: 0; }
.pqrs-caso-ficha .rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.pqrs-caso-ficha .dato > span:not(.rotulo) { color: var(--color-text); overflow-wrap: anywhere; }
.pqrs-caso-ficha .codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; letter-spacing: .02em; }
/* Línea de tiempo de hechos: un punto gris por hecho y una regla vertical que los une. La
respuesta y la decisión son los dos hechos que importan: llevan el punto de color y el
texto entero, sin fondos de color. */
.pqrs-caso-hechos {
display: grid;
gap: .55rem;
padding: .9rem 1.35rem 1rem;
border-top: 1px solid var(--color-border);
}
.pqrs-hecho {
position: relative;
display: grid;
grid-template-columns: 1.1rem 1fr;
gap: .4rem;
align-items: start;
font-size: .87rem;
line-height: 1.5;
}
.pqrs-hecho .hecho-punto {
width: .55rem;
height: .55rem;
margin: .45rem auto 0;
border-radius: 50%;
background: #c3c9d8;
}
.pqrs-hecho:not(:last-child)::before {
content: "";
position: absolute;
left: calc(.55rem - 1px);
top: 1.05rem;
bottom: -.6rem;
width: 2px;
background: var(--color-border);
}
.pqrs-hecho .hecho-etiqueta { font-weight: 700; margin-right: .4rem; color: var(--color-text); }
.pqrs-hecho .hecho-meta { color: var(--color-text-muted); }
.pqrs-hecho .texto {
margin-top: .35rem;
padding: .6rem .85rem;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
white-space: pre-line;
color: var(--color-text);
}
.pqrs-hecho-respuesta.ok .hecho-punto, .pqrs-hecho-decision .hecho-punto { background: var(--color-success); }
.pqrs-hecho-respuesta.ok .hecho-etiqueta { color: var(--color-success); }
.pqrs-hecho-respuesta.tarde .hecho-punto { background: var(--color-danger); }
.pqrs-hecho-respuesta.tarde .hecho-etiqueta { color: var(--color-danger); }
/* Pie: la acción principal en azul (una sola), las demás en blanco con borde. Sin sombras de
color: los botones no compiten con el contenido. */
.pqrs-caso-acciones {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .5rem 1rem;
padding: .7rem 1.35rem;
border-top: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.pqrs-caso-acciones .grupo { display: flex; flex-wrap: wrap; gap: .4rem; }
.pqrs-caso-acciones .btn { box-shadow: none; }
.pqrs-caso-acciones .btn-secondary { color: var(--color-text-muted); }
.pqrs-caso-acciones .btn-secondary:hover { color: var(--color-text); }
.pqrs-caso-acciones .btn-peligro:hover { color: var(--color-danger); border-color: #f0c2be; background: var(--color-danger-bg); }
.pqrs-caso-acciones .btn-link { font-size: .86rem; color: var(--color-text-muted); }
.pqrs-caso-acciones .btn-link:hover { color: var(--color-primary); }
.pqrs-caso-bitacora {
display: grid;
gap: .45rem;
padding: .85rem 1.35rem 1rem;
border-top: 1px dashed var(--color-border);
background: var(--color-surface-2);
}
.pqrs-caso-bitacora .evento { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem; font-size: .82rem; line-height: 1.5; }
.pqrs-caso-bitacora .cuando { color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 900px) {
.pqrs-caso-cuerpo { grid-template-columns: 1fr; }
.pqrs-caso-ficha {
padding-left: 0;
border-left: none;
padding-top: .9rem;
border-top: 1px solid var(--color-border);
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: .6rem 1rem;
}
}
@media (max-width: 640px) {
.pqrs-caso-cab, .pqrs-caso-cuerpo, .pqrs-caso-hechos, .pqrs-caso-acciones, .pqrs-caso-bitacora { padding-left: 1rem; padding-right: 1rem; }
.pqrs-caso-bitacora .evento { grid-template-columns: 1fr; gap: .1rem; }
}
/* ===== Reporte de resultados de una encuesta PQRS (pantalla e impresión) =====
Marcas finas, una sola tinta para la serie, rejilla en gris de un paso, y las tres bandas de
satisfacción con la pareja divergente rojo/azul y gris neutro en medio. */
.rep-encuesta {
--rep-serie: var(--color-primary);
--rep-bueno: var(--color-primary);
--rep-neutro: #c3c2b7;
--rep-malo: #e34948;
--rep-grid: #e3e7f0;
--rep-eje: #c3c2b7;
}
.rep-seccion { margin-bottom: 1.5rem; break-inside: avoid; }
.rep-seccion h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.rep-seccion .rep-sub { margin: 0 0 .85rem; font-size: .85rem; color: var(--color-text-muted); }
.rep-titulo { font-size: 1.6rem; margin: .25rem 0 .2rem; }
.rep-estado { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.rep-kpi { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .9rem 1rem; background: var(--color-surface); break-inside: avoid; }
.rep-kpi .valor { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.rep-kpi .etiqueta { font-size: .85rem; color: var(--color-text-muted); margin-top: .3rem; }
.rep-kpi .delta { font-size: .8rem; margin-top: .35rem; color: var(--color-text-muted); }
.rep-delta-sube { color: var(--color-success); font-weight: 600; }
.rep-delta-baja { color: var(--color-danger); font-weight: 600; }
.rep-lectura { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.rep-lectura li { margin-bottom: .25rem; }
.rep-grafico { width: 100%; height: auto; display: block; }
.rep-grafico text { font-family: inherit; fill: var(--color-text-muted); font-size: 11px; }
.rep-grafico .rep-valor { fill: var(--color-text); font-weight: 600; }
.rep-grafico .rep-grid { stroke: var(--rep-grid); stroke-width: 1; }
.rep-grafico .rep-eje { stroke: var(--rep-eje); stroke-width: 1; }
.rep-barras { display: grid; gap: .45rem; }
.rep-barra-fila { display: grid; grid-template-columns: minmax(160px, 2fr) 3fr 3rem; gap: .75rem; align-items: center; font-size: .86rem; }
.rep-barra-pista { height: 14px; background: var(--color-bg); border-radius: 4px; }
.rep-barra-pista > div { height: 100%; background: var(--rep-serie); border-radius: 0 4px 4px 0; min-width: 2px; }
.rep-barra-valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-apilada { display: flex; gap: 2px; height: 26px; border-radius: 4px; overflow: hidden; margin: .25rem 0 .6rem; }
.rep-apilada > div { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 700; min-width: 2px; }
.rep-apilada .malo { background: var(--rep-malo); }
.rep-apilada .neutro { background: var(--rep-neutro); color: var(--color-text); }
.rep-apilada .bueno { background: var(--rep-bueno); }
.rep-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .85rem; color: var(--color-text); }
.rep-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--sw); }
.rep-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rep-tabla th, .rep-tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.rep-tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-muted); }
.rep-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tabla tfoot td { border-bottom: none; border-top: 2px solid var(--color-border); }
.rep-mini { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.rep-mini span { width: 6px; background: var(--rep-serie); border-radius: 2px 2px 0 0; display: block; }
.rep-comentario { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-border); padding: .4rem .75rem; margin-bottom: .5rem; font-size: .9rem; break-inside: avoid; }
.rep-comentario .cuando { font-size: .75rem; color: var(--color-text-muted); }
.rep-nota { font-size: .78rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: .6rem; margin-top: 1.5rem; }
.rep-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) {
.rep-dos { grid-template-columns: 1fr; }
.rep-barra-fila { grid-template-columns: 1fr 3fr 3rem; }
}
@media print {
.rep-encuesta { max-width: none; }
.rep-dos { grid-template-columns: 1fr 1fr; }
.rep-kpis { grid-template-columns: repeat(4, 1fr); }
.rep-encuesta .card { box-shadow: none; }
.rep-apilada > div, .rep-barra-pista > div, .rep-mini span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ===== Campana del chat en la barra superior ===== */
/* Con pendientes, el icono se mece un poco: el contador rojo ya late (misma animación que la
campana de notificaciones); el gesto extra es para que el ojo lo encuentre entre lo demás. */
.notif-boton.chat-campana-viva { animation: chat-campana-mecer 2.4s ease-in-out infinite; }
@keyframes chat-campana-mecer {
0%, 70%, 100% { transform: rotate(0); }
75% { transform: rotate(-12deg); }
80% { transform: rotate(10deg); }
85% { transform: rotate(-8deg); }
90% { transform: rotate(6deg); }
95% { transform: rotate(-3deg); }
}
.chat-campana-sonido { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; cursor: pointer; }
.chat-campana-sonido input { margin: 0; }
.chat-campana-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chat-campana-ultimo { color: var(--color-text-muted); font-size: .88rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-campana-pie { position: sticky; bottom: 0; padding: .7rem 1.25rem; background: var(--color-surface); border-top: 1px solid var(--color-border); font-size: .9rem; text-align: center; }
.chat-campana-pie a { font-weight: 600; }
/* El contador del enlace "Chat" del menú lateral, a la derecha del texto. */
.sidebar-nav a .chat-conv-badge { margin-left: .4rem; }
@media (prefers-reduced-motion: reduce) { .notif-boton.chat-campana-viva { animation: none; } }
/* ===== Empleado del mes: el cartel del podio =====
Festivo pero sobrio: un solo azul de marca con el oro, la plata y el bronce de los puestos; el
resto en blanco y gris para que en papel siga viéndose bien. */
.podio-mes-actual { font-weight: 700; padding: 0 .75rem; min-width: 11rem; text-align: center; display: inline-block; }
.podio-hoja { position: relative; overflow: hidden; }
.podio-confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.podio-confeti span {
position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .85;
animation: podio-caer 7s linear infinite;
}
@keyframes podio-caer {
0% { transform: translateY(-20px) rotate(0); opacity: 0; }
10% { opacity: .85; }
100% { transform: translateY(520px) rotate(540deg); opacity: 0; }
}
.podio-cabecera { position: relative; text-align: center; padding: 1.5rem 1rem .5rem; }
.podio-empresa { font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-muted); }
.podio-titulo { font-size: 2.4rem; margin: .25rem 0 0; letter-spacing: -.5px; }
.podio-mes { font-size: 1.35rem; font-weight: 600; color: var(--color-primary); margin-top: .15rem; }
.podio-aviso { display: inline-block; margin-top: .6rem; font-size: .82rem; color: var(--color-warning); background: var(--color-warning-bg); padding: .25rem .75rem; border-radius: 999px; }
.podio { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: .75rem; align-items: end; padding: 1.75rem .5rem 0; }
.podio-columna { display: flex; flex-direction: column; align-items: center; }
.podio-persona { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding-bottom: .75rem; width: 100%; }
.podio-persona.vacio { opacity: .45; }
.podio-medalla { font-size: 2.2rem; line-height: 1; }
.podio-avatar {
width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--color-primary); color: #fff; font-weight: 800; font-size: 1.6rem; letter-spacing: .5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--color-primary-light);
}
.puesto-1 .podio-avatar { width: 92px; height: 92px; font-size: 2rem; box-shadow: 0 0 0 4px #fff, 0 0 0 8px #f5c518; }
.puesto-2 .podio-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #b8bcc6; }
.puesto-3 .podio-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #d9a066; }
.podio-nombre { font-weight: 800; font-size: 1.1rem; line-height: 1.2; margin-top: .35rem; }
.puesto-1 .podio-nombre { font-size: 1.35rem; }
.podio-cargo { font-size: .82rem; color: var(--color-text-muted); }
.podio-puntaje { margin-top: .25rem; }
.podio-puntaje strong { font-size: 1.8rem; line-height: 1; }
.puesto-1 .podio-puntaje strong { font-size: 2.3rem; color: var(--color-primary); }
.podio-puntaje span { font-size: .8rem; color: var(--color-text-muted); margin-left: .2rem; }
.podio-cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .7rem; font-size: .82rem; color: var(--color-text); }
.podio-insignias { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-top: .3rem; }
.podio-insignia { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.podio-bloque {
width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: .6rem;
border-radius: 10px 10px 0 0; color: #fff; font-weight: 800; font-size: 1.4rem;
background: var(--color-primary);
}
.puesto-1 .podio-bloque { height: 150px; background: #ffd85c; color: #4a3600; }
.puesto-2 .podio-bloque { height: 105px; background: #d5d8df; color: #2c2f36; }
.puesto-3 .podio-bloque { height: 80px; background: #e8b27f; color: #3c2210; }
.podio-mensaje { margin: 1.5rem auto 0; max-width: 640px; text-align: center; font-size: 1.15rem; font-style: italic; line-height: 1.5; padding: 1rem 1.25rem; border-top: 2px solid var(--color-primary-light); border-bottom: 2px solid var(--color-primary-light); }
.podio-firma { font-style: normal; font-size: .85rem; color: var(--color-text-muted); margin-top: .4rem; }
.podio-seccion { margin-top: 1.5rem; break-inside: avoid; }
.podio-seccion h3 { margin: 0 0 .75rem; }
.podio-tabla td:first-child { color: var(--color-text-muted); }
.podio-fila-puntos td { background: var(--color-surface-2); font-size: .8rem; }
.podio-fila-puntos td:first-child { padding-left: 1.25rem; }
.podio-insignias-lista { margin-top: .9rem; display: grid; gap: .35rem; font-size: .88rem; line-height: 1.5; }
.podio-menciones { display: grid; gap: .4rem; }
.podio-mencion { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .9rem; }
.podio-mencion-puesto { font-weight: 800; color: var(--color-primary); }
.podio-mencion-nombre { font-weight: 600; }
.podio-mencion-datos { color: var(--color-text-muted); font-size: .82rem; white-space: nowrap; }
@media (max-width: 640px) {
.podio { grid-template-columns: 1fr; align-items: stretch; }
.podio-columna { order: 2; } .puesto-1 { order: 1; }
.podio-bloque, .puesto-1 .podio-bloque, .puesto-2 .podio-bloque, .puesto-3 .podio-bloque { height: 44px; }
.podio-mencion { grid-template-columns: 2.6rem 1fr; } .podio-mencion-datos { grid-column: 2; white-space: normal; }
}
@media print {
.podio-hoja { max-width: none; overflow: visible; }
.podio-confeti { display: none; }
.podio-hoja .card { border: none; padding: 0; }
.podio-avatar, .podio-bloque, .podio-insignia, .podio-fila-puntos td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.podio { break-inside: avoid; }
}
/* ===== Selector de cuentas (barra superior) =====
Varias cuentas abiertas a la vez, como en un cliente de correo. El botón enseña la cuenta
activa; el panel, las demás con sus pendientes. Un solo color: el azul del avatar. */
.cuentas-wrapper { position: relative; }
.cuentas-boton {
position: relative;
display: flex; align-items: center; gap: .55rem;
padding: .3rem .6rem .3rem .3rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-family: inherit;
transition: box-shadow var(--transicion), border-color var(--transicion);
}
.cuentas-boton:hover { box-shadow: var(--elev-1); border-color: var(--color-border-strong); }
.cuentas-avatar {
flex-shrink: 0;
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--color-primary-light); color: var(--color-primary);
font-weight: 700; font-size: .85rem;
}
.cuentas-etiqueta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.cuentas-empresa { font-weight: 700; font-size: .85rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuentas-usuario { font-size: .72rem; color: var(--color-text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuentas-flecha { font-size: .75rem; color: var(--color-text-muted); }
.cuentas-punto {
position: absolute; top: 2px; right: 2px;
width: .6rem; height: .6rem; border-radius: 50%;
background: var(--color-danger);
border: 2px solid var(--color-surface);
}
.cuentas-panel {
position: absolute; right: 0; top: 3.2rem;
width: min(340px, calc(100vw - 1.5rem));
background: var(--color-surface);
border-radius: var(--radius);
box-shadow: var(--elev-4);
z-index: 50;
overflow: hidden;
animation: escalar var(--dur-2) var(--ease-out) both;
transform-origin: top right;
}
.cuentas-lista { display: grid; padding: .4rem; }
.cuentas-item {
display: flex; align-items: center; gap: .7rem;
width: 100%;
padding: .55rem .7rem;
border: none; border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: inherit; text-align: left;
cursor: pointer;
transition: background var(--transicion);
}
.cuentas-item:hover { background: var(--color-primary-light); }
.cuentas-item.activa { background: var(--color-primary-light); cursor: default; }
.cuentas-item-texto { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.cuentas-item-empresa { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuentas-item-detalle { font-size: .76rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuentas-check { color: var(--color-primary); font-weight: 800; }
.cuentas-pendientes {
background: var(--color-danger); color: #fff;
font-size: .7rem; font-weight: 800;
border-radius: 999px; padding: 2px 7px;
}
.cuentas-acciones { display: grid; border-top: 1px solid var(--color-border); padding: .4rem; }
.cuentas-accion {
display: block; width: 100%;
padding: .55rem .7rem;
border: none; border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: inherit; font-size: .88rem; text-align: left;
cursor: pointer;
transition: background var(--transicion);
}
.cuentas-accion:hover { background: var(--color-primary-light); }
.cuentas-accion-nota { color: var(--color-text-muted); cursor: default; }
.cuentas-accion-nota:hover { background: transparent; }
.cuentas-accion-peligro { color: var(--color-danger); }
.cuentas-accion-peligro:hover { background: var(--color-danger-bg); }
/* El toast de otra cuenta dice de qué empresa viene, encima del título. */
.toast-cuenta {
display: inline-block;
font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: .1rem .5rem; border-radius: 999px;
background: rgba(255, 255, 255, .35);
margin-bottom: .2rem;
}
@media (max-width: 700px) {
.cuentas-etiqueta, .cuentas-flecha { display: none; }
.cuentas-boton { padding: .2rem; border: none; background: transparent; }
/* Con top: 4rem (60px) el panel nacía dentro de la barra y la franja de sección lo cruzaba. */
.cuentas-panel {
position: fixed; left: .75rem; right: .75rem; width: auto;
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 10px);
}
}
/* ---------- Foto de perfil ----------
Un mismo componente (Avatar) pinta la foto de la persona o, si no subió ninguna, sus
iniciales. La clase de tamaño y anillo la pone cada pantalla (podio-avatar, chat-conv-avatar,
responsable-inicial…); .avatar-foto solo cambia el relleno del círculo por la imagen. Va al
final para ganar a cualquier fondo de color declarado antes. */
.avatar-foto {
object-fit: cover;
padding: 0;
background: var(--color-surface);
}
/* Tamaños genéricos para donde antes solo había un nombre: listados de personas, participantes
del chat, menciones del podio. Mismo azul que el chip de responsable. */
.avatar-chico,
.avatar-mediano {
flex: none;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.avatar-chico { width: 1.6rem; height: 1.6rem; font-size: .7rem; }
.avatar-mediano { width: 2.5rem; height: 2.5rem; font-size: .9rem; }
/* Nombre con su avatar delante, alineados. */
.persona { display: inline-flex; align-items: center; gap: .5rem; }
.chat-hilo-cabecera .persona { gap: .75rem; }
/* La cabeza flotante del chat es un botón redondo: la foto lo llena entero. */
.chat-cabeza .avatar-foto { width: 100%; height: 100%; border-radius: 50%; }
.podio-mencion-nombre { display: flex; align-items: center; gap: .5rem; }
/* Mi cuenta: la foto grande con sus acciones al lado. */
.perfil-foto { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.perfil-foto-imagen {
width: 96px; height: 96px; flex: none;
border-radius: 50%;
background: var(--color-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; font-weight: 700;
box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-primary-light);
}
.perfil-foto-acciones { display: flex; flex-direction: column; gap: .5rem; min-width: 260px; }
/* ---------- Revisión del almacenamiento en Azure (SuperAdmin) ---------- */
.almacen-datos {
display: grid;
grid-template-columns: max-content 1fr;
gap: .3rem 1rem;
margin: .75rem 0 0;
font-size: .92rem;
}
.almacen-datos dt { color: var(--color-text-muted); }
.almacen-datos dd { margin: 0; }
.almacen-tablas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.almacen-tablas h4 { margin-bottom: .5rem; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.almacen-avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.almacen-avisos h4 { margin-bottom: .25rem; }
.almacen-destinatario {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
padding: .4rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem;
}
.almacen-destinatario .btn-link { margin-left: auto; }
.almacen-lista { list-style: none; padding: 0; margin: 0; font-size: .92rem; display: grid; gap: .2rem; }
.kpi-alerta .kpi-valor { color: var(--color-danger); }
/* ---------- Bitácora: el botón de la barra y sus pantallas ----------
Abajo a la izquierda, lejos de las burbujas del chat (abajo a la derecha). Un solo color: el
azul de la marca; en curso, el reloj sustituye al icono para que se vea que algo corre. */
/* El botón de la bitácora vive en la barra superior, delante del de emergencia: misma píldora
que ese botón, en el color primario. El panel se despliega debajo, como el de la campana. */
.bitacora-wrapper { position: relative; }
.bitacora-boton {
display: inline-flex; align-items: center; gap: .4rem;
border: 1px solid var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark, var(--color-primary));
border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit;
white-space: nowrap;
transition: background var(--transicion), color var(--transicion);
}
.bitacora-boton:hover { background: var(--color-primary); color: #fff; }
.bitacora-boton.activo { background: var(--color-primary); color: #fff; font-variant-numeric: tabular-nums; }
.bitacora-panel {
position: absolute; right: 0; top: 3.2rem;
width: min(420px, calc(100vw - 1.5rem));
max-height: min(80vh, 640px); overflow-y: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--elev-4);
padding: 1rem;
display: grid; gap: .75rem;
z-index: 50;
animation: escalar var(--dur-2) var(--ease-out) both;
transform-origin: top right;
}
.bitacora-panel-cabecera { display: flex; justify-content: space-between; align-items: center; }
.bitacora-categorias { display: flex; flex-wrap: wrap; gap: .4rem; }
.bitacora-categoria {
border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; cursor: pointer; font-family: inherit;
}
.bitacora-categoria.activa { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.bitacora-acciones { display: grid; gap: .5rem; }
.bitacora-yalohice { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.bitacora-minutos { width: 76px; padding: .3rem .5rem; }
.bitacora-encurso { display: grid; gap: .2rem; }
.bitacora-encurso-titulo { font-weight: 600; }
/* El botón dice lo que es: icono + "¿Qué estás haciendo?". Con algo en curso enseña el reloj;
con evidencias pendientes, un 📎 con la cuenta. En el teléfono, como el de emergencia, se
queda con el icono (y el reloj o el 📎 si los hay). */
.bitacora-boton-icono { font-size: 1.05rem; line-height: 1; }
.bitacora-boton-texto { font-size: .9rem; font-weight: 700; }
.bitacora-boton-aviso {
display: inline-flex; align-items: center; gap: .15rem;
background: var(--color-warning, #ffc02e); color: #1d2433;
border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; font-weight: 700;
}
.bitacora-boton.con-pendientes { box-shadow: 0 0 0 3px rgba(255, 192, 46, .45); }
@media (max-width: 700px) {
.bitacora-boton { padding: .35rem .55rem; }
.bitacora-boton-texto { display: none; }
/* Como el panel de la campana: en el teléfono se fija al viewport, no al botón. */
.bitacora-panel {
position: fixed; left: .75rem; right: .75rem; width: auto;
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 10px);
max-height: calc(100dvh - var(--topbar-height) - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
}
/* La evidencia dentro del panel: dos botones (cámara y archivo), "la subo luego" y la
miniatura de lo elegido. Las pendientes salen arriba, una por fila, con sus botones. */
.bitacora-evidencia { display: grid; gap: .45rem; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--color-bg); }
.bitacora-evidencia-titulo { font-size: .88rem; font-weight: 600; }
.bitacora-evidencia-botones { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.bitacora-evidencia-botones .btn { position: relative; overflow: hidden; cursor: pointer; }
.bitacora-evidencia-luego { margin: 0; font-size: .85rem; gap: .3rem; }
.bitacora-evidencia-elegida { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.bitacora-evidencia-miniatura { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.bitacora-pendientes { display: grid; gap: .5rem; border: 1px solid var(--color-warning, #ffc02e); border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--color-warning-bg, #fff6d6); }
.bitacora-pendiente { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bitacora-pendiente > div:first-child { display: grid; gap: .1rem; min-width: 0; }
.bitacora-pendiente strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.bitacora-encurso-reloj { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.bitacora-barras { display: grid; gap: .45rem; }
.bitacora-barra-fila { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: .75rem; font-size: .9rem; }
.bitacora-barra { height: .6rem; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.bitacora-barra > div { height: 100%; background: var(--color-primary); border-radius: 999px; }
.bitacora-barra-valor { color: var(--color-text-muted); white-space: nowrap; }
.fila-revisar > td { background: var(--color-warning-bg); }
.badge-progreso { background: var(--color-primary-light); color: var(--color-primary-dark); }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border); }
.pestana {
border: none; background: none; font-family: inherit; font-size: .95rem; cursor: pointer;
padding: .5rem .9rem; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana.activa { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.podio-lideres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.podio-lider { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
@media (max-width: 640px) {
.bitacora-barra-fila { grid-template-columns: 1fr; gap: .2rem; }
}
/* El "¿sigues en ello?" del cronómetro: cada media hora, una tarjeta en medio de la pantalla
con dos salidas (sigo aquí / ya terminé) y la cuenta atrás. Toma la pantalla, como la
emergencia, pero en el azul de la marca y sin sonar: hay que responder, no asustarse. La
misma tarjeta cuenta después que se cerró sola y ofrece retomarla. */
.bitacora-pregunta-velo {
position: fixed; inset: 0; z-index: 900;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
background: rgba(24, 153, 239, .35);
}
.bitacora-pregunta {
width: min(460px, 100%);
background: var(--color-surface);
border: 3px solid var(--color-primary);
border-radius: var(--radius);
box-shadow: var(--elev-4);
padding: 1.5rem;
display: grid; gap: .6rem; justify-items: center; text-align: center;
animation: escalar var(--dur-2) var(--ease-out) both;
}
.bitacora-pregunta h2 { margin: 0; font-size: 1.6rem; }
.bitacora-pregunta p { margin: 0; }
.bitacora-pregunta-icono { font-size: 2.6rem; line-height: 1; }
.bitacora-pregunta-que { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.bitacora-pregunta-plazo { font-variant-numeric: tabular-nums; }
.bitacora-pregunta-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .4rem; }
.bitacora-pregunta-botones .btn { font-size: 1.05rem; padding: .7rem 1.4rem; }
@media print { .bitacora-wrapper { display: none; } }
/* La vista previa del café de la mañana: el correo tal cual, dentro de un marco. */
.cafe-vista { width: 100%; height: 900px; border: 1px solid var(--color-border); border-radius: var(--radius); margin-top: 1rem; background: #f3f5fa; }
/* ---------- Reconocimientos: la vitrina y las tarjetas ----------
Sobrio: un solo acento (el dorado del premio) sobre el fondo claro; el emoji hace de icono. */
.reco-lista { display: grid; gap: 1rem; }
.reco-card.inactivo { opacity: .6; }
.reco-card-cabecera { display: flex; gap: .9rem; align-items: flex-start; flex-wrap: wrap; }
.reco-card-icono { font-size: 2.2rem; line-height: 1; flex: none; }
.reco-card-titulo { flex: 1; min-width: 220px; }
.reco-card-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: .75rem; }
.reco-ranking { margin: .4rem 0 0 1.2rem; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.reco-ranking li { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.reco-ranking-cifras { color: var(--color-text-muted); font-size: .85rem; }
.reco-ganadores { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }
.reco-ganadores li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.reco-vitrina { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.reco-premio {
border: 1px solid #f0d78a; background: var(--color-warning-bg); border-radius: var(--radius);
padding: .9rem; text-align: center; display: grid; gap: .25rem;
}
.reco-premio.entregado { border-color: var(--color-border); background: var(--color-surface); }
.reco-premio-icono { font-size: 2.4rem; line-height: 1; }
.reco-premio-nombre { font-weight: 700; }
.reco-premio-detalle { font-size: .82rem; color: var(--color-text-muted); }
.reco-premio-cifras { font-size: .82rem; }
.reco-premio-estado { font-size: .8rem; color: var(--color-text-muted); }
.reco-tipos { display: flex; flex-wrap: wrap; gap: .4rem; }
.reco-tipo {
border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
border-radius: 999px; padding: .3rem .75rem; font-size: .88rem; cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; gap: .35rem;
}
.reco-tipo.activo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.reco-tipo-icono { font-size: 1.05rem; }
/* ---------- Chat: zumbido ---------- */
.chat-zumbido-boton {
border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
border-radius: 999px; width: 40px; height: 40px; cursor: pointer; font-size: 1.1rem; line-height: 1; flex: none;
}
.chat-zumbido-boton:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary); }
.chat-zumbido-boton:disabled { opacity: .5; cursor: default; }
.chat-zumbido-aviso {
align-self: center; font-size: .8rem; color: var(--color-text-muted);
border: 1px dashed var(--color-border); border-radius: 999px; padding: .15rem .7rem; margin: .2rem 0;
}
@keyframes zumbido {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-6px, 3px); }
20% { transform: translate(6px, -4px); }
30% { transform: translate(-5px, -3px); }
40% { transform: translate(5px, 4px); }
50% { transform: translate(-4px, 2px); }
60% { transform: translate(4px, -3px); }
70% { transform: translate(-3px, -2px); }
80% { transform: translate(3px, 2px); }
90% { transform: translate(-2px, 1px); }
}
body.zumbido { animation: zumbido .6s linear both; }
/* ---------- Tareas ancladas ---------- */
.btn-ancla {
border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
padding: .25rem .35rem; margin-right: .25rem; opacity: .35; filter: grayscale(1);
transition: opacity var(--transicion), filter var(--transicion);
}
.btn-ancla:hover:not(:disabled), .btn-ancla.anclada { opacity: 1; filter: none; }
.btn-ancla:disabled { cursor: default; }
.text-nowrap { white-space: nowrap; }
/* ---------- Emergencias: el botón de pánico y la pantalla roja ----------
Aquí el rojo está justificado: es la única pantalla del sistema que debe gritar. */
.btn-emergencia {
display: inline-flex; align-items: center; gap: .35rem;
border: 1px solid var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger);
border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit;
}
.btn-emergencia:hover { background: var(--color-danger); color: #fff; }
@media (max-width: 700px) {
.btn-emergencia { padding: .35rem .55rem; }
.btn-emergencia-texto { display: none; }
}
.emergencia-modal { max-width: 560px; }
.emergencia-alcances { display: flex; gap: 1rem; flex-wrap: wrap; }
.emergencia-recientes { display: grid; gap: .5rem; }
.emergencia-reciente {
display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
border: 1px solid var(--color-border); border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem;
}
.emergencia-reciente.viva { border-color: var(--color-danger); background: var(--color-danger-bg); }
@keyframes emergencia-latido {
0%, 100% { background: #b3160c; }
50% { background: #e0261a; }
}
.emergencia-capa {
position: fixed; inset: 0; z-index: 5000;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
color: #fff; text-align: center;
animation: emergencia-latido 1.2s ease-in-out infinite;
}
.emergencia-contenido { max-width: 640px; display: grid; gap: 1rem; justify-items: center; }
.emergencia-etiqueta { font-size: .95rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.emergencia-tipo { font-size: clamp(2.2rem, 8vw, 4rem); font-weight: 900; margin: 0; line-height: 1.05; color: #fff; }
.emergencia-mensaje { font-size: clamp(1.15rem, 3.5vw, 1.6rem); font-weight: 600; margin: 0; white-space: pre-line; }
.emergencia-meta { margin: 0; opacity: .9; font-size: .95rem; }
.emergencia-error { margin: 0; background: rgba(0, 0, 0, .35); border-radius: var(--radius); padding: .5rem .9rem; }
.emergencia-boton {
border: 3px solid #fff; background: var(--color-surface); color: #b3160c;
font-size: 1.4rem; font-weight: 900; font-family: inherit;
padding: .9rem 2.6rem; border-radius: 999px; cursor: pointer; margin-top: .5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.emergencia-boton:hover:not(:disabled) { background: #ffe9e6; }
.emergencia-boton:disabled { opacity: .7; cursor: default; }
@media print { .emergencia-capa { display: none; } }
/* Cola de revisión en el detalle de la tarea: dos botones grandes para pasar de una entrega
por revisar a la siguiente sin volver a Mi día. En pantallas angostas ocupan todo el ancho. */
.cola-revision-botones { align-items: center; }
.cola-revision-botones .btn-grande { white-space: nowrap; }
/* Velo entre una entrega y la siguiente: tapa el contenido (que sigue pintado para no perder
el scroll) y bloquea los clics hasta que carga la nueva. Por debajo de la barra superior. */
.tarea-cambiando {
position: fixed; inset: 0; z-index: 85;
background: rgba(245, 247, 250, .55);
background: color-mix(in srgb, var(--color-bg) 55%, transparent);
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
cursor: progress;
animation: desvanecer var(--dur-2) var(--ease-out) both;
}
.tarea-cambiando span {
background: var(--color-text); color: var(--color-surface);
font-size: .85rem; font-weight: 600;
padding: .45rem .9rem; border-radius: 999px;
box-shadow: var(--elev-3);
}
@media (max-width: 640px) {
.cola-revision-botones { width: 100%; }
.cola-revision-botones .btn-grande { flex: 1; text-align: center; white-space: normal; }
}
/* ---------------- Visor de imágenes con zoom y navegación ---------------- */
.visor-overlay { flex-direction: column; outline: none; }
.visor-barra {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
width: min(96vw, 1100px);
padding: .5rem .75rem;
background: rgba(20, 24, 33, .85);
color: #fff;
border-radius: var(--radius-sm);
margin-bottom: .5rem;
}
.visor-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.visor-contador { opacity: .8; white-space: nowrap; }
.visor-zoom { display: flex; align-items: center; gap: .35rem; }
.visor-porcentaje { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.visor-lienzo {
width: min(96vw, 1100px);
height: min(78vh, 800px);
overflow: auto;
display: grid;
place-items: center;
background: rgba(0, 0, 0, .35);
border-radius: var(--radius);
}
.visor-imagen {
max-width: 100%;
max-height: 100%;
transform-origin: center center;
transition: transform .15s ease-out;
cursor: zoom-in;
border-radius: var(--radius-sm);
}
/* Con zoom la imagen crece de verdad (ancho en % del lienzo, sin transform) y sale del centrado:
así el scroll llega a las cuatro esquinas, también a la izquierda y arriba. */
.visor-imagen.ampliada { cursor: zoom-out; max-width: none; max-height: none; height: auto; transform: none; }
.visor-lienzo:has(.visor-imagen.ampliada) { place-items: start; }
.visor-flecha {
position: fixed; top: 50%; transform: translateY(-50%);
width: 3.2rem; height: 3.2rem;
border-radius: 999px; border: none;
background: rgba(255, 255, 255, .92);
color: var(--color-text);
font-size: 2rem; line-height: 1;
cursor: pointer;
box-shadow: var(--elev-3);
}
.visor-flecha:disabled { opacity: .35; cursor: not-allowed; }
.visor-anterior { left: 1rem; }
.visor-siguiente { right: 1rem; }
.visor-ayuda { color: rgba(255, 255, 255, .75); font-size: .85rem; margin: .5rem 0 0; }
@media (max-width: 640px) {
.visor-flecha { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; }
.visor-anterior { left: .35rem; }
.visor-siguiente { right: .35rem; }
.visor-ayuda { display: none; }
}
/* ---------------- Módulo de Recursos Humanos ---------------- */
/* Saldo de vacaciones: el número grande que el empleado busca primero. */
.rrhh-saldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.rrhh-saldo > div { padding: .85rem 1rem; border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--elev-1); text-align: center; }
.rrhh-saldo strong { display: block; font-size: 1.9rem; line-height: 1.1; }
.rrhh-saldo span { font-size: .85rem; color: var(--color-text-muted); }
.rrhh-saldo .principal { background: var(--color-primary); color: #fff; }
.rrhh-saldo .principal span { color: rgba(255,255,255,.85); }
/* Calendario de elección de días (formularios y solicitudes). */
.rrhh-dias { display: flex; flex-wrap: wrap; gap: .5rem; }
.rrhh-dia {
min-width: 6.2rem; padding: .55rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
background: var(--color-surface); cursor: pointer; text-align: center; font-size: .9rem; line-height: 1.25;
transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.rrhh-dia:hover:not(.lleno):not(.cerrado) { transform: translateY(-2px); box-shadow: var(--elev-2); }
.rrhh-dia.elegido { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rrhh-dia.lleno, .rrhh-dia.cerrado { opacity: .5; cursor: not-allowed; }
.rrhh-dia small { display: block; font-size: .75rem; opacity: .8; }
/* Muro: tarjetas grandes y cálidas. */
.muro { max-width: 760px; margin: 0 auto; }
.muro-tarjeta { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.muro-tarjeta.fijada { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); }
.muro-tarjeta.cumple { background: #fff7e6; }
.muro-tarjeta.aniversario { background: #e8f4ff; }
.muro-cabecera { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.muro-tipo { font-size: .8rem; color: var(--color-text-muted); }
.muro-titulo { font-size: 1.25rem; margin: 0 0 .35rem; }
.muro-texto { white-space: pre-line; font-size: 1.02rem; }
.muro-imagen { max-width: 100%; border-radius: var(--radius); margin-top: .75rem; }
.muro-reacciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.muro-reaccion {
border: 1px solid var(--color-border); border-radius: 999px; padding: .25rem .7rem; background: var(--color-surface);
cursor: pointer; font-size: .95rem; font-family: inherit;
}
.muro-reaccion.mia { background: var(--color-primary-light); border-color: var(--color-primary); }
.muro-comentario { display: flex; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--color-border); font-size: .92rem; }
.muro-comentario strong { white-space: nowrap; }
.muro-programada { opacity: .75; border: 1px dashed var(--color-border); }
/* Comunicados: el sello de leído/confirmado. */
.rrhh-comunicado { padding: 1rem 1.2rem; margin-bottom: .85rem; }
.rrhh-comunicado.sin-leer { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-warning, #d99a29); }
.rrhh-contenido { white-space: pre-line; margin: .5rem 0; }
.rrhh-lectura-ok { color: var(--color-success); font-weight: 600; }
.rrhh-lectura-no { color: var(--color-text-muted); }
/* Ficha del empleado impresa. */
.rrhh-ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.rrhh-ficha dt { color: var(--color-text-muted); font-size: .85rem; }
.rrhh-ficha dd { margin: 0; }
@media (max-width: 640px) {
.rrhh-ficha dl { grid-template-columns: 1fr; }
.rrhh-dia { min-width: calc(50% - .25rem); }
}
/* ---------------- Muro: red social interna ---------------- */
.muro-portada { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.muro-portada h1 { margin: 0 0 .25rem; font-size: 1.9rem; }
.muro-vacio { text-align: center; padding: 2.5rem 1rem; }
.muro-tarjeta { position: relative; overflow: hidden; padding: 1.25rem 1.4rem 1rem; margin-bottom: 1.25rem; border-radius: 18px; box-shadow: var(--elev-2); }
.muro-tarjeta.estilo-normal { background: var(--color-surface); }
.muro-tarjeta.estilo-celebracion { background: #fff5d6; }
.muro-tarjeta.estilo-anuncio { background: #e8edfc; border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); }
.muro-tarjeta.estilo-oscuro { background: var(--color-text); color: #f3f4f6; }
.muro-tarjeta.estilo-oscuro .text-muted, .muro-tarjeta.estilo-oscuro .muro-tipo { color: #cbd5e1; }
.muro-tarjeta.estilo-naturaleza { background: #e8fff1; }
.muro-tarjeta.estilo-fuego { background: #fff1e6; }
.muro-tarjeta.fijada::before { content: "\1F4CC"; position: absolute; top: .6rem; right: .8rem; font-size: 1.1rem; }
.muro-programada { opacity: .8; border: 2px dashed var(--color-border); }
.muro-cabecera { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; }
.muro-quien strong { font-size: 1.05rem; }
.muro-tipo { font-size: .82rem; color: var(--color-text-muted); }
.muro-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: rgba(41, 82, 217, .12); font-weight: 600; font-size: .78rem; }
.muro-logo { font-size: 2.2rem; }
.muro-acciones { margin-left: auto; display: flex; gap: .25rem; }
.avatar-grande { width: 52px; height: 52px; font-size: 1.2rem; }
.muro-emoji-hero { text-align: center; margin: .25rem 0 .5rem; }
.muro-titulo { font-size: 1.6rem; margin: .25rem 0 .5rem; line-height: 1.2; text-align: center; }
.muro-texto { font-size: 1.05rem; line-height: 1.55; }
.muro-texto p { margin: 0 0 .6rem; }
.muro-texto .muro-h { margin: .6rem 0 .3rem; font-size: 1.15rem; }
.muro-texto .muro-lista { margin: .25rem 0 .6rem 1.2rem; }
.muro-emojis-linea { text-align: center; margin: .5rem 0; }
/* Emojis vivos: laten y saltan, con desfase para que no vayan al unísono. */
.emoji-vivo { display: inline-block; animation: emoji-latir 2.2s ease-in-out infinite; transform-origin: 50% 80%; }
.emoji-vivo.chico { font-size: 1.15rem; animation-duration: 3s; }
.emoji-vivo.grande { font-size: 3rem; }
.emoji-vivo.hero { font-size: 4.5rem; animation: emoji-saltar 1.8s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.muro-emojis-linea .emoji-vivo { font-size: 2.4rem; margin: 0 .2rem; }
.muro-emojis-linea .emoji-vivo:nth-child(2n) { animation-delay: .3s; }
.muro-emojis-linea .emoji-vivo:nth-child(3n) { animation-delay: .6s; animation-name: emoji-saltar; }
@keyframes emoji-latir { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(-6deg); } }
@keyframes emoji-saltar { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-10px) rotate(8deg); } 60% { transform: translateY(-4px) rotate(-6deg); } }
/* Confeti que cae en las celebraciones. */
.muro-confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.muro-confeti span { position: absolute; top: -2rem; font-size: 1.3rem; opacity: .85; animation: confeti-caer 6s linear infinite; }
.muro-confeti span:nth-child(1) { left: 8%; animation-delay: 0s; }
.muro-confeti span:nth-child(2) { left: 25%; animation-delay: 1.2s; }
.muro-confeti span:nth-child(3) { left: 48%; animation-delay: 2.4s; }
.muro-confeti span:nth-child(4) { left: 66%; animation-delay: .6s; }
.muro-confeti span:nth-child(5) { left: 80%; animation-delay: 3.1s; }
.muro-confeti span:nth-child(6) { left: 92%; animation-delay: 1.8s; }
@keyframes confeti-caer { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(420px) rotate(360deg); opacity: 0; } }
/* Carrusel de fotos. */
.muro-carrusel { position: relative; margin-top: .85rem; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.06); }
.muro-foto { display: block; width: 100%; max-height: 520px; object-fit: cover; cursor: zoom-in; }
.muro-foto.cargando { display: grid; place-items: center; height: 220px; color: var(--color-text-muted); }
.muro-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border: none; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--elev-2); }
.muro-flecha.izquierda { left: .6rem; } .muro-flecha.derecha { right: .6rem; }
.muro-puntos { position: absolute; bottom: .6rem; left: 0; right: 0; display: flex; justify-content: center; gap: .35rem; }
.muro-punto { width: .6rem; height: .6rem; border-radius: 999px; border: none; background: rgba(255,255,255,.6); cursor: pointer; padding: 0; }
.muro-punto.activo { background: var(--color-surface); transform: scale(1.3); }
.muro-mini { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #eee; }
.muro-mini img { width: 100%; height: 100%; object-fit: cover; }
.muro-mini button { position: absolute; top: 2px; right: 2px; padding: 0 .4rem; }
.muro-pie { margin-top: .9rem; }
.muro-reacciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.muro-reaccion { border: 1px solid var(--color-border); border-radius: 999px; padding: .3rem .75rem; background: rgba(255,255,255,.8); cursor: pointer; font-family: inherit; font-size: .95rem; transition: transform var(--transicion); }
.muro-reaccion:hover { transform: scale(1.08); }
.muro-reaccion.mia { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.muro-reaccion.con { font-weight: 600; }
.muro-total { font-size: .85rem; color: var(--color-text-muted); margin-left: .25rem; }
.muro-comentarios { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.muro-comentario { display: flex; align-items: flex-start; gap: .55rem; }
.muro-burbuja { flex: 1; background: rgba(0,0,0,.05); border-radius: 14px; padding: .5rem .8rem; font-size: .95rem; }
.estilo-oscuro .muro-burbuja { background: rgba(255,255,255,.1); }
.muro-escribir { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.muro-escribir .form-control { border-radius: 999px; }
.muro-editor-cuerpo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.muro-vista-previa .muro-tarjeta { margin: 0; }
.muro-barra-formato { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.muro-emoji-picker { display: flex; flex-wrap: wrap; gap: .3rem; }
.muro-emoji-opcion { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 10px; padding: .3rem .5rem; cursor: pointer; font-family: inherit; }
.muro-emoji-opcion.activo { border-color: var(--color-primary); background: var(--color-primary-light); }
@media (max-width: 800px) { .muro-editor-cuerpo { grid-template-columns: 1fr; } }
/* ---------------- Calendario de ausencias ---------------- */
.rrhh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rrhh-cal-enc { font-size: .78rem; color: var(--color-text-muted); text-align: center; padding: .25rem 0; }
.rrhh-cal-dia { min-height: 92px; padding: .35rem .4rem; border-radius: 10px; background: var(--color-surface); box-shadow: var(--elev-1); font-size: .82rem; }
.rrhh-cal-dia.no-laborable { background: var(--color-surface-2); opacity: .75; }
.rrhh-cal-dia.feriado { background: #fff4e0; }
.rrhh-cal-dia.hoy { outline: 2px solid var(--color-primary); }
.rrhh-cal-dia.nivel-medio { background: var(--color-warning-bg); }
.rrhh-cal-dia.nivel-alto { background: #ffe1e1; }
.rrhh-cal-dia.fuera { opacity: .3; }
.rrhh-cal-num { display: flex; justify-content: space-between; font-weight: 600; }
.rrhh-cal-cuenta { font-size: .75rem; padding: 0 .4rem; border-radius: 999px; background: var(--color-primary); color: #fff; }
.rrhh-cal-persona { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); padding-left: .3rem; margin-top: .2rem; }
.rrhh-cal-persona.pendiente { border-style: dashed; opacity: .8; }
.rrhh-anio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.rrhh-mes-card { padding: .75rem .9rem; cursor: pointer; }
.rrhh-mes-card h4 { margin: 0 0 .35rem; text-transform: capitalize; }
.rrhh-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rrhh-mini-dia { height: 14px; border-radius: 3px; background: #eef0f4; }
.rrhh-mini-dia.c1 { background: #bfd3ff; } .rrhh-mini-dia.c2 { background: #7fa4ff; } .rrhh-mini-dia.c3 { background: #ffb357; } .rrhh-mini-dia.c4 { background: #ff6b6b; }
.rrhh-riesgo { padding: .6rem .9rem; border-radius: var(--radius-sm); margin-bottom: .5rem; border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 #d99a29; background: var(--color-warning-bg); }
.rrhh-riesgo.alto { border-left-color: #c22a20; background: #ffecec; }
/* Hoja de confirmaciones de un comunicado: la firma electrónica o la línea para firmar a mano. */
.rrhh-firma { min-width: 190px; }
.rrhh-firma-ok { color: var(--color-success); font-weight: 600; font-size: .85rem; }
.rrhh-firma-linea { display: inline-block; width: 170px; border-bottom: 1px solid #333; height: 1.4rem; }
/* Constancia de vacaciones: datos en dos columnas etiqueta/valor y tres líneas de firma al pie
(colaborador, gerente, RRHH con sello). En papel las tarjetas pierden la sombra y se separan
con una línea fina para que la hoja se lea como un documento, no como una pantalla. */
.constancia-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 1.5rem; }
.constancia-datos div { display: flex; flex-direction: column; }
.constancia-datos span { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); }
.constancia-datos strong { font-size: 1rem; }
.constancia-texto { margin: 1rem 0 0; font-size: .95rem; line-height: 1.5; }
.constancia-firmas {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
margin-top: 3.5rem; text-align: center; font-size: .85rem;
}
.constancia-firma-linea { border-bottom: 1px solid #333; height: 2.6rem; margin-bottom: .4rem; }
.constancia-firma-quien { font-weight: 600; min-height: 1.2rem; }
@media (max-width: 640px) { .constancia-firmas { grid-template-columns: 1fr; gap: 2.5rem; } }
@media print {
.constancia-hoja .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
.constancia-firmas { break-inside: avoid; margin-top: 4rem; }
}
/* Hoja de inscripción por departamento: una hoja (y una página impresa) por departamento, con
la firma del gerente y de RRHH al pie. Los que no respondieron van atenuados, con su línea. */
.hoja-inscripcion { margin-bottom: 2.5rem; }
.hoja-inscripcion-pendiente td { color: var(--color-text-muted); }
.hoja-inscripcion-firmas { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
@media print {
.hoja-inscripcion { break-after: page; margin-bottom: 0; }
.hoja-inscripcion:last-child { break-after: auto; }
.hoja-inscripcion .card { box-shadow: none; border: 1px solid #ccc; }
}
/* Podio y líderes del mes en el muro: foto, nombre y el porqué de cada uno. */
.muro-podio { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: .9rem 0 .4rem; }
.muro-podio-persona { flex: 1 1 200px; max-width: 280px; text-align: center; padding: 1rem .8rem; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: var(--elev-1); }
.muro-podio-persona.primero { background: #fff7d6; box-shadow: var(--elev-3); transform: scale(1.04); }
.estilo-oscuro .muro-podio-persona { background: rgba(255,255,255,.12); color: #f3f4f6; }
.muro-podio-rol { font-weight: 700; margin-top: .5rem; font-size: .95rem; }
.muro-podio-nombre { font-size: 1.15rem; font-weight: 700; }
.muro-podio-detalle { font-size: .86rem; color: var(--color-text-muted); margin-top: .35rem; line-height: 1.4; }
.estilo-oscuro .muro-podio-detalle { color: #cbd5e1; }
.avatar-podio { width: 84px; height: 84px; font-size: 1.8rem; margin: 0 auto; box-shadow: var(--elev-2); }
/* Comunicados en Mi RRHH: tarjetas como las del muro, con la imagen adjunta de miniatura. */
.rrhh-comunicado.sin-leer { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); }
.rrhh-resumen { color: var(--color-text-muted); }
.rrhh-miniatura-wrap { margin: .35rem 0 .6rem; }
.rrhh-miniatura { display: block; max-width: 260px; max-height: 180px; object-fit: cover; border-radius: 12px; box-shadow: var(--elev-2); cursor: zoom-in; transition: transform var(--transicion); }
.rrhh-miniatura:hover { transform: scale(1.03); }
.rrhh-miniatura.grande { max-width: 100%; max-height: 520px; }
.rrhh-miniatura.cargando { display: grid; place-items: center; width: 260px; height: 120px; background: rgba(0,0,0,.06); color: var(--color-text-muted); cursor: default; }
@media (max-width: 700px) { .rrhh-cal-dia { min-height: 60px; font-size: .72rem; } .rrhh-cal-persona { display: none; } }
/* ---- Recordatorios en el calendario ---- */
/* Un recordatorio es un aviso que uno mismo se programó: ni tarea ni cita. Borde punteado y
tono cálido para que se distinga de ambas sin leerlo. */
.cal-recordatorio {
background: var(--color-warning-bg);
color: #7a5200;
border-left: 3px dashed #d9a400;
font-weight: 600;
}
.cal-recordatorio.cal-cancelada { opacity: .55; text-decoration: line-through; }
.cal-sem-mas {
font-size: 1rem; line-height: 1; padding: 0 .2rem; color: var(--color-text-muted);
opacity: 0; transition: opacity .15s;
}
.cal-sem-dia:hover .cal-sem-mas { opacity: 1; }
/* ---------- Chat: aspecto WhatsApp ---------- */
/* Fondo cálido, burbujas sin borde con sombra fina y cola, hora y checks dentro de la burbuja.
Es la gramática visual que todo el mundo ya conoce: nadie tiene que aprender el chat. */
.chat-mensajes {
background: #efeae2;
background-image:
radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px);
background-size: 24px 24px, 24px 24px;
background-position: 0 0, 12px 12px;
gap: .35rem;
}
.chat-burbuja {
position: relative;
max-width: 72%;
background: var(--color-surface);
border: none;
border-radius: 8px;
border-top-left-radius: 0;
padding: .35rem .5rem .3rem .6rem;
box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
margin-left: .55rem;
}
.chat-burbuja::before {
content: "";
position: absolute; top: 0; left: -8px;
border-width: 0 8px 10px 0;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
.chat-burbuja.mia {
background: #d9fdd3;
border: none;
border-radius: 8px;
border-top-right-radius: 0;
margin-left: 0; margin-right: .55rem;
}
.chat-burbuja.mia::before {
left: auto; right: -8px;
border-width: 0 0 10px 8px;
border-color: transparent transparent transparent #d9fdd3;
}
/* Mensajes seguidos de la misma persona: sin cola y más pegados, como un solo bloque. */
.chat-burbuja.seguida { margin-top: -.15rem; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.chat-burbuja.seguida::before { display: none; }
.chat-burbuja p { margin: 0; font-size: .93rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; padding-right: .25rem; }
.chat-meta {
float: right;
margin: .45rem 0 0 .6rem;
font-size: .68rem; line-height: 1;
color: #667781;
display: inline-flex; align-items: center; gap: .25rem;
position: relative; top: .25rem;
}
.chat-check { font-size: .8rem; letter-spacing: -.2em; color: #8696a0; }
.chat-check.leido { color: #53bdeb; }
.chat-burbuja-autor { color: #d35400; }
.chat-burbuja.mia .chat-burbuja-autor { display: none; }
.chat-dia { align-self: center; margin: .5rem 0 .25rem; }
.chat-dia span {
display: inline-block; background: var(--color-surface); color: #54656f;
font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
padding: .25rem .7rem; border-radius: 8px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
}
/* La cita: el mensaje al que se responde, con la barra de color al lado. */
.chat-cita {
display: flex; flex-direction: column; gap: .1rem;
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary);
background: rgba(0, 0, 0, .05);
border-radius: 6px;
padding: .3rem .5rem;
margin: .1rem 0 .35rem;
font-size: .8rem; cursor: pointer;
}
.chat-cita strong { color: var(--color-primary); font-size: .75rem; }
.chat-cita span {
color: #54656f;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-burbuja.mia .chat-cita { background: rgba(0, 0, 0, .06); }
/* El botón de responder: asoma al pasar el ratón; en pantallas táctiles siempre a la vista, tenue. */
.chat-responder {
position: absolute; top: .15rem; right: -1.6rem;
width: 1.4rem; height: 1.4rem; border-radius: 50%;
border: none; background: rgba(255, 255, 255, .9); color: #54656f;
font-size: .8rem; line-height: 1; cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
opacity: 0; transition: opacity .15s;
}
.chat-burbuja.mia .chat-responder { right: auto; left: -1.6rem; }
.chat-burbuja:hover .chat-responder { opacity: 1; }
@media (hover: none) { .chat-responder { opacity: .55; } }
.chat-resaltado { animation: chat-resaltar 1.5s ease-out both; }
@keyframes chat-resaltar {
0% { box-shadow: 0 0 0 3px rgba(37, 211, 102, .7); }
100% { box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
}
/* Lo que se está por responder, encima de la caja. */
.chat-respuesta-previa {
display: flex; align-items: center; gap: .5rem;
margin: .4rem 1.25rem 0;
background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--color-primary); border-radius: 6px;
padding: .35rem .6rem; font-size: .82rem;
box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
}
.chat-respuesta-previa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-respuesta-previa-texto strong { color: var(--color-primary); font-size: .75rem; }
.chat-respuesta-previa-texto span { color: #54656f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ventana .chat-respuesta-previa { margin: .35rem .75rem 0; }
.chat-emojis {
display: flex; flex-wrap: wrap; gap: .15rem;
padding: .4rem 1.25rem 0; background: var(--color-surface-2);
}
.chat-emojis button {
border: none; background: transparent; font-size: 1.35rem; line-height: 1;
width: 2.1rem; height: 2.1rem; border-radius: 8px; cursor: pointer;
}
.chat-emojis button:hover { background: rgba(0, 0, 0, .07); }
.chat-ventana .chat-emojis { padding: .35rem .75rem 0; }
.chat-ventana .chat-emojis button { font-size: 1.15rem; width: 1.8rem; height: 1.8rem; }
.chat-envio { background: var(--color-surface-2); border-top: none; align-items: center; gap: .5rem; }
.chat-envio input { border-radius: 999px; background: var(--color-surface); border-color: transparent; }
.chat-envio input:focus { border-color: var(--color-primary); }
.chat-icono-boton {
border: none; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer;
width: 40px; height: 40px; border-radius: 50%; flex: none;
}
.chat-icono-boton:hover { background: rgba(0, 0, 0, .06); }
.chat-enviar-boton {
flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
background: var(--color-primary); color: #fff; font-size: 1rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.chat-enviar-boton:disabled { opacity: .45; cursor: default; }
.chat-zumbido-boton { background: transparent; border-color: transparent; }
.chat-zumbido-aviso { background: rgba(255, 255, 255, .8); border-style: solid; }
/* ---------- Carrera: de dónde sale el puntaje ---------- */
.carrera-desglose-boton { font-size: .8rem; padding: 0 .25rem; }
.carrera-desglose {
margin: .5rem 0 .25rem 3.2rem;
padding: .5rem .8rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: .85rem;
display: flex; flex-direction: column; gap: .3rem;
}
.carrera-desglose-fila { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carrera-desglose-fila > span:first-child { color: var(--color-text-muted); white-space: nowrap; }
.carrera-desglose-fila > span:last-child { text-align: right; }
.carrera-desglose-fila small { display: block; font-size: .75rem; }
.carrera-desglose-total { border-top: 1px solid var(--color-border); padding-top: .3rem; margin-top: .1rem; }
@media (max-width: 700px) { .carrera-desglose { margin-left: 0; } }
/* En el portal, el contorno y el secundario llevan borde de 2px y fondo blanco: no se pierden en el cielo. */
.publico-shell .btn-outline, .publico-shell .btn-secondary { background: #fff; border-width: 2px; }
.publico-shell .publico-card { border: 2px solid #fff; box-shadow: var(--elev-2); border-radius: 22px; }
.publico-shell .publico-card.es-portada { border: 0; box-shadow: none; }
.carga-inicial.en-pagina { min-height: 40vh; background: transparent; }
/* El título de cada ficha, en el color de su borde (va al final para ganar a la regla base). */
.pqrs-tarjeta .titulo { color: var(--borde, var(--color-text)); }
/* ---------- La libreta de apuntes ----------
Un cuaderno limpio: estante de fichas con el punto del color de cada tapa, lomo fino de ese
color con los agujeros de la espiral, índice en panel suave y la hoja blanca con rayas muy
tenues. La tapa toma su color de .tapa- (los cinco pastel del sistema). Vive en
/libreta y como diálogo desde la barra superior (.libreta-modal). */
.tapa-azul { --tapa: var(--sec-mi); --tapa-bg: var(--sec-mi-bg); }
.tapa-amarillo { --tapa: var(--color-warning); --tapa-bg: var(--color-warning-bg); }
.tapa-verde { --tapa: var(--sec-clientes); --tapa-bg: var(--sec-clientes-bg); }
.tapa-lila { --tapa: var(--sec-plataforma); --tapa-bg: var(--sec-plataforma-bg); }
.tapa-turquesa { --tapa: var(--sec-supervision); --tapa-bg: var(--sec-supervision-bg); }
.libreta { display: flex; flex-direction: column; gap: .75rem; min-width: 0; max-width: 100%; }
/* El estante: una ficha por libreta. */
.libreta-estante { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.libreta-pestana {
display: inline-flex; align-items: center; gap: .55rem; max-width: 280px; min-height: 40px;
border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
border-radius: 999px; padding: .3rem 1rem .3rem .75rem;
font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1.15; cursor: pointer;
transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.libreta-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--tapa); flex: none; }
.libreta-pestana-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.libreta-pestana-titulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libreta-pestana small { max-width: 100%; font-weight: 500; font-size: .72rem; color: var(--color-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libreta-pestana.activa { background: var(--tapa-bg); border-color: var(--tapa); color: var(--color-text); }
.libreta-pestana-nueva { --tapa: var(--color-border-strong); border-style: dashed; gap: .3rem; font-weight: 600; }
@media (hover: hover) { .libreta-pestana:hover { border-color: var(--tapa); color: var(--color-text); } }
.libreta-pestana:active { transform: translateY(1px); }
/* El cuaderno: lomo · índice · hoja. */
.libreta-cuaderno {
position: relative;
display: grid; grid-template-columns: 16px 284px minmax(0, 1fr);
min-height: 560px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: var(--elev-2);
overflow: hidden;
}
.libreta:not(.en-dialogo) .libreta-cuaderno { min-height: min(760px, calc(100vh - 250px)); max-height: calc(100vh - 200px); }
.libreta-modal .libreta-cuaderno { min-height: 62vh; max-height: 74vh; }
/* El lomo: franja del color de la tapa con los agujeros de la espiral. */
.libreta-espiral {
display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
padding: 1rem 0;
background: var(--tapa);
}
.libreta-espiral i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-surface); opacity: .85; }
/* El índice de páginas. */
.libreta-indice {
display: flex; flex-direction: column; gap: .7rem; min-height: 0; overflow-y: auto;
padding: 1.1rem 1rem 1.2rem;
background: var(--color-surface-2);
border-right: 1px solid var(--color-border);
}
.libreta-indice-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.libreta-indice-titulo { min-width: 0; }
.libreta-indice-titulo > strong { display: block; font-family: var(--font-titulo); font-size: 1.15rem; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libreta-indice-titulo small { color: var(--color-text-soft); font-size: .78rem; }
/* Con quién está compartida: a la vista, con nombres, y clic para cambiar los accesos. */
.libreta-compartida {
display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
margin-top: .2rem; font-size: .82rem; color: var(--color-text-muted); cursor: pointer;
}
.libreta-compartida .icono { color: var(--tapa); flex: none; }
.libreta-compartida strong { color: var(--color-text); }
.libreta-indice-acciones { display: flex; gap: .25rem; flex: none; }
.libreta-indice-acciones .btn-icono { width: 34px; height: 34px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); }
.libreta-indice-cerrar { display: none; }
.libreta-nueva-pagina { width: 100%; }
.libreta-buscar { position: relative; }
.libreta-buscar .icono { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--color-text-soft); pointer-events: none; }
.libreta-buscar .form-control { padding-left: 2.1rem; min-height: 38px; height: 38px; font-size: .9rem; border-radius: 999px; background: var(--color-surface); }
.libreta-vacia { font-size: .9rem; margin: .25rem 0; }
.libreta-paginas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.libreta-paginas-dia {
font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--color-text-soft); margin: .6rem 0 .2rem; padding-left: .75rem;
}
.libreta-paginas-dia:first-child { margin-top: 0; }
.libreta-pagina-item {
display: flex; flex-direction: column; gap: .12rem; width: 100%; min-width: 0; text-align: left;
border: none; background: transparent; color: var(--color-text);
border-radius: 12px; padding: .55rem .75rem; cursor: pointer; font-family: inherit;
transition: background var(--dur-1), box-shadow var(--dur-1);
}
@media (hover: hover) { .libreta-pagina-item:hover { background: var(--color-surface); } }
.libreta-pagina-item.activa { background: var(--color-surface); box-shadow: var(--elev-1), inset 3px 0 0 var(--tapa); }
.libreta-pagina-fecha { font-size: .74rem; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.libreta-pagina-resumen { font-weight: 600; font-size: .92rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libreta-pagina-autor { font-size: .74rem; color: var(--color-text-muted); }
/* La hoja. */
.libreta-pagina {
display: flex; flex-direction: column; gap: .7rem; min-width: 0; min-height: 0; overflow-y: auto;
padding: 1.35rem 1.75rem 1.25rem;
background: var(--color-surface);
}
.libreta-pagina-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.libreta-indice-toggle { display: none; }
.libreta-fecha { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.libreta-fecha-dia { font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tapa); }
.libreta-fecha-meta { font-size: .82rem; color: var(--color-text-soft); }
.libreta-estado { font-size: .76rem; font-weight: 700; color: var(--color-success); background: var(--color-success-bg); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }
.libreta-estado.pendiente { color: var(--color-text-muted); background: var(--color-surface-2); }
.libreta-titulo {
width: 100%; box-sizing: border-box;
border: none; outline: none; background: transparent;
font-family: var(--font-titulo); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.2;
color: var(--color-text); padding: .1rem 0 .2rem;
}
.libreta-titulo::placeholder { color: var(--color-border-strong); font-weight: 700; }
.libreta-hoja-marco { position: relative; flex: 1; display: flex; min-height: 300px; }
.libreta-hoja {
flex: 1; width: 100%; min-height: 300px; box-sizing: border-box;
border: none; outline: none; resize: none;
color: var(--color-text); font-family: inherit; font-size: 1.02rem; line-height: 30px;
padding: 0 .25rem 30px 0;
background-color: transparent;
/* Las rayas del cuaderno: franjas duras muy tenues, no un degradado; se desplazan con el texto. */
background-image: repeating-linear-gradient(to bottom, transparent 0 29px, var(--libreta-linea) 29px 30px);
background-attachment: local;
}
.libreta-hoja::placeholder { color: var(--color-text-soft); }
.libreta-sugerencia {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
background: var(--nota); color: var(--nota-tinta); border: 1px solid var(--nota-borde);
border-radius: var(--radius-sm); padding: .55rem .8rem;
animation: escalar var(--dur-2) var(--ease-out) both;
}
.libreta-sugerencia > span { flex: 1; min-width: 200px; font-size: .92rem; }
.libreta-sugerencia em { font-style: normal; font-weight: 700; }
.libreta-sugerencia .btn-link { color: var(--nota-tinta); }
.libreta-pagina-pie { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid var(--color-border); }
.libreta-borrar { margin-left: auto; color: var(--color-danger); }
.libreta-pagina-vacia {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
min-height: 300px; text-align: center; color: var(--color-text-muted);
}
/* Nombre y tapa. */
.libreta-colores { display: flex; gap: .6rem; flex-wrap: wrap; }
.libreta-color {
width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
border: 2px solid var(--color-border); background: var(--tapa-bg);
transition: transform var(--dur-1);
}
.libreta-color.activa { border-color: var(--tapa); box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--tapa); }
.libreta-color:active { transform: scale(.94); }
/* El diálogo de la barra superior: más ancho que un formulario, porque es un cuaderno abierto. */
.libreta-modal { max-width: 1120px; padding: 1rem 1.25rem 1.25rem; border-radius: 20px; }
.libreta-modal-cabecera { margin-bottom: .6rem; }
/* Ayudas de escritura: la barra sobre la hoja, las palabras propuestas bajo ella y el diálogo de
atajos. La barra es un carril suave con píldoras blancas; el micrófono encendido late en rojo. */
.libreta-ayudas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .3rem; background: var(--color-surface-2); border-radius: 14px; }
.libreta-ayuda {
display: inline-flex; align-items: center; gap: .3rem; min-height: 32px;
border: 1px solid transparent; background: var(--color-surface); color: var(--color-text-muted);
border-radius: 999px; padding: .2rem .7rem;
font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
@media (hover: hover) { .libreta-ayuda:hover { color: var(--color-text); border-color: var(--color-border-strong); } }
.libreta-ayuda:active { transform: translateY(1px); }
.libreta-ayuda.activa { background: var(--color-danger-bg); color: var(--color-danger); animation: libreta-latido 1.2s ease-in-out infinite; }
.libreta-ayuda-ajustes { margin-left: auto; }
@keyframes libreta-latido { 50% { opacity: .6; } }
.libreta-completar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.libreta-completar-chip {
border: 1px solid var(--tapa); background: var(--tapa-bg); color: var(--color-text);
border-radius: 999px; padding: .2rem .8rem; min-height: 32px;
font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.libreta-completar-chip:first-child { box-shadow: inset 0 -3px 0 var(--tapa); }
.libreta-completar-pista { font-size: .75rem; color: var(--color-text-soft); }
.libreta-completar-pista kbd, .libreta-trucos kbd {
font-family: inherit; font-size: .72rem; font-weight: 700;
border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 5px;
padding: 0 .35rem; background: var(--color-surface); color: var(--color-text);
}
.libreta-trucos code, .libreta-atajo code { font-family: inherit; font-weight: 700; background: var(--color-surface-2); border-radius: 5px; padding: 0 .35rem; }
.libreta-aviso-mic { display: flex; align-items: flex-start; gap: .5rem; }
.libreta-aviso-mic .icono { flex: none; margin-top: .15rem; }
.libreta-aviso-mic > span { flex: 1; }
.libreta-aviso-mic .btn-link { color: inherit; white-space: nowrap; font-weight: 700; }
.libreta-atajos { display: flex; flex-direction: column; gap: .2rem; max-height: 220px; overflow-y: auto; padding-right: .25rem; }
.libreta-atajo { display: grid; grid-template-columns: minmax(70px, 1fr) auto 2fr auto; gap: .5rem; align-items: center; font-size: .92rem; padding: .15rem 0; }
.libreta-atajo-nuevo { margin-bottom: .5rem; }
.libreta-atajo .form-control { min-height: 36px; height: 36px; font-size: .9rem; }
.libreta-atajo-flecha { color: var(--color-text-soft); }
@media (prefers-reduced-motion: reduce) { .libreta-ayuda.activa { animation: none; } }
@media (max-width: 900px) {
.libreta-estante { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.libreta-estante::-webkit-scrollbar { display: none; }
.libreta-pestana { flex: none; }
.libreta-cuaderno { grid-template-columns: 10px minmax(0, 1fr); min-height: 70vh; border-radius: 16px; }
.libreta:not(.en-dialogo) .libreta-cuaderno { min-height: calc(100dvh - var(--topbar-height) - var(--nav-inferior) - 150px); max-height: none; }
.libreta-modal .libreta-cuaderno { min-height: 60dvh; max-height: 68dvh; }
.libreta-espiral i { width: 4px; height: 4px; }
/* En el teléfono el índice es una capa sobre la hoja: se abre con el botón de la cabecera. */
.libreta-indice { display: none; }
.libreta-indice.abierto { display: flex; position: absolute; left: 10px; top: 0; right: 0; bottom: 0; z-index: 2; border-right: none; }
.libreta-indice-cerrar, .libreta-indice-toggle { display: inline-flex; }
.libreta-pagina { padding: .9rem 1rem 1rem; }
.libreta-titulo { font-size: 1.35rem; }
.libreta-borrar { margin-left: 0; }
.libreta-ayudas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.libreta-ayudas::-webkit-scrollbar { display: none; }
.libreta-ayuda { flex: none; }
.libreta-ayuda-ajustes { margin-left: 0; }
.libreta-atajo { grid-template-columns: 1fr auto 1fr auto; }
}
@media print { .libreta-estante, .libreta-indice, .libreta-pagina-pie, .libreta-sugerencia, .libreta-ayudas, .libreta-completar { display: none; } }
/* ---------- Asistencia ----------
Tablero, hojas, "Mi asistencia" con la cámara, y el kiosco de la entrada (a pantalla completa).
Los estados usan los pares tinta/fondo del sistema; la cámara es un marco redondeado con la
guía oval encima. */
.asis-estado { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .18rem .65rem; white-space: nowrap; }
.asis-ok { background: var(--color-success-bg); color: var(--color-success); }
.asis-tarde { background: var(--color-warning-bg); color: var(--color-warning); }
.asis-ausente { background: var(--color-danger-bg); color: var(--color-danger); }
.asis-pendiente { background: var(--color-surface-2); color: var(--color-text-muted); }
.asis-permiso { background: var(--color-info-bg); color: var(--color-info); }
.asis-libre { background: transparent; color: var(--color-text-soft); border: 1px solid var(--color-border); }
.asis-num-mal { color: var(--color-danger); font-weight: 700; }
.form-control-sm { min-height: 34px; height: 34px; padding-top: .2rem; padding-bottom: .2rem; font-size: .88rem; }
/* Un giro discreto para "preparando…", en botones y velos. */
.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: asis-giro .8s linear infinite; vertical-align: middle; margin-right: .35rem; }
@keyframes asis-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: currentColor; opacity: .5; } }
.asis-tabla th { cursor: default; white-space: nowrap; }
.asis-fila { cursor: pointer; }
@media (hover: hover) { .asis-fila:hover td { background: var(--color-surface-2); } }
.asis-hoy-fila td { box-shadow: inset 3px 0 0 var(--sec, var(--color-primary)); }
.asis-futuro td { color: var(--color-text-soft); }
.asis-marca { font-size: .82rem; }
.asis-marca.anulada { text-decoration: line-through; opacity: .7; }
.asis-acciones-fila { white-space: nowrap; }
.asis-acciones-fila .btn-link { margin-right: .5rem; }
.asis-mes { min-width: 160px; text-align: center; }
.asis-codigo { font-size: 1.3rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.kpi-activa { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Mi asistencia */
.asis-hoy .flex-between { align-items: flex-start; }
.asis-saludo { display: flex; align-items: center; gap: .75rem; margin: .75rem 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--color-success-bg); color: var(--color-success); }
.asis-saludo.tarde { background: var(--color-warning-bg); color: var(--color-warning); }
.asis-saludo > div { flex: 1; }
.asis-saludo strong { font-size: 1.05rem; }
.asis-saludo .btn-link { color: inherit; }
.asis-marcaciones { list-style: none; margin: .75rem 0 .25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.asis-marcaciones li { display: flex; flex-direction: column; min-width: 130px; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.asis-marcaciones li.anulada { text-decoration: line-through; opacity: .6; }
.asis-tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); font-weight: 700; }
.asis-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .75rem; }
.asis-accion { min-height: 56px; font-size: 1.05rem; padding: .6rem 1.4rem; }
.asis-accion.principal { flex: 1 1 260px; min-height: 64px; font-size: 1.2rem; }
.asis-metodo { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-surface-2); margin-bottom: .75rem; }
.asis-metodo p { margin: 0 0 .5rem; }
.asis-camara { max-width: 480px; }
.asis-aviso { display: flex; gap: .5rem; align-items: flex-start; }
.asis-aviso > span { flex: 1; }
.asis-registro { display: flex; flex-direction: column; gap: .75rem; }
.asis-registro-item { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.asis-registro-item > div { flex: 1; min-width: 220px; }
.asis-huellas { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .9rem; }
.kpi-card .kpi-valor small { font-size: .9rem; font-weight: 600; color: var(--color-text-soft); }
/* La cámara */
.camara-rostro { display: flex; flex-direction: column; gap: .5rem; }
.camara-marco { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #0f1d2b; }
.camara-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camara-rostro.espejo video, .camara-rostro.espejo .camara-lienzo { transform: scaleX(-1); }
.camara-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camara-guia { position: absolute; left: 50%; top: 50%; width: 46%; height: 68%; transform: translate(-50%, -50%); border: 3px dashed rgba(255, 255, 255, .7); border-radius: 50%; pointer-events: none; }
.camara-velo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; text-align: center; color: #fff; background: rgba(15, 29, 43, .85); }
.camara-estado { margin: 0; font-weight: 600; text-align: center; }
/* El kiosco: toda la pantalla, sin cromo */
.kiosco { --kiosco-color: var(--color-primary); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); }
.kiosco-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem; text-align: center; }
.kiosco-emparejar { max-width: 460px; margin: 0 auto; }
.kiosco-codigo { font-size: 2rem; letter-spacing: .3em; text-align: center; max-width: 260px; font-variant-numeric: tabular-nums; }
.kiosco-cabecera { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.kiosco-cabecera > div { flex: 1; display: flex; flex-direction: column; }
.kiosco-cabecera small { color: var(--color-text-soft); }
.kiosco-logo { height: 40px; width: auto; }
.kiosco-reloj { font-family: var(--font-titulo); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kiosco-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 1.25rem; padding: 1.25rem 1.5rem; align-items: stretch; }
.kiosco-camara .camara-marco { aspect-ratio: auto; height: 100%; min-height: 360px; }
.kiosco-lado { display: flex; flex-direction: column; gap: 1rem; }
.kiosco-tarjeta { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--elev-2); }
.kiosco-nombre { font-family: var(--font-titulo); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kiosco-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
.kiosco-boton { min-height: 72px; font-size: 1.15rem; flex-direction: column; gap: .2rem; }
.kiosco-boton.principal { grid-column: 1 / -1; min-height: 84px; font-size: 1.35rem; }
.kiosco-listo { background: var(--color-success-bg); border-color: var(--color-success); }
.kiosco-listo.tarde { background: var(--color-warning-bg); border-color: var(--color-warning); }
.kiosco-cuenta { font-size: .8rem; }
.kiosco-cuenta-atras { margin: 0; font-size: 1.3rem; }
.kiosco-cuenta-atras strong { display: inline-block; min-width: 1.6em; font-size: 2.2rem; font-family: var(--font-titulo); color: var(--color-success); font-variant-numeric: tabular-nums; }
.kiosco-tipo { font-weight: 800; }
.kiosco-pie { display: flex; align-items: center; gap: 1.25rem; padding: .6rem 1.5rem; color: var(--color-text-soft); font-size: .85rem; border-top: 1px solid var(--color-border); }
.kiosco-pie span { flex: 1; }
@media (max-width: 900px) {
.kiosco-cuerpo { grid-template-columns: 1fr; padding: 1rem; }
.kiosco-camara .camara-marco { min-height: 260px; max-height: 45vh; }
.kiosco-nombre { font-size: 1.5rem; }
.asis-accion.principal { flex-basis: 100%; }
}
@media print { .kiosco-pie, .asis-acciones, .asis-acciones-fila { display: none; } }
/* ==========================================================================
Reuniones: la convocatoria interna. Comparten celda con citas y tareas en
el calendario, así que llevan su propio color (el verde de "Trabajo") para
distinguirse de la cita (azul) sin leer.
========================================================================== */
.cal-reunion {
background: var(--sec-trabajo-bg);
color: var(--sec-trabajo);
border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--sec-trabajo);
font-weight: 600;
}
/* La ficha de invitaciones por responder (Inicio y Mi día): misma familia que la de valoraciones. */
.invitaciones-pendientes { border-left: 1px solid var(--color-border); box-shadow: inset 2px 0 0 var(--sec-trabajo); background: var(--sec-trabajo-bg); }
.invitacion-fila {
display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
padding: .65rem 0; border-top: 1px solid var(--color-border);
}
.invitacion-fila:first-of-type { border-top: 0; }
.invitacion-info { display: grid; gap: .15rem; min-width: 0; }
.invitacion-info .btn-link { display: block; text-align: left; overflow-wrap: anywhere; }
.invitacion-detalle { color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.invitacion-acciones { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.invitacion-comentario { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.invitacion-comentario textarea { flex: 1; min-width: 220px; }
.invitacion-error { grid-column: 1 / -1; margin: 0; }
.invitacion-gracias { color: var(--color-success); font-weight: 600; white-space: nowrap; }
/* La lista y el detalle. */
.reunion-tarjeta { padding: .85rem 1rem; }
.reunion-tarjeta.reunion-cerrada { opacity: .75; }
.reunion-hora { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.reunion-conteo { display: inline-flex; gap: .7rem; flex-wrap: wrap; font-size: .85rem; color: var(--color-text-muted); align-items: center; }
.reunion-conteo strong { color: var(--color-text); }
.reunion-personas { max-height: 260px; overflow: auto; display: grid; gap: .3rem; padding: .25rem .1rem; }
.reunion-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.reunion-chips .chip { display: inline-flex; align-items: center; gap: .25rem; }
.reunion-chips .chip button { border: 0; background: transparent; cursor: pointer; color: inherit; font-weight: 700; padding: 0 .1rem; line-height: 1; }
.reunion-acta { white-space: pre-line; background: var(--color-surface-2); border-radius: var(--radius-sm); padding: .75rem 1rem; line-height: 1.55; }
@media (max-width: 640px) {
.invitacion-fila { grid-template-columns: 1fr; }
.invitacion-acciones { justify-content: flex-start; }
.invitacion-gracias { white-space: normal; }
}
/* ---------------- Tareas en monitoreo ----------------
Lo que el dueño o un auditor vigila de cerca: tabla de resumen y detalle con la línea de tiempo. */
.monitoreo-tabla td { vertical-align: top; }
.monitoreo-filtro-activo { display: inline-flex; align-items: center; gap: .35rem; align-self: center; }
.monitoreo-filtro-activo .btn-link { padding: 0 .15rem; line-height: 1; }
.monitoreo-celda-titulo { font-size: .88rem; margin-top: .1rem; max-width: 260px; }
.monitoreo-fecha { white-space: nowrap; font-size: .85rem; }
.monitoreo-ultima { min-width: 180px; max-width: 260px; }
.monitoreo-conteo {
display: inline-block; min-width: 2rem; text-align: center; font-weight: 700;
border-radius: 999px; padding: .1rem .5rem; background: var(--color-bg); color: var(--color-text-muted);
}
.monitoreo-conteo.con-actividad { background: var(--color-primary-light); color: var(--color-primary-dark); }
.monitoreo-acciones { display: flex; flex-direction: column; gap: .3rem; min-width: 130px; }
.monitoreo-acciones .btn { white-space: nowrap; }
.modal-box.monitoreo-detalle { max-width: 820px; }
.monitoreo-seccion { border-top: 1px solid var(--color-border); padding-top: .85rem; margin-top: .85rem; }
.monitoreo-seccion h4 { margin: 0 0 .6rem; font-size: .95rem; }
.monitoreo-ficha {
display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem;
}
.monitoreo-ficha dt { color: var(--color-text-muted); }
.monitoreo-ficha dd { margin: 0; }
.monitoreo-descripcion {
margin-top: .7rem; padding: .6rem .75rem; border-radius: 8px; background: var(--color-bg);
font-size: .88rem; white-space: pre-line;
}
.monitoreo-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.monitoreo-resumen-item {
display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem;
border-radius: 10px; background: var(--color-bg); font-size: .88rem;
}
.monitoreo-resumen-icono { font-size: 1.1rem; }
.monitoreo-dia {
font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
color: var(--color-text-muted); margin: .75rem 0 .35rem;
}
.monitoreo-linea { list-style: none; margin: 0; padding: 0 0 0 .6rem; border-left: 2px solid var(--color-border); }
.monitoreo-evento { display: flex; gap: .55rem; align-items: baseline; padding: .3rem 0 .3rem .4rem; font-size: .9rem; }
.monitoreo-evento-icono { width: 1.4rem; text-align: center; flex-shrink: 0; }
.monitoreo-evento-hora { color: var(--color-text-muted); font-size: .8rem; white-space: nowrap; flex-shrink: 0; min-width: 4.6rem; }
.monitoreo-evento-texto { overflow-wrap: anywhere; }
@media (max-width: 640px) {
.monitoreo-ficha { grid-template-columns: 1fr; }
.monitoreo-ficha dt { margin-top: .3rem; }
.monitoreo-evento { flex-wrap: wrap; }
}
.riesgo-monitoreo { margin-top: .35rem; display: inline-block; font-size: .72rem; padding: .15rem .5rem; }
.riesgo-monitoreo.activo { text-decoration: none; }
/* =====================================================================================
Riesgo operacional
Pocas piezas y siempre las mismas: la pastilla del nivel, la matriz 5 × 5, la fila de un
riesgo, el paso a paso y el selector de escala. Nada de tableros llenos de gráficas: una
matriz, una lista y lo que toca atender. Todo con tokens para que el modo oscuro los siga.
===================================================================================== */
.ro-minimo { --ro: var(--ro-minimo); --ro-bg: var(--ro-minimo-bg); --ro-tinta: var(--ro-minimo-tinta); }
.ro-moderado { --ro: var(--ro-moderado); --ro-bg: var(--ro-moderado-bg); --ro-tinta: var(--ro-moderado-tinta); }
.ro-significativo { --ro: var(--ro-significativo); --ro-bg: var(--ro-significativo-bg); --ro-tinta: var(--ro-significativo-tinta); }
.ro-severo { --ro: var(--ro-severo); --ro-bg: var(--ro-severo-bg); --ro-tinta: var(--ro-severo-tinta); }
.ro-extremo { --ro: var(--ro-extremo); --ro-bg: var(--ro-extremo-bg); --ro-tinta: var(--ro-extremo-tinta); }
/* ---- La pastilla del nivel: punto de color, NPR y nombre ---- */
.ro-nivel {
display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem .22rem .55rem;
border-radius: 999px; background: var(--ro-bg, var(--color-surface-2)); color: var(--ro-tinta, var(--color-text-muted));
font-weight: 700; font-size: .8rem; line-height: 1.3; white-space: nowrap;
}
.ro-nivel::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ro, var(--color-border-strong)); flex: none; }
.ro-nivel-npr { font-variant-numeric: tabular-nums; font-weight: 800; }
.ro-nivel.grande { font-size: .95rem; padding: .35rem .95rem .35rem .75rem; }
.ro-nivel.grande .ro-nivel-npr { font-size: 1.15rem; }
.ro-nivel.sin { font-weight: 600; }
/* ---- Lo que toca atender: una línea, solo si hay algo ---- */
.ro-atender { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.ro-atender-item {
display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px;
border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.ro-atender-item strong { font-variant-numeric: tabular-nums; }
.ro-atender-item.alerta-suave { background: var(--color-warning-bg); border-color: transparent; }
.ro-atender-item:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ro-atender-item:hover { border-color: var(--color-border-strong); } }
/* ---- Pestañas del panel ---- */
.ro-pestanas { margin-bottom: 1rem; display: inline-flex; }
.ro-pestanas .segmento strong { font-variant-numeric: tabular-nums; margin-left: .25rem; }
/* ---- Tablero: la matriz a un lado, la lista al otro ---- */
.ro-tablero { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ro-tablero > .card { margin-top: 0; }
@media (min-width: 1101px) { .ro-mapa-card { position: sticky; top: calc(var(--topbar-height) + 1rem); } }
@media (max-width: 1100px) { .ro-tablero { grid-template-columns: minmax(0, 1fr); } }
.ro-mapa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap; }
.ro-mapa-cabecera h2 { margin: 0; font-size: 1.05rem; }
/* ---- La matriz 5 × 5 ---- */
.ro-mapa { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; }
.ro-mapa-rotulo { display: flex; align-items: center; justify-content: flex-end; padding-right: .3rem; font-size: .72rem; line-height: 1.15; color: var(--color-text-muted); text-align: right; }
.ro-mapa-rotulo strong { color: var(--color-text); font-size: .78rem; }
.ro-mapa-columna { text-align: center; font-size: .72rem; line-height: 1.15; color: var(--color-text-muted); padding-top: .25rem; }
.ro-mapa-columna strong { display: block; color: var(--color-text); font-size: .78rem; }
.ro-mapa-eje { grid-column: 2 / -1; text-align: center; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-soft); }
.ro-mapa-eje-y { writing-mode: vertical-rl; transform: rotate(180deg); }
.ro-celda {
position: relative; display: grid; place-items: center; aspect-ratio: 1.2; min-height: 44px;
border: 0; border-radius: 12px; font: inherit; cursor: default;
background: var(--ro-bg); color: var(--ro-tinta);
transition: box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.ro-celda-cuenta { font-family: var(--font-titulo); font-size: 1.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ro-celda-npr { position: absolute; right: .35rem; bottom: .2rem; font-size: .62rem; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.ro-celda.vacia .ro-celda-cuenta { font-size: .9rem; opacity: .45; }
.ro-celda.con { cursor: pointer; background: color-mix(in srgb, var(--ro) 68%, var(--color-surface)); color: var(--color-text); }
.ro-celda.activa { box-shadow: 0 0 0 3px var(--color-primary), var(--elev-2); }
.ro-celda.con:active { transform: scale(.97); }
.ro-celda:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ro-celda.con:hover { background: color-mix(in srgb, var(--ro) 85%, var(--color-surface)); } }
.ro-leyenda { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .9rem; font-size: .76rem; color: var(--color-text-muted); }
.ro-leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.ro-leyenda span::before { content: ""; width: .65rem; height: .65rem; border-radius: 3px; background: var(--ro); }
/* ---- Lista de riesgos ---- */
.ro-lista-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ro-lista-cabecera .form-control { flex: 1 1 220px; max-width: 360px; border-radius: 999px; }
.ro-filtro-activo { display: inline-flex; align-items: center; gap: .35rem; }
.ro-lista { display: grid; gap: 2px; }
.ro-fila {
display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: center;
padding: .75rem .8rem; border-radius: 14px; color: inherit; text-decoration: none;
}
.ro-fila:hover { text-decoration: none; }
.ro-fila > .ro-nivel { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .ro-fila:hover { background: var(--color-surface-2); } }
.ro-fila:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.ro-fila-titulo { font-weight: 700; overflow-wrap: anywhere; }
.ro-fila-meta { display: block; margin-top: .1rem; font-size: .8rem; color: var(--color-text-muted); }
.ro-fila.cerrado { opacity: .6; }
.ro-codigo { font-size: .78rem; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.ro-etapa { font-size: .74rem; font-weight: 700; padding: .18rem .65rem; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); white-space: nowrap; }
.ro-etapa.evaluar { background: var(--color-info-bg); color: var(--color-info); }
.ro-etapa.tratar { background: var(--color-warning-bg); color: var(--color-warning); }
.ro-etapa.monitorear { background: var(--color-success-bg); color: var(--color-success); }
.ro-aviso-fila { color: var(--color-danger); font-weight: 700; }
@media (max-width: 640px) {
.ro-fila { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.ro-fila .ro-etapa { justify-self: start; }
}
/* ---- Reportes (pre-riesgos) ---- */
.ro-reportes { display: grid; gap: .5rem; }
.ro-reporte {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; width: 100%;
padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface);
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .ro-reporte:hover { background: var(--color-surface-2); } }
.ro-reporte:active { transform: scale(.995); }
.ro-reporte-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ro-reporte-meta { grid-column: 1 / -1; font-size: .8rem; color: var(--color-text-muted); }
.ro-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; padding: .18rem .65rem; border-radius: 999px; white-space: nowrap; align-self: start; }
.ro-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ro-estado.nuevo { background: var(--color-info-bg); color: var(--color-info); }
.ro-estado.enanalisis { background: var(--color-warning-bg); color: var(--color-warning); }
.ro-estado.convertido, .ro-estado.unido { background: var(--color-success-bg); color: var(--color-success); }
.ro-estado.descartado { background: var(--color-surface-2); color: var(--color-text-muted); }
.ro-cita { margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 14px; background: var(--color-surface-2); white-space: pre-line; overflow-wrap: anywhere; }
.ro-adjuntos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ro-adjunto { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-size: .84rem; color: var(--color-text); cursor: pointer; }
.ro-adjunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.ro-decision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ro-decision button { min-height: 52px; }
@media (max-width: 560px) { .ro-decision { grid-template-columns: 1fr; } }
/* ---- Detalle: cabecera, paso a paso y paneles ---- */
.ro-volver { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; margin-bottom: .6rem; color: var(--color-text-muted); }
.ro-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ro-cabecera h1 { margin: .1rem 0 .2rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.ro-cabecera-meta { color: var(--color-text-muted); font-size: .9rem; margin: 0; }
.ro-cabecera-nivel { display: grid; justify-items: end; gap: .3rem; }
.ro-evolucion { font-size: .8rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ro-cabecera-nivel { justify-items: start; } }
.ro-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ro-paso {
display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 14px;
border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
font: inherit; font-weight: 700; text-align: left; cursor: pointer; min-width: 0;
}
.ro-paso-numero { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; background: var(--color-surface-2); color: var(--color-text-muted); font-size: .9rem; }
.ro-paso-texto { min-width: 0; line-height: 1.2; }
.ro-paso-texto small { display: block; font-weight: 500; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-paso.hecho .ro-paso-numero { background: var(--color-success-bg); color: var(--color-success); }
.ro-paso.actual .ro-paso-numero { background: var(--sec, var(--color-primary)); color: #fff; }
.ro-paso.actual { color: var(--color-text); }
.ro-paso.abierto { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-text); }
.ro-paso:active { transform: scale(.98); }
@media (max-width: 720px) {
.ro-pasos { gap: .3rem; }
.ro-paso { flex-direction: column; gap: .3rem; padding: .55rem .3rem; text-align: center; }
.ro-paso-texto small { display: none; }
}
.ro-panel > h2 { display: flex; align-items: center; gap: .6rem; }
.ro-seccion + .ro-seccion { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.ro-seccion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ro-seccion-cabecera h3 { margin: 0; font-size: 1rem; }
.ro-pregunta { font-weight: 700; margin: 0 0 .45rem; }
.ro-ayuda { color: var(--color-text-muted); font-size: .86rem; margin: .2rem 0 .7rem; max-width: 70ch; }
.ro-datos { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: .55rem 1rem; margin: 0; }
.ro-datos dt { color: var(--color-text-muted); font-size: .84rem; font-weight: 600; }
.ro-datos dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 600px) { .ro-datos { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .ro-datos dd { margin-bottom: .55rem; } }
/* ---- Selector de escala 1–5 ---- */
.ro-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; max-width: 680px; }
.ro-escala.con-cero { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 800px; }
.ro-escala button {
display: grid; gap: .1rem; justify-items: center; padding: .5rem .25rem; min-height: 56px;
border-radius: 12px; border: 1px solid var(--color-border-strong); background: var(--color-surface);
font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.15; color: var(--color-text-muted); cursor: pointer;
}
.ro-escala button strong { font-size: 1.1rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ro-escala button.activo { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.ro-escala button.activo strong { color: var(--color-surface); }
.ro-escala button.sugerido:not(.activo) { box-shadow: inset 0 0 0 2px var(--color-accent); }
.ro-escala button:active { transform: scale(.96); }
.ro-escala button:disabled { cursor: default; opacity: .55; }
.ro-escala-desc { margin: .45rem 0 0; font-size: .84rem; color: var(--color-text-muted); min-height: 2.5em; max-width: 680px; }
@media (max-width: 480px) { .ro-escala button { font-size: .66rem; } }
/* ---- Impacto por índole ---- */
.ro-dimensiones { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.ro-dimension {
display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px;
border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.ro-dimension.activa { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }
.ro-dimension:active { transform: scale(.97); }
.ro-impacto { padding: .9rem 0 .2rem; }
.ro-impacto + .ro-impacto { border-top: 1px dashed var(--color-border); }
.ro-impacto-titulo { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-weight: 700; }
/* ---- El resultado de la evaluación ---- */
.ro-resultado {
display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1.1rem; padding: .9rem 1.1rem;
border-radius: 14px; background: var(--ro-bg, var(--color-surface-2)); color: var(--ro-tinta, var(--color-text-muted));
}
.ro-resultado-npr { font-family: var(--font-titulo); font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ro-resultado-texto { flex: 1 1 240px; }
.ro-resultado-texto strong { display: block; font-size: 1.05rem; }
/* ---- Controles y acciones ---- */
.ro-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ro-item { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; background: var(--color-surface-2); }
.ro-item-cuerpo { flex: 1; min-width: 0; }
.ro-item-texto { overflow-wrap: anywhere; }
.ro-item-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .15rem; font-size: .8rem; color: var(--color-text-muted); }
.ro-item-acciones { display: flex; gap: .2rem; flex: none; }
.ro-item.hecha .ro-item-texto { text-decoration: line-through; color: var(--color-text-muted); }
.ro-item.vencida .ro-item-meta .fecha { color: var(--color-danger); font-weight: 700; }
.ro-marca { display: grid; place-items: center; width: 24px; height: 24px; margin-top: .05rem; border-radius: 50%; flex: none; border: 2px solid var(--color-border-strong); background: var(--color-surface); color: transparent; padding: 0; cursor: pointer; }
.ro-marca:disabled { cursor: default; }
.ro-item.hecha .ro-marca { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.ro-nuevo-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .6rem; }
.ro-nuevo-item.accion { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 10rem auto; }
.ro-nuevo-item.control { grid-template-columns: minmax(0, 2fr) 9.5rem 9rem auto; }
@media (max-width: 760px) { .ro-nuevo-item.accion, .ro-nuevo-item.control { grid-template-columns: minmax(0, 1fr); } }
/* Los recordatorios de la acción que se está escribiendo: cuántas veces, cada cuánto y sus fechas. */
/* Dentro de la rejilla de la acción: en escritorio, línea propia bajo la fila con Agregar; en el
teléfono, antes del botón, para que se elija todo antes de agregar. */
.ro-recordar { grid-column: 1 / -1; order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 760px) { .ro-recordar { order: 0; } }
.ro-recordar .form-control { width: auto; min-width: 9rem; }
.ro-recordar-etiqueta { font-size: .85rem; font-weight: 600; color: var(--color-text-muted); }
.ro-recordar-fechas { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--color-text-muted); }
.ro-estrategias { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.ro-estrategia {
display: grid; gap: .2rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--color-border-strong);
background: var(--color-surface); font: inherit; text-align: left; color: var(--color-text); cursor: pointer;
}
.ro-estrategia strong { font-size: .95rem; }
.ro-estrategia small { color: var(--color-text-muted); font-size: .8rem; line-height: 1.35; }
.ro-estrategia.activa { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary-light); }
.ro-estrategia:active { transform: scale(.98); }
.ro-estrategia:disabled { cursor: default; }
.ro-plan-estado { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .75rem .95rem; border-radius: 12px; background: var(--color-info-bg); color: var(--color-info); font-weight: 600; margin-bottom: .75rem; }
.ro-plan-estado .ro-plan-texto { flex: 1 1 240px; }
.ro-plan-estado.aprobado { background: var(--color-success-bg); color: var(--color-success); }
.ro-plan-estado.devuelto { background: var(--color-warning-bg); color: var(--color-warning); }
.ro-plan-estado.borrador { background: var(--color-surface-2); color: var(--color-text); }
.ro-votos { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; font-size: .82rem; }
.ro-aprobar { margin: .25rem 0 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--color-primary-light); }
.ro-aprobar .ro-pregunta { color: var(--color-text); }
.ro-progreso { height: .5rem; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; margin: .4rem 0 .8rem; }
.ro-progreso > span { display: block; height: 100%; background: var(--color-success); border-radius: 999px; }
.ro-comparar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ro-comparar .icono { color: var(--color-text-soft); }
.ro-historia { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--color-border); display: grid; gap: .75rem; }
.ro-historia li { position: relative; font-size: .88rem; overflow-wrap: anywhere; }
.ro-historia li::before { content: ""; position: absolute; left: calc(-1.1rem - 5px); top: .45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.ro-historia time { display: block; font-size: .76rem; color: var(--color-text-muted); }
.ro-mas { margin-top: .6rem; }
.ro-mas summary { cursor: pointer; font-weight: 700; color: var(--color-primary); font-size: .9rem; }
.ro-mas[open] summary { margin-bottom: .8rem; }
/* ---- Reportar un riesgo (dentro y en el enlace público) ---- */
.ro-reportar { max-width: 720px; }
.ro-archivos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ro-error { color: var(--color-danger); font-weight: 600; }
.ro-hecho { text-align: center; padding: 1rem 0 .5rem; }
.ro-hecho .icono-color { width: 56px; height: 56px; }
.ro-hecho h2 { margin: .6rem 0 .3rem; }
.ro-mis-reportes .ro-reporte { cursor: default; }
.ro-respuesta { grid-column: 1 / -1; margin: .2rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: var(--color-surface-2); font-size: .86rem; }
/* ---- Eventos de pérdida ---- */
.ro-resumen-eventos { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.5rem; margin-bottom: .8rem; }
.ro-resumen-eventos strong { font-family: var(--font-titulo); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.ro-resumen-eventos span { color: var(--color-text-muted); font-size: .86rem; }
.ro-monto { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* ---- Configuración ---- */
.ro-opciones { display: grid; gap: .5rem; }
.ro-opcion { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .95rem; border-radius: 14px; border: 1px solid var(--color-border-strong); cursor: pointer; }
.ro-opcion input { margin-top: .25rem; }
.ro-opcion.activa { border-color: var(--color-primary); background: var(--color-primary-light); }
.ro-opcion small { display: block; color: var(--color-text-muted); }
.ro-personas { display: flex; flex-wrap: wrap; gap: .35rem; }
.ro-enlace { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ro-enlace code { flex: 1 1 260px; padding: .55rem .8rem; border-radius: 12px; background: var(--color-surface-2); overflow-wrap: anywhere; font-size: .86rem; }
.ro-tabla-escala td:first-child { font-weight: 800; width: 3rem; text-align: center; }
/* ---- Pendientes en Inicio y Mi día ---- */
.ro-pendientes .ro-items { margin-top: .5rem; }
.ro-pendientes .ro-item { align-items: center; }
.ro-pendientes a.ro-item { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ro-pendientes a.ro-item:hover { background: var(--color-primary-light); } }
/* ---- Riesgo operacional (2): pestañas, asistente, tablero y configuración ---- */
/* Pestañas del módulo: enlaces con aspecto de segmento; en el teléfono se deslizan de lado. */
.ro-pestanas { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ro-pestanas::-webkit-scrollbar { display: none; }
.ro-pestanas a.segmento { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; text-decoration: none; color: var(--color-text-muted); }
.ro-pestanas a.segmento.activo { color: var(--color-primary); }
.ro-pestana-cuenta { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--color-warning-bg); color: var(--color-warning); font-size: .74rem; }
/* Entradas: lo que aparece sube 4 px; los pasos del asistente se deslizan en la dirección en que se avanza. */
@keyframes ro-aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ro-desde-derecha { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes ro-desde-izquierda { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes ro-solo-opacidad { from { opacity: 0; } to { opacity: 1; } }
.ro-entrar { animation: ro-aparecer var(--dur-2) var(--ease-out) both; }
.ro-entra-adelante { animation: ro-desde-derecha 280ms var(--ease-out) both; }
.ro-entra-atras { animation: ro-desde-izquierda 280ms var(--ease-out) both; }
.ro-asistente { overflow: hidden; }
/* Dentro de un paso, lo siguiente aparece cuando se contesta lo anterior: baja suave desde arriba. */
@keyframes ro-revelar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ro-revelar { animation: ro-revelar 320ms var(--ease-out) backwards; }
/* ---- Base común del módulo: iconos grandes y movimiento tranquilo ----
Un icono ilustrado dentro de una ficha de color suave encabeza cada bloque; lo que entra sube
en escalera; lo que se puede pulsar se alza al pasar por encima; lo decorativo flota despacio.
Todo se apaga con prefers-reduced-motion (al final del bloque). */
.ro-icono-grande {
--ro-icono-fondo: var(--color-primary-light);
width: 52px; height: 52px; flex: none; display: inline-grid; place-items: center;
border-radius: 16px; background: var(--ro-icono-fondo);
}
.ro-icono-grande .icono { width: 32px; height: 32px; transition: transform 260ms var(--ease-out); }
.ro-icono-grande.sm { width: 42px; height: 42px; border-radius: 13px; }
.ro-icono-grande.sm .icono { width: 26px; height: 26px; }
.ro-icono-grande.xl { width: 84px; height: 84px; border-radius: 26px; }
.ro-icono-grande.xl .icono { width: 54px; height: 54px; }
.ro-icono-grande.tono-riesgo { --ro-icono-fondo: var(--sec-riesgo-bg); }
.ro-icono-grande.tono-alerta { --ro-icono-fondo: var(--ro-severo-bg); }
.ro-icono-grande.tono-aviso { --ro-icono-fondo: var(--ro-significativo-bg); }
.ro-icono-grande.tono-ok { --ro-icono-fondo: var(--ro-minimo-bg); }
.ro-icono-grande.tono-info { --ro-icono-fondo: var(--color-info-bg); }
.ro-icono-grande.tono-neutro { --ro-icono-fondo: var(--color-surface-2, var(--color-bg)); }
@keyframes ro-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ro-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ro-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
/* Los hijos entran uno tras otro (hasta 8 escalones; los demás, con el último). Las entradas usan
fill-mode backwards y no both: con both el último fotograma (transform: none) se queda pegado y
anula el transform del :hover de .ro-alzar. */
.ro-escalonado > * { animation: ro-subir 460ms var(--ease-out) backwards; animation-delay: 420ms; }
.ro-escalonado > :nth-child(1) { animation-delay: 0ms; }
.ro-escalonado > :nth-child(2) { animation-delay: 60ms; }
.ro-escalonado > :nth-child(3) { animation-delay: 120ms; }
.ro-escalonado > :nth-child(4) { animation-delay: 180ms; }
.ro-escalonado > :nth-child(5) { animation-delay: 240ms; }
.ro-escalonado > :nth-child(6) { animation-delay: 300ms; }
.ro-escalonado > :nth-child(7) { animation-delay: 360ms; }
.ro-escalonado > :nth-child(8) { animation-delay: 400ms; }
.ro-sube { animation: ro-subir 460ms var(--ease-out) backwards; }
.ro-pop { animation: ro-pop 520ms var(--ease-out) backwards; }
.ro-flota { animation: ro-flotar 5.5s ease-in-out infinite; }
.ro-alzar { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
@media (hover: hover) {
.ro-alzar:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.ro-alzar:hover .ro-icono-grande .icono { transform: scale(1.1) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
.ro-escalonado > *, .ro-sube, .ro-pop { animation: ro-solo-opacidad var(--dur-2) ease both; animation-delay: 0ms; }
.ro-flota { animation: none; }
.ro-alzar, .ro-alzar:hover, .ro-alzar:hover .ro-icono-grande .icono { transform: none; }
}
/* "Por evaluar" late despacio para que no se pierda en la lista. */
@keyframes ro-latido {
0%, 100% { transform: scale(1); background: var(--color-info-bg); box-shadow: 0 0 0 0 transparent; }
50% { transform: scale(1.09); background: color-mix(in srgb, var(--color-info) 20%, var(--color-info-bg)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-info) 12%, transparent); }
}
.ro-etapa.evaluar { animation: ro-latido 1.8s var(--ease-in-out) infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
.ro-entrar, .ro-entra-adelante, .ro-entra-atras, .ro-revelar { animation: ro-solo-opacidad var(--dur-2) ease both; }
.ro-etapa.evaluar { animation: none; }
}
/* ---- Asistente del riesgo ---- */
.ro-paso.bloqueado { cursor: not-allowed; opacity: .55; }
.ro-paso.bloqueado:active { transform: none; }
.ro-paso .ro-paso-numero .icono { width: 14px; height: 14px; }
.ro-paso.hecho .ro-paso-numero .icono { color: var(--color-success); }
.ro-guardado-linea { display: flex; justify-content: flex-end; min-height: 1.6rem; margin: -.4rem 0 .3rem; }
@keyframes ro-guardado { 0% { opacity: 0; transform: translateY(3px); } 12%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ro-guardado { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 999px; background: var(--color-success-bg); color: var(--color-success); font-size: .8rem; font-weight: 700; animation: ro-guardado 2.6s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) { .ro-guardado { animation: ro-solo-opacidad var(--dur-2) ease both; } }
.ro-pregunta-grande { margin: .2rem 0 .35rem; font-family: var(--font-titulo); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.ro-asistente-pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.ro-asistente-pie .btn .icono { width: 16px; height: 16px; }
.ro-subpasos { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.ro-subpasos-puntos { display: flex; gap: .3rem; }
.ro-subpaso { width: .6rem; height: .6rem; border-radius: 999px; background: var(--color-border); transition: width var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ro-subpaso.hecho { background: var(--color-success); }
.ro-subpaso.actual { width: 1.8rem; background: var(--sec, var(--color-primary)); }
.ro-subpasos-texto { font-size: .82rem; color: var(--color-text-muted); }
/* ---- Tablero ---- */
.ro-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ro-cifra {
display: grid; gap: .2rem; align-content: start; padding: 1rem 1.1rem; border-radius: var(--radius);
background: var(--color-surface); box-shadow: var(--elev-1); color: var(--color-text); text-decoration: none;
transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.ro-cifra:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ro-cifra:hover { box-shadow: var(--elev-2); } }
.ro-cifra:active { transform: scale(.98); }
.ro-cifra:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.ro-cifra-etiqueta { font-size: .8rem; font-weight: 700; color: var(--color-text-muted); }
.ro-cifra-valor { font-family: var(--font-titulo); font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ro-cifra-nota { font-size: .76rem; color: var(--color-text-muted); line-height: 1.35; }
.ro-cifra.alarma { box-shadow: var(--elev-1), inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 35%, transparent); }
.ro-cifra.alarma .ro-cifra-valor { color: var(--color-danger); }
.ro-cifra.llamar { box-shadow: var(--elev-1), inset 0 0 0 1px color-mix(in srgb, var(--color-info) 35%, transparent); }
.ro-cifra.llamar .ro-cifra-valor { color: var(--color-info); }
.ro-tablero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 1rem; align-items: start; }
.ro-tablero-principal, .ro-tablero-lateral { display: grid; gap: 1rem; min-width: 0; }
.ro-tablero-principal > .card, .ro-tablero-lateral > .card, .ro-tablero-lateral > .ro-enlace-card { margin-top: 0; }
@media (max-width: 1100px) { .ro-tablero-grid { grid-template-columns: minmax(0, 1fr); } }
.ro-titular { margin: 0 0 1rem; font-size: 1.02rem; }
.ro-titular strong { font-size: 1.25rem; color: var(--color-success); }
.ro-dos-mapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ro-dos-mapas .ro-mapa { gap: 4px; }
.ro-dos-mapas .ro-celda { min-height: 34px; border-radius: 9px; }
.ro-dos-mapas .ro-celda-cuenta { font-size: 1.05rem; }
.ro-mapa-titulo { margin: 0 0 .5rem; font-weight: 800; font-size: .9rem; }
@media (max-width: 760px) { .ro-dos-mapas { grid-template-columns: minmax(0, 1fr); } }
.ro-niveles-tabla td:first-child { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.ro-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ro, var(--color-border-strong)); flex: none; }
.ro-dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ro-dos-columnas > .card { margin-top: 0; }
@media (max-width: 900px) { .ro-dos-columnas { grid-template-columns: minmax(0, 1fr); } }
/* Columnas de pérdidas: un solo tono, barras finas con el extremo redondeado. */
.ro-columnas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; align-items: end; height: 190px; padding-top: 1.6rem; border-bottom: 1px solid var(--color-border); }
.ro-columna { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; outline: none; }
.ro-columna-plot { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.ro-columna-barra { width: min(24px, 70%); border-radius: 4px 4px 0 0; background: var(--color-primary); transition: filter var(--dur-1) var(--ease-out); }
.ro-columna-valor { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.ro-columna-mes { padding-top: .35rem; text-align: center; font-size: .72rem; color: var(--color-text-muted); }
.ro-tip {
position: absolute; bottom: calc(100% + .35rem); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none;
padding: .45rem .6rem; border-radius: 10px; background: var(--color-text); color: var(--color-surface);
font-size: .74rem; line-height: 1.35; white-space: nowrap; opacity: 0; transition: opacity var(--dur-1) var(--ease-out);
}
.ro-columna:hover .ro-tip, .ro-columna:focus-visible .ro-tip { opacity: 1; }
.ro-columna:hover .ro-columna-barra, .ro-columna:focus-visible .ro-columna-barra { filter: brightness(1.2); }
.ro-columna:focus-visible .ro-columna-mes { color: var(--color-primary); font-weight: 700; }
/* Barras horizontales: nombre, pista con relleno de un solo tono y valor. */
.ro-barras { display: grid; gap: .6rem; }
.ro-barra-fila { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem; grid-template-areas: "nombre valor" "pista pista" "nota nota"; gap: .2rem .6rem; }
.ro-barra-nombre { grid-area: nombre; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }
.ro-barra-valor { grid-area: valor; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ro-barra-pista { grid-area: pista; height: .5rem; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.ro-barra-pista > span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); }
.ro-barra-nota { grid-area: nota; font-size: .76rem; color: var(--color-text-muted); }
.ro-fila.compacta { grid-template-columns: auto minmax(0, 1fr); padding: .55rem .5rem; gap: .7rem; }
.ro-atencion { color: inherit; text-decoration: none; }
.ro-atencion:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ro-atencion:hover { background: var(--color-primary-light); } }
.ro-atencion.vencida .icono { color: var(--color-danger); }
/* ---- El enlace para reportar ---- */
.ro-enlace-card h2 { display: flex; align-items: center; gap: .6rem; }
.ro-enlace-estado { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; font-size: .84rem; }
.ro-enlace-cuerpo { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .7rem; }
.ro-qr { width: 132px; height: 132px; border-radius: 12px; background: #fff; padding: 6px; flex: none; box-shadow: inset 0 0 0 1px var(--color-border); image-rendering: pixelated; }
.ro-enlace-datos { display: grid; gap: .6rem; min-width: 0; flex: 1; }
.ro-enlace-url { display: block; padding: .5rem .7rem; border-radius: 10px; background: var(--color-surface-2); font-size: .8rem; overflow-wrap: anywhere; }
.ro-enlace-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 420px) { .ro-enlace-cuerpo { flex-direction: column; align-items: center; } .ro-enlace-datos { width: 100%; } }
/* ---- Configuración por secciones ---- */
.ro-config { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ro-config-menu { display: grid; gap: .25rem; position: sticky; top: calc(var(--topbar-height) + 1rem); }
.ro-config-opcion {
display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .8rem; border-radius: 12px; border: 0;
background: transparent; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ro-config-opcion.activa { background: var(--color-surface); box-shadow: var(--elev-1); color: var(--color-primary); }
@media (hover: hover) and (pointer: fine) { .ro-config-opcion:not(.activa):hover { background: var(--color-surface-2); } }
.ro-config-opcion:active { transform: scale(.98); }
.ro-config-contenido { display: grid; gap: 1rem; min-width: 0; }
.ro-config-contenido > .card, .ro-config-contenido > .ro-enlace-card { margin-top: 0; }
@media (max-width: 900px) {
.ro-config { grid-template-columns: minmax(0, 1fr); }
.ro-config-menu { position: static; display: flex; overflow-x: auto; gap: .35rem; scrollbar-width: none; }
.ro-config-menu::-webkit-scrollbar { display: none; }
.ro-config-opcion { width: auto; white-space: nowrap; flex: none; }
}
.ro-escalones { display: grid; gap: .6rem; }
.ro-escalon { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 14px; background: var(--color-surface-2); }
.ro-escalon-valor { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; flex: none; background: var(--color-surface); font-weight: 800; }
.ro-escalon-campos { display: grid; gap: .45rem; flex: 1; min-width: 0; }
.ro-escalon-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.ro-escalon-fila > .form-control { flex: 1 1 180px; min-width: 0; }
.ro-escalon-desde { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .84rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.ro-escalon-desde .form-control { width: 5.5rem; }
.ro-escalon-previa { margin: 0; font-size: .8rem; color: var(--color-text-muted); }
.ro-cortes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.ro-cortes label { display: grid; gap: .3rem; margin: 0; font-size: .82rem; }
.ro-tramos { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ro-tramos li { display: flex; flex-wrap: wrap; gap: .2rem .9rem; padding: .45rem .7rem; border-radius: 10px; background: var(--color-surface-2); font-size: .86rem; }
.ro-tramos strong { min-width: 5.5rem; }
.ro-indole { border-radius: 14px; background: var(--color-surface-2); padding: .2rem .9rem; margin-top: .5rem; }
.ro-indole[open] { padding-bottom: .8rem; }
.ro-indole summary { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; cursor: pointer; font-weight: 700; list-style: none; }
.ro-indole summary::-webkit-details-marker { display: none; }
.ro-indole-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ro-nivel-config { display: grid; gap: .6rem; padding: .85rem .95rem; border-radius: 14px; background: var(--ro-bg); margin-top: .6rem; }
.ro-nivel-config-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ro-nivel-config-cabecera .form-control { flex: 1 1 160px; max-width: 280px; font-weight: 700; }
.ro-nivel-rango { font-size: .82rem; font-weight: 700; color: var(--ro-tinta); }
.ro-nivel-config-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.ro-nivel-config-campos label { display: grid; gap: .25rem; margin: 0; font-size: .8rem; color: var(--color-text); }
.ro-nivel-config .ro-dimension { background: var(--color-surface); }
.ro-nivel-config .ro-dimension.activa { background: var(--color-primary-light); }
.ro-config-pie {
position: sticky; bottom: calc(var(--nav-inferior, 0px) + .75rem); z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
padding: .7rem .9rem; border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--elev-3);
}
.ro-config-pie-espacio { flex: 1; }
.ro-unidad { display: flex; align-items: center; gap: .4rem; }
.ro-unidad .form-control { flex: 1; min-width: 0; }
.ro-unidad > span { color: var(--color-text-muted); font-size: .8rem; white-space: nowrap; }
@media (min-width: 901px) { .ro-config-pie { bottom: .75rem; } }
/* =================================================================
Portada pública para reportar riesgos (/riesgo/{empresa}).
Quien abre el enlace llega de fuera y casi siempre desde el móvil.
La portada dice en tres segundos qué es y cómo funciona, y detrás
se mueve —muy tenue— un paisaje de riesgo operacional: la matriz
que respira, el radar que barre, el proceso por el que viaja un
punto. Se nota que está vivo sin distraer del formulario.
================================================================= */
/* ---- El fondo en movimiento (FondoRiesgo.razor) ---- */
.ro-fondo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .12; }
:root[data-theme="dark"] .ro-fondo { opacity: .1; }
.ro-fondo svg { position: absolute; display: block; overflow: visible; }
.ro-fondo-matriz { width: clamp(220px, 34vw, 420px); top: -30px; right: -50px; transform: rotate(-8deg); }
.ro-fondo-baldosa { animation: ro-fondo-respira 7s ease-in-out infinite; }
.ro-fondo-baldosa.minimo { fill: var(--ro-minimo); }
.ro-fondo-baldosa.moderado { fill: var(--ro-moderado); }
.ro-fondo-baldosa.significativo { fill: var(--ro-significativo); }
.ro-fondo-baldosa.severo { fill: var(--ro-severo); }
.ro-fondo-baldosa.extremo { fill: var(--ro-extremo); }
@keyframes ro-fondo-respira { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.ro-fondo-radar { width: clamp(300px, 46vw, 560px); left: -150px; bottom: -170px; }
.ro-fondo-radar circle, .ro-fondo-radar line { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.ro-fondo-barrido { transform-origin: 200px 200px; animation: ro-fondo-gira 14s linear infinite; }
.ro-fondo-barrido path { fill: var(--color-primary); opacity: .35; }
.ro-fondo-barrido line { stroke-width: 3; }
.ro-fondo-radar .ro-fondo-eco { fill: var(--sec-riesgo); stroke: none; transform-box: fill-box; transform-origin: center; animation: ro-fondo-eco 4.5s ease-out infinite; }
@keyframes ro-fondo-gira { to { transform: rotate(360deg); } }
@keyframes ro-fondo-eco { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
/* El flujo cruza la pantalla; en un teléfono no se encoge (se recorta por los lados) para que el
punto que viaja siga viéndose. */
.ro-fondo-flujo { width: max(100%, 960px); left: 50%; top: 34%; transform: translateX(-50%); }
.ro-fondo-camino { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.ro-fondo-viajero { fill: none; stroke: var(--color-primary); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 999; stroke-dashoffset: 1000; animation: ro-fondo-viaja 16s linear infinite; }
.ro-fondo-viajero.otro { stroke: var(--sec-riesgo); animation-delay: -8s; }
.ro-fondo-nodo { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 3; }
@keyframes ro-fondo-viaja { to { stroke-dashoffset: 0; } }
.ro-fondo-escudo, .ro-fondo-alerta { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ro-fondo-escudo { width: clamp(64px, 9vw, 120px); top: 14%; left: 6%; stroke: var(--sec-riesgo); animation: ro-fondo-flota 9s ease-in-out infinite; }
.ro-fondo-alerta { width: clamp(52px, 7vw, 96px); bottom: 14%; right: 7%; stroke: var(--ro-severo); animation: ro-fondo-flota 11s ease-in-out -4s infinite; }
@keyframes ro-fondo-flota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
/* ---- La portada ---- */
.ro-portada { max-width: 680px; gap: 1.25rem; }
/* El borde blanco de las tarjetas públicas sobra en oscuro: allí se queda en el borde del tema. */
:root[data-theme="dark"] .ro-portada .publico-card { border-color: var(--color-border); }
.ro-portada-hero { display: grid; justify-items: center; gap: .35rem; padding: 1.25rem .5rem 0; text-align: center; }
.ro-portada-marca {
width: 76px; height: 76px; margin-bottom: .6rem; padding: .55rem;
display: grid; place-items: center; border-radius: 22px;
background: var(--color-surface); box-shadow: var(--elev-2);
}
.ro-portada-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ro-portada-marca span { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.ro-portada-antetitulo {
display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; margin: 0; padding: .3rem .85rem;
border-radius: 999px; background: var(--sec-riesgo-bg); color: var(--sec-riesgo);
font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ro-portada-hero h1 { margin: .4rem 0 0; font-size: clamp(1.9rem, 5.5vw, 2.6rem); line-height: 1.1; }
.ro-portada-mensaje { max-width: 46ch; margin: .2rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--color-text-muted); }
/* Cómo funciona: tres fichas con su icono ilustrado grande. */
.ro-portada-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ro-portada-pasos li {
display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 1.1rem .8rem; text-align: center;
border-radius: 18px; background: var(--color-surface); box-shadow: var(--elev-1);
}
.ro-portada-pasos .ro-icono-grande { margin-bottom: .25rem; }
.ro-portada-pasos strong { font-size: .95rem; line-height: 1.25; }
.ro-portada-pasos small { font-size: .8rem; line-height: 1.4; color: var(--color-text-muted); }
/* Las tarjetas entran después de la cabecera y de los pasos. */
.ro-portada > .publico-card.ro-sube { animation-delay: 280ms; }
.ro-portada > .publico-card.ro-sube ~ .publico-card.ro-sube { animation-delay: 380ms; }
.ro-portada-cabecera { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.ro-portada-cabecera h2 { margin: 0; font-size: 1.2rem; }
.ro-portada-cabecera p { margin: .15rem 0 0; font-size: .88rem; color: var(--color-text-muted); }
.ro-portada-enviar { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .5rem; }
.ro-portada-enviar .icono { transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .ro-portada-enviar:not(:disabled):hover .icono { transform: translate(3px, -3px); } }
.ro-portada-exito, .ro-portada-aviso { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.ro-portada-exito h2, .ro-portada-aviso h2 { margin: .5rem 0 0; font-size: 1.35rem; }
.ro-portada-exito p { margin: 0; }
.ro-portada-codigo { width: 100%; margin: .5rem 0; padding: .7rem 1rem; border: 2px dashed var(--color-border-strong); border-radius: 14px; background: var(--color-surface-2); overflow-wrap: anywhere; }
.ro-portada-exito .btn-outline { margin-top: .75rem; }
.ro-portada-estado { display: flex; align-items: flex-start; gap: .85rem; margin-top: 1rem; padding: 1rem; border-radius: 16px; background: var(--color-surface-2); }
.ro-portada-estado > div { min-width: 0; }
/* ---- El formulario (también lo usa la página interna /reportar-riesgo) ---- */
.form-label.ro-pregunta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .92rem; font-weight: 700; }
.ro-pregunta .icono-color { flex: none; }
/* ---- El asistente del reporte: una página por tema ---- */
.ro-reporte-pagina { min-width: 0; }
.ro-reporte-pregunta { display: flex; align-items: flex-start; gap: .95rem; margin-bottom: 1.1rem; }
.ro-reporte-pregunta > div { min-width: 0; }
.ro-reporte-pregunta .ro-pregunta-grande { display: block; margin: .2rem 0 .25rem; line-height: 1.2; }
.ro-reporte-pregunta .ro-ayuda { margin: 0; }
.ro-reporte-pista { margin: .45rem 0 0; font-size: .82rem; color: var(--color-text-muted); }
/* Opciones grandes que se eligen con un toque (si ya pasó; con nombre o anónimo). */
.ro-reporte-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.ro-reporte-opcion {
display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .85rem 1rem; text-align: left;
border: 2px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
font: inherit; color: var(--color-text); cursor: pointer;
}
.ro-reporte-opcion strong { display: block; font-size: .98rem; line-height: 1.25; }
.ro-reporte-opcion small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--color-text-muted); }
.ro-reporte-opcion > span:last-child { min-width: 0; }
.ro-reporte-opcion.activo { border-color: var(--color-primary); background: var(--color-primary-light); animation: ro-pop-suave 320ms var(--ease-out); }
.ro-reporte-opcion:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) { .ro-reporte-opcion:not(.activo):hover { border-color: var(--color-primary); } }
@keyframes ro-pop-suave { 0% { transform: scale(.95); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.ro-reporte-nota { display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 14px; background: var(--color-surface-2); font-size: .92rem; }
.ro-reporte-nota .icono-color { flex: none; }
.ro-reporte-envio { display: grid; gap: .65rem; margin-top: 1.25rem; }
.ro-asistente-pie.sin-linea { margin-top: .6rem; padding-top: 0; border-top: 0; }
/* Adjuntar: una zona amplia y clara en lugar de un botón pequeño. */
.ro-soltar {
display: flex; align-items: center; gap: .85rem; width: 100%; margin: 0; padding: .9rem 1rem;
border: 2px dashed var(--color-border-strong); border-radius: 16px; background: var(--color-surface-2);
cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.ro-soltar-icono {
width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px;
background: var(--color-surface); color: var(--color-primary); box-shadow: var(--elev-1);
transition: transform var(--dur-3) var(--ease-out);
}
.ro-soltar-texto { display: grid; gap: .1rem; min-width: 0; }
.ro-soltar-texto strong { font-size: .92rem; color: var(--color-text); }
.ro-soltar-texto small { font-size: .78rem; font-weight: 400; color: var(--color-text-muted); }
@media (hover: hover) {
.ro-soltar:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.ro-soltar:hover .ro-soltar-icono { transform: translateY(-3px); }
}
@media (max-width: 560px) {
.ro-portada { gap: 1rem; }
.ro-portada-hero { padding-top: .5rem; }
.ro-portada-marca { width: 64px; height: 64px; border-radius: 18px; }
.ro-portada-mensaje { font-size: .96rem; }
.ro-portada-pasos { gap: .5rem; }
.ro-portada-pasos li { padding: .85rem .4rem; border-radius: 16px; }
.ro-portada-pasos small { display: none; }
.ro-portada-pasos strong { font-size: .8rem; }
.ro-portada-pasos .ro-icono-grande { width: 44px; height: 44px; border-radius: 14px; }
.ro-portada-pasos .ro-icono-grande .icono { width: 28px; height: 28px; }
.ro-reporte-pregunta { gap: .75rem; }
.ro-reporte-pregunta > .ro-icono-grande { width: 44px; height: 44px; border-radius: 14px; }
.ro-reporte-pregunta > .ro-icono-grande .icono { width: 28px; height: 28px; }
.ro-reporte-pregunta .ro-pregunta-grande { font-size: 1.18rem; }
.ro-reporte-opcion { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
.ro-fondo-baldosa, .ro-fondo-barrido, .ro-fondo-eco, .ro-fondo-viajero, .ro-fondo-escudo, .ro-fondo-alerta { animation: none; }
.ro-fondo-radar .ro-fondo-eco { opacity: .8; }
.ro-reporte-opcion.activo { animation: none; }
.ro-soltar-icono, .ro-portada-enviar .icono { transition: none; }
}