/* ============================================================================
QiwoBusiness - hoja de estilos global
----------------------------------------------------------------------------
TODO el CSS del proyecto vive aca. No se usan archivos .razor.css scoped, por
la misma razon que en Qiwo: con el CSS repartido en treinta archivos nadie
sabe donde esta definido un color, y terminan conviviendo tres tonos de verde
que deberian ser el mismo.
PALETA - los cinco colores del manual de marca de Qiwo, ninguno mas.
Si hacen falta mas distinciones, se cambia la FORMA, no se inventa un color.
============================================================================ */
:root {
/* Primarios de marca */
--qb-azul: #0B2947;
--qb-verde: #0F9375;
/* Secundarios de marca */
--qb-crema: #ECEDE7;
--qb-gris: #D1D5DB;
--qb-celeste: #E0F2F1;
/* Derivados de los primarios, para superficies y bordes */
--qb-azul-claro: #14406B;
--qb-azul-suave: rgba(11, 41, 71, .06);
--qb-verde-suave: rgba(15, 147, 117, .10);
/* Neutros de texto */
--qb-tx: #0F172A;
--qb-tx-suave: #475569;
--qb-tx-tenue: #64748B;
--qb-fondo: #F8FAFC;
--qb-superficie: #FFFFFF;
/* ── Estados ──────────────────────────────────────────────────────────
Los mismos cuatro de Qiwo escolar, para que una persona que usa los dos
productos no tenga que reaprender que significa cada color.
Cada estado trae fondo, borde y texto: el color TIÑE TODA LA SUPERFICIE.
Nunca una franja de acento lateral sobre fondo blanco -- ese patron es el
que hace que un tablero se lea como plantilla generica. */
--qb-ok-bg: #D1FAE5; --qb-ok-bd: #0F9375; --qb-ok-tx: #065F46;
--qb-td-bg: #FEF3A0; --qb-td-bd: #CA8A04; --qb-td-tx: #854D0E;
--qb-au-bg: #FCB3B3; --qb-au-bd: #DC2626; --qb-au-tx: #7F1D1D;
--qb-sa-bg: #DBEAFE; --qb-sa-bd: #1D4ED8; --qb-sa-tx: #1E40AF;
--qb-radio: 10px;
--qb-sombra: 0 1px 3px rgba(11, 41, 71, .12);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
color: var(--qb-tx);
background: var(--qb-fondo);
-webkit-text-size-adjust: 100%;
}
/* El pellizco accidental deja la pantalla agrandada y el usuario no sabe como
volver. Pasa seguido en tablets montadas en pared. */
body { touch-action: pan-x pan-y; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--qb-verde); }
/* ══════════════════════════════════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════════════════════════════ */
/* 100dvh y no 100vh: en Chrome de Android, 100vh es el viewport GRANDE -- el
que habria si la barra de direcciones estuviera oculta. Con la barra visible
el contenedor sobresale ~105px y, combinado con overflow:hidden, lo de abajo
queda inalcanzable. En Qiwo eso dejo el boton de cerrar sesion fuera de la
pantalla en un Galaxy S20. El 100vh va primero como respaldo para navegadores
que no conocen dvh. */
.qb-app {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.qb-header {
background: var(--qb-azul);
color: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: sticky;
top: 0;
z-index: 20;
}
.qb-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qb-marca__texto { font-weight: 700; font-size: 16px; letter-spacing: -.015em; line-height: 1.15; }
.qb-marca__sede { font-size: 11.5px; opacity: .72; font-weight: 500; margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El selector de sede, para una empresa con varias.
---------------------------------------------------------------------------
Ocupa EXACTAMENTE el lugar del texto plano al que reemplaza: mismo tamano de
letra, misma opacidad, debajo del logo. display:block es parte de eso -- un
select es inline por defecto y se plantaba AL LADO del lockup, empujandolo y
partiendo la linea de la marca.
No lleva caja ni borde en reposo: en la cabecera esto no es un campo por
llenar, es el nombre del sitio donde estas parado. Lo que invita a pulsarlo
es el pin y el chevron, y la caja aparece recien al pasar el mouse.
Los dos iconos van dibujados en el fondo y no como markup porque un
nativo no admite hijos; y van en SVG y no en caracteres porque el triangulo
del navegador se pinta con el color del sistema y sobre el azul de marca
desaparece. */
.qb-sede {
appearance: none; -webkit-appearance: none;
display: block;
background-color: transparent;
background-image:
/* pin de ubicacion, a la izquierda */
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2c-1.9 0-3.4 1.5-3.4 3.4 0 2.5 3.4 6.2 3.4 6.2s3.4-3.7 3.4-6.2c0-1.9-1.5-3.4-3.4-3.4z' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='4.6' r='1.2' fill='%23ffffff'/%3E%3C/svg%3E"),
/* chevron, a la derecha */
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: left 5px center, right 6px center;
border: 1px solid transparent;
border-radius: 6px;
color: #FFFFFF;
opacity: .75;
font-size: 11.5px;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
margin-top: 1px;
margin-left: -5px; /* el padding del pin no debe desalinear con el logo */
padding: 2px 19px 2px 20px;
max-width: 200px;
text-overflow: ellipsis;
cursor: pointer;
transition: opacity .12s ease, background-color .12s ease, border-color .12s ease;
}
.qb-sede:hover {
opacity: 1;
background-color: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.20);
}
.qb-sede:focus-visible {
opacity: 1;
outline: 2px solid rgba(255,255,255,.60);
outline-offset: 1px;
}
/* La lista desplegada la pinta el sistema operativo sobre fondo claro: sin esto
las opciones saldrian blancas sobre blanco. */
.qb-sede option { color: var(--qb-azul); background: #FFFFFF; opacity: 1; }
@media (max-width: 420px) { .qb-sede { max-width: 132px; } }
.qb-header__der { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* tabular-nums es obligatorio mostrando segundos: sin el, el ancho de cada
digito cambia y el reloj tiembla de lado a lado una vez por segundo. */
.qb-reloj { text-align: right; line-height: 1.2; }
.qb-reloj b { display: block; font-size: 20px; font-variant-numeric: tabular-nums;
letter-spacing: -.01em; white-space: nowrap; }
.qb-reloj span { font-size: 10.5px; opacity: .7; white-space: nowrap; }
.qb-main { flex: 1; padding: 14px; }
.qb-contenedor { max-width: 1100px; margin: 0 auto; }
/* ══════════════════════════════════════════════════════════════════════════
BOTONES
═══════════════════════════════════════════════════════════════════════ */
.qb-btn {
border: 1px solid var(--qb-gris);
background: var(--qb-superficie);
color: var(--qb-tx-suave);
padding: 8px 14px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
/* 44px es el minimo tocable comodo en una tablet montada en pared. */
min-height: 40px;
transition: background .12s, border-color .12s;
}
.qb-btn:hover:not(:disabled) { background: var(--qb-crema); }
.qb-btn:disabled { opacity: .5; cursor: not-allowed; }
.qb-btn--primario {
background: var(--qb-verde);
border-color: var(--qb-verde);
color: #fff;
}
.qb-btn--primario:hover:not(:disabled) { background: #0C7A61; border-color: #0C7A61; }
.qb-btn--fantasma {
background: transparent;
border-color: rgba(255,255,255,.28);
color: #fff;
}
.qb-btn--fantasma:hover:not(:disabled) { background: rgba(255,255,255,.12); }
/* ══════════════════════════════════════════════════════════════════════════
SELECTOR DE VISTA (tarjetas / tabla / por estado)
═══════════════════════════════════════════════════════════════════════ */
.qb-vistas { display: flex; gap: 4px; background: var(--qb-crema);
padding: 3px; border-radius: 9px; }
.qb-vista {
border: 0; background: transparent; color: var(--qb-tx-suave);
padding: 6px 11px; border-radius: 7px; cursor: pointer;
font-size: 12.5px; font-weight: 600; font-family: inherit;
display: flex; align-items: center; gap: 6px; min-height: 34px;
}
.qb-vista[aria-pressed="true"] { background: var(--qb-superficie); color: var(--qb-azul);
box-shadow: var(--qb-sombra); }
.qb-vista svg { flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════════════════════
RESUMEN (los cuatro numeros)
═══════════════════════════════════════════════════════════════════════ */
.qb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--qb-gris); border-radius: var(--qb-radio);
overflow: hidden; margin-bottom: 14px; box-shadow: var(--qb-sombra); }
.qb-kpi { background: var(--qb-superficie); padding: 12px 6px; text-align: center; }
.qb-kpi b { display: block; font-size: 26px; font-weight: 700; line-height: 1.05;
font-variant-numeric: tabular-nums; }
.qb-kpi span { font-size: 10px; text-transform: uppercase; letter-spacing: .045em;
color: var(--qb-tx-tenue); font-weight: 700; }
.qb-kpi--ok b { color: var(--qb-ok-tx); }
.qb-kpi--td b { color: var(--qb-td-tx); }
.qb-kpi--au b { color: var(--qb-au-tx); }
.qb-kpi--sa b { color: var(--qb-sa-tx); }
/* ══════════════════════════════════════════════════════════════════════════
VISTA A - TARJETAS
═══════════════════════════════════════════════════════════════════════ */
.qb-seccion { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--qb-tx-tenue);
margin: 16px 2px 7px; display: flex; align-items: center; gap: 8px; }
.qb-seccion:first-child { margin-top: 0; }
.qb-seccion i { flex: 1; height: 1px; background: var(--qb-gris); }
.qb-fila {
border-radius: var(--qb-radio);
padding: 11px 13px;
margin-bottom: 7px;
border: 1px solid;
display: flex;
align-items: center;
gap: 11px;
}
.qb-fila--ok { background: var(--qb-ok-bg); border-color: var(--qb-ok-bd); color: var(--qb-ok-tx); }
.qb-fila--td { background: var(--qb-td-bg); border-color: var(--qb-td-bd); color: var(--qb-td-tx); }
.qb-fila--au { background: var(--qb-au-bg); border-color: var(--qb-au-bd); color: var(--qb-au-tx); }
.qb-fila--sa { background: var(--qb-sa-bg); border-color: var(--qb-sa-bd); color: var(--qb-sa-tx); }
.qb-ini { width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,.65); display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.qb-quien { flex: 1; min-width: 0; }
.qb-nombre { font-weight: 650; font-size: 14px; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-cargo { font-size: 11.5px; opacity: .78; margin-top: 1px; }
.qb-hora { text-align: right; flex-shrink: 0; }
.qb-hora b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.qb-hora span { font-size: 10.5px; opacity: .85; font-weight: 600; }
/* ══════════════════════════════════════════════════════════════════════════
VISTA B - TABLA
═══════════════════════════════════════════════════════════════════════ */
.qb-tabla-caja { background: var(--qb-superficie); border: 1px solid var(--qb-gris);
border-radius: var(--qb-radio); overflow-x: auto; box-shadow: var(--qb-sombra); }
table.qb-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.qb-tabla th { background: var(--qb-crema); text-align: left; padding: 9px 11px;
font-size: 10px; text-transform: uppercase; letter-spacing: .045em;
color: var(--qb-tx-suave); font-weight: 700;
border-bottom: 1px solid var(--qb-gris); white-space: nowrap; }
.qb-tabla td { padding: 9px 11px; border-bottom: 1px solid #EEF2F6; }
.qb-tabla tr:last-child td { border-bottom: 0; }
.qb-tabla .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.qb-tabla .nm { font-weight: 650; }
.qb-tabla tr.qb-r--ok td { background: var(--qb-ok-bg); color: var(--qb-ok-tx); }
.qb-tabla tr.qb-r--td td { background: var(--qb-td-bg); color: var(--qb-td-tx); }
.qb-tabla tr.qb-r--au td { background: var(--qb-au-bg); color: var(--qb-au-tx); }
.qb-tabla tr.qb-r--sa td { background: var(--qb-sa-bg); color: var(--qb-sa-tx); }
.qb-pill { display: inline-block; padding: 2px 8px; border-radius: 20px;
font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.6);
white-space: nowrap; }
/* ══════════════════════════════════════════════════════════════════════════
VISTA C - POR ESTADO
═══════════════════════════════════════════════════════════════════════ */
.qb-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.qb-col { background: var(--qb-superficie); border: 1px solid var(--qb-gris);
border-radius: var(--qb-radio); overflow: hidden; box-shadow: var(--qb-sombra); }
.qb-col__hd { padding: 9px 11px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .045em;
display: flex; justify-content: space-between; align-items: center; }
.qb-col__hd b { font-size: 17px; }
.qb-col__hd--ok { background: var(--qb-ok-bg); color: var(--qb-ok-tx); border-bottom: 1px solid var(--qb-ok-bd); }
.qb-col__hd--td { background: var(--qb-td-bg); color: var(--qb-td-tx); border-bottom: 1px solid var(--qb-td-bd); }
.qb-col__hd--au { background: var(--qb-au-bg); color: var(--qb-au-tx); border-bottom: 1px solid var(--qb-au-bd); }
.qb-col__hd--sa { background: var(--qb-sa-bg); color: var(--qb-sa-tx); border-bottom: 1px solid var(--qb-sa-bd); }
.qb-mini { padding: 7px 11px; border-bottom: 1px solid #F1F5F9; font-size: 12.5px;
display: flex; justify-content: space-between; gap: 8px; }
.qb-mini:last-child { border-bottom: 0; }
.qb-mini__nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-mini__hr { font-variant-numeric: tabular-nums; color: var(--qb-tx-tenue);
font-size: 11.5px; flex-shrink: 0; }
.qb-col__vacia { padding: 14px 11px; text-align: center; color: var(--qb-tx-tenue); font-size: 12px; }
/* ══════════════════════════════════════════════════════════════════════════
LOGIN
═══════════════════════════════════════════════════════════════════════ */
.qb-login { min-height: 100vh; min-height: 100dvh;
display: flex; align-items: center; justify-content: center;
padding: 20px; background: var(--qb-azul); }
.qb-login__caja { background: var(--qb-superficie); border-radius: 14px;
padding: 28px 24px; width: 100%; max-width: 380px;
box-shadow: 0 10px 34px rgba(0,0,0,.26); }
.qb-login__marca { text-align: center; margin-bottom: 22px; }
.qb-login__titulo { font-size: 21px; font-weight: 700; color: var(--qb-azul); margin-top: 10px; }
.qb-login__sub { font-size: 12.5px; color: var(--qb-tx-tenue); margin-top: 3px; }
.qb-campo { margin-bottom: 14px; }
.qb-campo label { display: block; font-size: 12px; font-weight: 650;
color: var(--qb-tx-suave); margin-bottom: 5px; }
.qb-campo input { width: 100%; padding: 11px 12px; border: 1px solid var(--qb-gris);
border-radius: 8px; font-size: 15px; font-family: inherit;
color: var(--qb-tx); background: var(--qb-superficie); }
.qb-campo input:focus { outline: 2px solid var(--qb-verde); outline-offset: -1px; border-color: var(--qb-verde); }
/* El aviso bloqueante va centrado y ocupando el ancho, no en una esquina:
un error de login arrinconado no se ve y la persona vuelve a intentar igual. */
.qb-aviso { padding: 10px 12px; border-radius: 8px; font-size: 13px;
margin-bottom: 14px; text-align: center; font-weight: 600;
border: 1px solid; }
.qb-aviso--error { background: var(--qb-au-bg); border-color: var(--qb-au-bd); color: var(--qb-au-tx); }
.qb-aviso--info { background: var(--qb-celeste); border-color: var(--qb-verde); color: var(--qb-ok-tx); }
/* ══════════════════════════════════════════════════════════════════════════
PIE Y ESTADOS VACIOS
═══════════════════════════════════════════════════════════════════════ */
.qb-pie { padding: 10px 14px; background: var(--qb-superficie);
border-top: 1px solid var(--qb-gris); display: flex;
justify-content: space-between; align-items: center;
font-size: 11.5px; color: var(--qb-tx-tenue); flex-wrap: wrap; gap: 8px; }
.qb-vivo { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--qb-verde); }
.qb-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--qb-verde); }
.qb-vacio { text-align: center; padding: 40px 20px; color: var(--qb-tx-tenue); }
.qb-vacio h3 { font-size: 15px; color: var(--qb-tx-suave); margin-bottom: 6px; }
.qb-vacio p { font-size: 13px; margin: 0; }
.qb-cargando { text-align: center; padding: 40px 20px; color: var(--qb-tx-tenue); font-size: 13.5px; }
/* ══════════════════════════════════════════════════════════════════════════
MOVIL
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.qb-columnas { grid-template-columns: 1fr; }
.qb-kpi b { font-size: 22px; }
.qb-main { padding: 10px; }
.qb-header { padding: 10px 12px; }
/* 15 px y no 17: con los segundos son ocho caracteres en vez de cinco, y a
360 px el reloj le comia el aire al nombre de la sede. */
.qb-reloj b { font-size: 15px; }
/* El texto del selector se oculta y quedan los iconos: tres etiquetas no
entran en 360px sin partirse en dos lineas. */
.qb-vista__texto { display: none; }
.qb-vista { padding: 7px 10px; }
}
/* ══════════════════════════════════════════════════════════════════════════
LOGO
La Q hace de primera letra: el lockup es Q + "iwo" + "Business", alineado
por la linea de base como en el login de Qiwo escolar.
═══════════════════════════════════════════════════════════════════════ */
.qb-logo { display: inline-flex; align-items: baseline; gap: 1px; }
.qb-logo svg { align-self: center; }
.qb-logo__texto {
font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.qb-logo__producto {
font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
margin-left: 7px;
}
.qb-logo--compacto .qb-logo__texto,
.qb-logo--compacto .qb-logo__producto { font-size: 19px; }
.qb-logo--compacto .qb-logo__producto { margin-left: 5px; }
/* ══════════════════════════════════════════════════════════════════════════
BARRA DE HERRAMIENTAS (buscador + acciones)
═══════════════════════════════════════════════════════════════════════ */
.qb-barra { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.qb-barra__acciones { display: flex; gap: 7px; margin-left: auto; }
.qb-buscador { position: relative; flex: 1; min-width: 200px; display: flex; align-items: center; }
.qb-buscador svg { position: absolute; left: 11px; color: var(--qb-tx-tenue); pointer-events: none; }
.qb-buscador input {
width: 100%; padding: 9px 12px 9px 33px;
border: 1px solid var(--qb-gris); border-radius: 8px;
font-size: 14px; font-family: inherit; color: var(--qb-tx);
background: var(--qb-superficie); min-height: 40px;
}
.qb-buscador input:focus { outline: 2px solid var(--qb-verde); outline-offset: -1px; border-color: var(--qb-verde); }
.qb-btn--chico { padding: 5px 10px; font-size: 12px; min-height: 30px; }
/* ══════════════════════════════════════════════════════════════════════════
TABLA DE PERSONAL
═══════════════════════════════════════════════════════════════════════ */
.qb-celda-persona { display: flex; align-items: center; gap: 9px; }
.qb-ini--chico { width: 28px; height: 28px; font-size: 11px; background: var(--qb-crema); color: var(--qb-azul); }
.qb-codigo { display: block; font-size: 11px; color: var(--qb-tx-tenue); font-weight: 500; }
.qb-acciones-fila { white-space: nowrap; display: flex; gap: 5px; }
.qb-pie-tabla { font-size: 12px; color: var(--qb-tx-tenue); margin: 9px 2px 0; }
/* Una fila de alguien cesado se apaga, pero sigue legible: el historico importa. */
.qb-fila-cesada td { opacity: .58; }
/* Tiene tarjeta / no tiene. El "Falta" va con el color de ausente porque es
exactamente eso: sin tarjeta, esa persona no puede marcar. */
.qb-marca-si { color: var(--qb-ok-bd); display: inline-flex; }
.qb-marca-no {
display: inline-block; padding: 2px 8px; border-radius: 20px;
font-size: 10.5px; font-weight: 700;
background: var(--qb-au-bg); color: var(--qb-au-tx); border: 1px solid var(--qb-au-bd);
}
/* ══════════════════════════════════════════════════════════════════════════
HOJA LATERAL (alta, edicion, tarjeta)
En movil baja desde abajo como bottom-sheet; en escritorio entra por la
derecha. El max-height usa dvh: con vh, en Android el encabezado con la X
queda fuera de la pantalla y no hay forma de cerrar la hoja.
═══════════════════════════════════════════════════════════════════════ */
.qb-velo {
position: fixed; inset: 0; background: rgba(11, 41, 71, .45);
z-index: 40; animation: qb-aparece .12s ease-out;
}
@keyframes qb-aparece { from { opacity: 0 } to { opacity: 1 } }
.qb-hoja {
position: fixed; z-index: 41; background: var(--qb-superficie);
display: flex; flex-direction: column;
top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
box-shadow: -4px 0 24px rgba(11, 41, 71, .22);
}
.qb-hoja__hd {
padding: 14px 16px; border-bottom: 1px solid var(--qb-gris);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.qb-hoja__hd h3 { font-size: 15.5px; color: var(--qb-azul); }
.qb-hoja__cuerpo { flex: 1; overflow-y: auto; padding: 16px; }
.qb-hoja__pie {
padding: 12px 16px; border-top: 1px solid var(--qb-gris);
display: flex; gap: 9px; justify-content: flex-end; background: var(--qb-fondo);
}
.qb-campo select {
width: 100%; padding: 11px 12px; border: 1px solid var(--qb-gris);
border-radius: 8px; font-size: 15px; font-family: inherit;
color: var(--qb-tx); background: var(--qb-superficie); min-height: 42px;
}
.qb-campo select:focus { outline: 2px solid var(--qb-verde); outline-offset: -1px; }
.qb-opcional { font-weight: 500; color: var(--qb-tx-tenue); font-size: 11px; }
.qb-ayuda { font-size: 12.5px; color: var(--qb-tx-suave); line-height: 1.45; margin: 0 0 14px; }
.qb-ayuda--ojo {
background: var(--qb-td-bg); border: 1px solid var(--qb-td-bd); color: var(--qb-td-tx);
padding: 9px 11px; border-radius: 8px; margin-top: 4px; margin-bottom: 0;
}
@media (max-width: 720px) {
.qb-hoja {
top: auto; left: 0; right: 0; bottom: 0; max-width: none;
max-height: 88vh; max-height: 88dvh;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 24px rgba(11, 41, 71, .22);
}
.qb-barra__acciones { margin-left: 0; width: 100%; }
.qb-barra__acciones .qb-btn { flex: 1; }
}
/* ══════════════════════════════════════════════════════════════════════════
NAVEGACION
═══════════════════════════════════════════════════════════════════════ */
.qb-nav {
background: var(--qb-superficie);
border-bottom: 1px solid var(--qb-gris);
display: flex; gap: 2px; padding: 0 10px;
position: sticky; top: 58px; z-index: 19;
overflow-x: auto;
}
.qb-nav__item {
display: flex; align-items: center; gap: 7px;
padding: 11px 13px; font-size: 13.5px; font-weight: 600;
color: var(--qb-tx-tenue); text-decoration: none;
border-bottom: 3px solid transparent;
white-space: nowrap; min-height: 44px;
}
.qb-nav__item:hover { color: var(--qb-azul); background: var(--qb-azul-suave); }
.qb-nav__item.active { color: var(--qb-azul); border-bottom-color: var(--qb-verde); }
/* ══════════════════════════════════════════════════════════════════════════
HORARIOS
═══════════════════════════════════════════════════════════════════════ */
.qb-prioridad { font-weight: 500; text-transform: none; letter-spacing: 0;
font-size: 11px; color: var(--qb-tx-tenue); font-style: italic; }
.qb-horario {
background: var(--qb-superficie); border: 1px solid var(--qb-gris);
border-radius: var(--qb-radio); padding: 12px 14px; margin-bottom: 8px;
box-shadow: var(--qb-sombra);
}
/* Un horario apagado se atenua pero sigue legible: hay que poder leer lo que
configuraba antes de decidir si prenderlo de nuevo. */
.qb-horario--apagado { opacity: .55; }
.qb-horario__enc { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.qb-horario__nombre { font-weight: 650; font-size: 14.5px; color: var(--qb-azul); }
.qb-horario__alcance { font-size: 12px; color: var(--qb-tx-tenue); margin-top: 1px; }
.qb-horario__acciones { display: flex; gap: 6px; flex-shrink: 0; }
.qb-horario__datos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
font-size: 12.5px; color: var(--qb-tx-suave); }
.qb-horario__datos b { font-weight: 650; color: var(--qb-tx-tenue); font-size: 10.5px;
text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.qb-horario__marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.qb-horario__marcas:empty { display: none; }
.qb-chip { display: inline-block; padding: 2px 8px; border-radius: 20px;
font-size: 10.5px; font-weight: 700; border: 1px solid; }
.qb-chip--apagado { background: var(--qb-crema); border-color: var(--qb-gris); color: var(--qb-tx-tenue); }
.qb-chip--duro { background: var(--qb-au-bg); border-color: var(--qb-au-bd); color: var(--qb-au-tx); }
.qb-chip--noche { background: var(--qb-sa-bg); border-color: var(--qb-sa-bd); color: var(--qb-sa-tx); margin-left: 6px; }
/* La sede principal, en el azul institucional. No usa ninguno de los colores de
estado (verde, ambar, rojo) a proposito: ser la principal no es un estado que
este bien o mal, es una propiedad de la empresa. Mezclarlo con la paleta de
estados haria leer "principal" como si fuera "todo en orden". */
.qb-chip--principal { background: var(--qb-azul-suave); border-color: rgba(11, 41, 71, .18); color: var(--qb-azul); font-weight: 600; }
.qb-conflicto { font-size: 12.5px; font-weight: 500; margin-top: 6px; line-height: 1.45; }
.qb-aviso--ojo { background: var(--qb-td-bg); border-color: var(--qb-td-bd); color: var(--qb-td-tx); text-align: left; }
/* ── Formulario de horario ─────────────────────────────────────────────── */
.qb-hoja--ancha { max-width: 520px; }
.qb-grupo { border: 1px solid var(--qb-gris); border-radius: var(--qb-radio);
padding: 13px 14px; margin-bottom: 14px; background: var(--qb-fondo); }
.qb-grupo__tit { font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--qb-tx-tenue); margin-bottom: 10px; }
.qb-fila-campos { display: flex; gap: 10px; }
.qb-fila-campos .qb-campo { flex: 1; }
/* El alcance se elige con tarjetas y no con un desplegable: cada opcion necesita
una linea que explique a quien le gana, y eso no entra en un . */
.qb-opciones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.qb-opcion {
text-align: left; border: 1px solid var(--qb-gris); background: var(--qb-superficie);
border-radius: 8px; padding: 9px 11px; cursor: pointer; font-family: inherit;
display: flex; flex-direction: column; gap: 2px; min-height: 44px;
}
.qb-opcion[aria-pressed="true"] { border-color: var(--qb-verde); background: var(--qb-celeste); }
.qb-opcion__tit { font-size: 13.5px; font-weight: 650; color: var(--qb-azul); }
.qb-opcion__sub { font-size: 11.5px; color: var(--qb-tx-tenue); line-height: 1.35; }
/* ── Selector de dias ──────────────────────────────────────────────────── */
.qb-dias { display: flex; gap: 5px; flex-wrap: wrap; }
.qb-dia {
width: 40px; height: 40px; border-radius: 8px;
border: 1px solid var(--qb-gris); background: var(--qb-superficie);
color: var(--qb-tx-suave); font-weight: 700; font-size: 13px;
cursor: pointer; font-family: inherit;
}
.qb-dia[aria-pressed="true"] { background: var(--qb-verde); border-color: var(--qb-verde); color: #fff; }
/* ── Interruptor ───────────────────────────────────────────────────────── */
.qb-campo--interruptor { display: flex; flex-direction: column; gap: 5px; }
.qb-interruptor {
width: 46px; height: 26px; border-radius: 20px; border: 1px solid var(--qb-gris);
background: var(--qb-gris); position: relative; cursor: pointer; padding: 0;
transition: background .14s; flex-shrink: 0;
}
.qb-interruptor[aria-pressed="true"] { background: var(--qb-verde); border-color: var(--qb-verde); }
.qb-interruptor__bola {
position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; transition: transform .14s;
}
.qb-interruptor[aria-pressed="true"] .qb-interruptor__bola { transform: translateX(20px); }
.qb-interruptor__texto { font-size: 11.5px; color: var(--qb-tx-tenue); }
/* ── Avanzado ──────────────────────────────────────────────────────────── */
.qb-avanzado { border: 1px solid var(--qb-gris); border-radius: var(--qb-radio);
padding: 0 14px; background: var(--qb-fondo); }
.qb-avanzado summary { padding: 12px 0; cursor: pointer; font-size: 12.5px;
font-weight: 650; color: var(--qb-tx-suave); }
.qb-avanzado[open] summary { border-bottom: 1px solid var(--qb-gris); margin-bottom: 13px; }
.qb-avanzado .qb-campo:last-child { margin-bottom: 13px; }
@media (max-width: 720px) {
.qb-hoja--ancha { max-width: none; }
.qb-horario__enc { flex-direction: column; }
.qb-horario__acciones { width: 100%; }
.qb-horario__acciones .qb-btn { flex: 1; }
.qb-fila-campos { flex-direction: column; gap: 0; }
.qb-dia { width: 38px; height: 38px; }
}
/* En una tabla angosta, el documento y la fecha de ingreso son los datos que
menos se miran: se esconden para que el nombre, el cargo y las acciones
entren sin que la tabla se desborde. Siguen estando -- basta girar la tablet
o abrir la ficha de la persona. */
@media (max-width: 760px) {
.qb-tabla .qb-col-opcional { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
LECTORA
La pantalla colgada en la pared. Se lee desde dos metros, nadie la toca y
el color ocupa todo: dice el resultado antes de que se lea una palabra.
═══════════════════════════════════════════════════════════════════════ */
.lec {
min-height: 100vh;
min-height: 100dvh;
display: flex; flex-direction: column;
color: #fff; position: relative; overflow: hidden;
transition: background-color .25s ease;
/* Nada de seleccionar texto ni menus contextuales: es un panel, no un
documento. Un usuario que deja el texto seleccionado azul arruina la
pantalla hasta que alguien la recarga. */
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lec--reposo { background: var(--qb-azul); }
.lec--neutro { background: #334155; }
.lec--ok { background: #0B7A5F; }
.lec--td { background: #A16207; }
.lec--au { background: #B91C1C; }
.lec--sa { background: #1D4ED8; }
.lec__enc { display: flex; justify-content: space-between; align-items: flex-start;
padding: 18px 26px; opacity: .82; flex-shrink: 0; }
.lec__punto { font-size: 13px; margin-top: 2px; }
.lec__reloj { text-align: right; line-height: 1.15; }
.lec__reloj b { display: block; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.lec__reloj span { font-size: 12px; }
.lec__centro { flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 10px 26px; gap: 6px; }
.lec__espera-icono { opacity: .5; margin-bottom: 14px; }
.lec__espera { font-size: 20px; opacity: .8; }
/* El titular y el nombre son lo unico que se lee desde lejos: por eso el salto
de tamano es tan grande respecto del resto. */
.lec__titular { font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.lec__nombre { font-size: 30px; font-weight: 650; margin: 6px 0 0; opacity: .96; }
.lec__cargo { font-size: 17px; opacity: .72; margin: 2px 0 0; }
.lec__sub { font-size: 18px; opacity: .78; margin: 6px 0 0; max-width: 620px; line-height: 1.4; }
.lec__ini { width: 96px; height: 96px; border-radius: 50%;
background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.4);
display: flex; align-items: center; justify-content: center;
font-size: 34px; font-weight: 700; margin-bottom: 10px; }
.lec__ini--incognito { font-size: 42px; opacity: .7; }
.lec__hora { margin-top: 18px; display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.16); padding: 10px 22px; border-radius: 40px; }
.lec__hora-etq { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; font-weight: 700; }
.lec__hora b { font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 700; }
.lec__desvio { font-size: 14px; font-weight: 700; background: rgba(0,0,0,.22);
padding: 3px 11px; border-radius: 20px; }
.lec__tira { display: flex; gap: 8px; padding: 12px 18px;
background: rgba(0,0,0,.2); flex-shrink: 0; overflow-x: auto; }
.lec__tira-item { display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.12); padding: 6px 12px;
border-radius: 30px; flex-shrink: 0; }
.lec__tira-ini { width: 24px; height: 24px; border-radius: 50%;
background: rgba(255,255,255,.22); display: flex;
align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 700; }
.lec__tira-nom { font-size: 13px; font-weight: 600; }
.lec__tira-hora { font-size: 12px; opacity: .72; font-variant-numeric: tabular-nums; }
/* El campo que recibe lo que teclea el lector.
Fuera de la vista pero NUNCA display:none ni visibility:hidden: un campo
oculto de esa forma no puede recibir el foco, y sin foco no llega ni una
sola tecla del R20D. */
.lec__captura {
position: absolute; top: 0; left: -9999px;
width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
}
/* La barra del modo demostración (/kiosco/demo). Discreta: lo que se enseña
es la pantalla, no los botones. */
.lec__demo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
justify-content: center; padding: 10px 14px;
background: rgba(0,0,0,.28); flex-shrink: 0; }
.lec__demo-etq { font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; opacity: .7; margin-right: 6px; }
.lec__demo-btn { font: inherit; font-size: 13px; font-weight: 600; color: #fff;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
padding: 6px 14px; border-radius: 30px; cursor: pointer; }
.lec__demo-btn:hover { background: rgba(255,255,255,.22); }
.lec__demo-btn--activo { background: #fff; color: var(--qb-azul); }
/* En una tablet en horizontal sobra ancho y falta alto: se achica lo vertical
para que el nombre no empuje la tira fuera de la pantalla. */
@media (max-height: 560px) {
.lec__titular { font-size: 40px; }
.lec__nombre { font-size: 24px; }
.lec__ini { width: 72px; height: 72px; font-size: 26px; }
.lec__enc { padding: 12px 22px; }
.lec__espera-icono svg { width: 84px; height: 84px; }
}
/* ── Reportes ──────────────────────────────────────────────────────────── */
.qb-atajos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.qb-acciones-grupo { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.qb-acciones-grupo .qb-btn { display: inline-flex; align-items: center; gap: 7px;
text-decoration: none; }
.qb-chip--tarde { background: var(--qb-td-bg); border-color: var(--qb-td-bd); color: var(--qb-td-tx); }
.qb-tabla .qb-chip { margin-left: 6px; }
/* El enlace de instalacion es una credencial: se muestra en monoespaciada y se
puede seleccionar aunque el resto de la interfaz no, porque hay que copiarlo. */
.qb-enlace { background: var(--qb-crema); border: 1px solid var(--qb-gris);
border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
overflow-x: auto; }
.qb-enlace code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 12px; color: var(--qb-azul); white-space: nowrap;
user-select: all; }
/* ── Login: "Mantener sesión iniciada" (30/09/2026) ───────────────────── */
.qb-recordar { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px;
font-size: 13px; color: #52667D; cursor: pointer; user-select: none; }
.qb-recordar input { width: 16px; height: 16px; accent-color: #0F9375; margin: 0; }