* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--verde: #2e7d4f;
--verde-oscuro: #1d5c38;
--crema: #f6f4ee;
--tinta: #26301f;
--gris: #5e655a;
--borde: #e2ded3;
--blanco: #ffffff;
--rojo: #c0392b;
--ambar: #c98a12;
--naranja: #d35400;
--teal: #16786c;
/* paleta premium */
--noir: #14140f;
--noir-2: #26261d;
--marfil: #faf9f6;
/* Color de la app. temas.js reescribe estas variables sobre cuando el
colaborador elige otro color. El grano (encabezado y fondo) es una capa aparte:
nunca se toca, solo cambia el degradado que lleva debajo. */
--oro: #b5924f;
--oro-claro: #d8bd86;
--oro-rgb: 181, 146, 79;
--bronce: #463c28;
--bronce-osc: #37301f;
--bronce-grad: linear-gradient(135deg, #4e4330 0%, #37301f 100%);
--head-a: #4e4331; /* encabezado */
--head-b: #3a3120;
--head-c: #2b2416;
--pag-a: #fdfbf6; /* fondo de la página (el papel) */
--pag-b: #f5eede;
--pag-c: #efe4cf;
/* sombras en capas para dar profundidad */
--sombra-sm: 0 1px 2px rgba(20, 20, 15, 0.04), 0 2px 8px rgba(20, 20, 15, 0.05);
--sombra-md: 0 2px 6px rgba(20, 20, 15, 0.05), 0 12px 28px rgba(20, 20, 15, 0.08);
--sombra-lg: 0 8px 20px rgba(20, 20, 15, 0.08), 0 24px 60px rgba(20, 20, 15, 0.12);
}
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
/* papel con grano: el grano es su propia capa, así que el color de abajo puede
cambiar con el tema del colaborador sin perder la textura */
background-image:
url("marca/grano.png"),
linear-gradient(180deg, var(--pag-a) 0%, var(--pag-b) 55%, var(--pag-c) 100%);
background-attachment: fixed, fixed;
background-repeat: repeat, no-repeat;
background-size: 180px 180px, cover;
background-blend-mode: overlay, normal;
color: var(--tinta);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.oculto { display: none !important; }
/* ---------- monograma reutilizable ---------- */
.marca-mono { width: 30px; height: 34px; flex-shrink: 0; }
.marca-mono polygon { fill: var(--marfil); }
/* ---------- encabezado ---------- */
header {
background-image:
url("marca/grano.png"),
linear-gradient(135deg, var(--head-a) 0%, var(--head-b) 55%, var(--head-c) 100%);
background-size: 150px 150px, cover;
background-repeat: repeat, no-repeat;
background-blend-mode: overlay, normal;
color: var(--marfil);
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
box-shadow: var(--sombra-md);
}
/* filete dorado inferior */
header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, var(--oro) 20%, var(--oro-claro) 50%, var(--oro) 80%, transparent);
opacity: 0.75;
}
header .marca { display: flex; align-items: center; gap: 11px; cursor: pointer; }
header .marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
header .marca-nombre {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 3px;
}
header .marca-etq {
font-size: 0.6rem;
letter-spacing: 2px;
color: var(--oro-claro);
border: 1px solid rgba(216, 189, 134, 0.4);
border-radius: 4px;
padding: 1px 5px;
margin-left: 4px;
vertical-align: middle;
}
header .quien { font-size: 0.82rem; opacity: 0.7; letter-spacing: 0.3px; }
header a, header button.enlace {
color: var(--marfil);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9px;
padding: 7px 13px;
font-size: 0.82rem;
letter-spacing: 0.3px;
text-decoration: none;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
header a:hover, header button.enlace:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(216, 189, 134, 0.5);
}
/* En celular angosto con cuenta admin (🔔 + Mi panel + Admin + Salir) el encabezado no cabía
y desbordaba la página entera: eso corría los modales fuera de la pantalla. Que se encoja,
y si aun así no cabe, que baje a una segunda línea en vez de desbordar. */
header { flex-wrap: wrap; }
.header-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 460px) {
header { padding: 12px 10px; gap: 6px; }
header a, header button.enlace { padding: 6px 7px; font-size: 0.72rem; letter-spacing: 0; }
header .marca-nombre { font-size: 1.05rem; letter-spacing: 1.5px; }
header .quien { font-size: 0.72rem; }
.header-acciones { gap: 5px; }
}
main { max-width: 640px; margin: 0 auto; padding: 18px 14px 60px; }
/* ---------- pestañas ---------- */
.pestanas {
display: flex;
flex-wrap: wrap; /* con 5 pestañas (panel) baja a 2 filas en móvil en vez de desbordar */
gap: 8px;
margin-bottom: 18px;
}
.pestanas button {
flex: 1 1 auto;
min-width: 88px;
padding: 11px 10px;
border: 1px solid var(--borde);
background: rgba(255, 255, 255, 0.7);
border-radius: 11px;
font-size: 0.9rem;
font-weight: 600;
color: var(--gris);
cursor: pointer;
white-space: nowrap;
transition: all 0.18s ease;
box-shadow: var(--sombra-sm);
}
.pestanas button.activa {
background: var(--bronce-grad);
border-color: var(--bronce-osc);
color: var(--marfil);
box-shadow: var(--sombra-md);
}
/* ---------- tarjetas ---------- */
.tarjeta {
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--sombra-md);
}
.tarjeta h2 {
font-size: 0.82rem;
margin-bottom: 14px;
color: var(--bronce);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
}
.tarjeta h2::before {
content: "";
display: inline-block;
width: 14px;
height: 2px;
background: var(--oro);
vertical-align: middle;
margin-right: 8px;
margin-bottom: 3px;
}
/* ---------- login ---------- */
.login {
position: fixed;
inset: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
padding: 40px 20px;
text-align: center;
/* grano premium sobre un degradado blanco → dorado (champán con más oro) */
background-image:
url("marca/grano.png"),
linear-gradient(180deg, #ffffff 0%, #f9f2df 30%, #eedcb4 58%, #ddc389 82%, #cfb277 100%);
background-repeat: repeat, no-repeat;
background-size: 180px 180px, cover;
background-blend-mode: overlay, normal;
}
.login-marca {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
animation: surgir 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* monograma en tono bronce con brillo (mismo tono que el logotipo) */
.logo-wrap {
position: relative;
z-index: 1;
width: 126px;
height: 150px;
}
.logo-mono {
width: 100%;
height: 100%;
display: block;
}
/* destello que recorre el logo cada pocos segundos, recortado a su forma */
.logo-glint {
position: absolute;
inset: 0;
pointer-events: none;
-webkit-mask: url("logo.svg") center / contain no-repeat;
mask: url("logo.svg") center / contain no-repeat;
background: linear-gradient(105deg, transparent 43%, rgba(255, 245, 218, 0.7) 50%, transparent 57%);
background-repeat: no-repeat;
background-size: 250% 100%;
animation: glint 4s ease-in-out infinite;
}
@keyframes glint {
0% { background-position: 170% 0; }
42%, 100% { background-position: -70% 0; }
}
.logo-wordmark {
position: relative;
z-index: 1;
margin-top: 20px;
width: 250px;
max-width: 80vw;
height: auto;
}
.login-pie {
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #463c28;
}
.tarjeta-login {
width: 100%;
max-width: 360px;
text-align: left;
border-radius: 18px;
padding: 24px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: var(--sombra-lg);
animation: surgir 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
@keyframes surgir {
from { opacity: 0; transform: translateY(16px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* acceso por correo bajo el login normal: discreto, no compite con el PIN */
.login-recuperar {
display: block;
width: 100%;
margin-top: 14px;
padding: 6px;
background: none;
border: none;
color: var(--gris);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.login-recuperar:hover { color: var(--bronce); }
.login-correo-bloque {
margin-top: 12px;
padding-top: 16px;
border-top: 1px solid var(--borde);
animation: surgir 0.4s ease both;
}
/* mensaje neutro del enlace (verde suave); en rojo si falta el correo */
.login-correo-msg {
background: #e2f3e8;
color: var(--verde-oscuro);
border-radius: 8px;
padding: 10px 12px;
margin-top: 10px;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.4;
}
.login-correo-msg.login-correo-error { background: #fdecea; color: var(--rojo); }
/* pantalla de aterrizaje del enlace mágico (confirmar antes de canjear) */
.enlace-titulo {
margin: 0 0 6px;
color: var(--bronce);
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.3px;
}
.enlace-sub {
margin: 0 0 16px;
color: var(--gris);
font-size: 0.92rem;
line-height: 1.45;
}
/* en esta tarjeta el botón "Entrar" no lleva el margen extra del enlace de abajo */
#pantalla-enlace .principal { margin-top: 4px; }
select, textarea, input[type="password"], input[type="text"], input[type="date"],
input[type="datetime-local"], input[type="number"], input[type="time"],
input[type="email"], input[type="tel"], input[type="url"], input[type="month"],
input[type="search"] {
width: 100%;
padding: 12px 13px;
font-size: 1rem;
border: 1px solid var(--borde);
border-radius: 11px;
background: var(--blanco);
margin-bottom: 12px;
color: var(--tinta);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
textarea { font-family: inherit; resize: vertical; line-height: 1.5; }
select:focus, input:focus, textarea:focus {
outline: none;
border-color: var(--oro);
box-shadow: 0 0 0 3px rgba(181, 146, 79, 0.15);
}
button.principal {
width: 100%;
padding: 14px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--marfil);
/* exactamente el color del logo (#463c28), sin grano, plano */
background: #463c28;
border: none;
border-radius: 11px;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--sombra-md);
transition: transform 0.12s ease, box-shadow 0.18s ease;
}
/* brillo dorado que cruza al pasar el cursor */
button.principal::before {
content: "";
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(216, 189, 134, 0.35), transparent);
transition: left 0.6s ease;
}
button.principal:hover::before { left: 130%; }
button.principal:hover { box-shadow: var(--sombra-lg); }
button.principal:active { transform: translateY(1px); }
.error {
background: #fdecea;
color: var(--rojo);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
font-size: 0.9rem;
}
/* ---------- marcar ---------- */
.estado-linea { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.reloj {
font-size: 3rem;
font-weight: 300;
letter-spacing: 2px;
font-variant-numeric: tabular-nums;
color: var(--bronce);
}
/* OJO: sin text-transform aquí — esta clase se reutiliza como nota gris en toda la app
y capitalize ponía Cada Palabra En Mayúscula en frases enteras. La fecha del reloj
(#fecha-hoy) capitaliza solo su primera letra. */
.fecha-hoy { color: var(--gris); font-size: 0.9rem; margin-bottom: 16px; }
#fecha-hoy::first-letter { text-transform: uppercase; }
/* contador de tiempo trabajado en vivo */
.trabajado-vivo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 13px 15px;
margin-bottom: 16px;
border-radius: 13px;
border: 1px solid var(--borde);
background: linear-gradient(135deg, #f2f6f1, #eaf0e8);
transition: background 0.4s ease;
}
.trabajado-vivo.tv-pausa { background: linear-gradient(135deg, #fbf3df, #f6ebcf); }
.trabajado-vivo.tv-almuerzo { background: linear-gradient(135deg, #fceadd, #f7ddc9); }
.tv-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); font-weight: 700; }
.tv-tiempo {
font-size: 1.45rem;
font-weight: 700;
color: var(--verde-oscuro);
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
}
.tv-pausa .tv-tiempo { color: #a9720c; }
.tv-almuerzo .tv-tiempo { color: #a83f00; }
/* resumen de jornada al terminar */
.resumen-jornada .rj-linea {
display: flex;
justify-content: space-between;
padding: 10px 2px;
border-bottom: 1px solid var(--borde);
font-size: 0.95rem;
}
.resumen-jornada .rj-linea:last-child { border-bottom: none; }
.resumen-jornada .rj-linea span:first-child { color: var(--gris); }
.resumen-jornada .rj-linea span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.resumen-jornada .rj-destacado span:last-child { color: var(--verde-oscuro); font-size: 1.15rem; }
/* ---------- menú inicial (tarjetas de secciones) ---------- */
.menu-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 2px;
}
.tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 18px 16px;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: 16px;
box-shadow: var(--sombra-md);
cursor: pointer;
text-align: left;
position: relative;
overflow: hidden;
transition: transform 0.12s ease, box-shadow 0.18s ease;
}
/* filete dorado superior */
.tile::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--oro), var(--oro-claro));
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.tile:active { transform: translateY(0); }
.tile-icon { font-size: 1.75rem; margin-bottom: 4px; }
.tile-nombre { font-weight: 700; color: var(--bronce); font-size: 1.02rem; letter-spacing: 0.3px; }
.tile-sub { font-size: 0.76rem; color: var(--gris); }
.tile-pronto { opacity: 0.62; cursor: default; }
.tile-pronto::before { background: var(--borde); }
.tile-pronto:hover { transform: none; box-shadow: var(--sombra-md); }
.tile-pronto .tile-sub { color: var(--oro); font-weight: 700; letter-spacing: 0.5px; }
.volver-inicio {
background: none;
border: none;
color: var(--bronce);
font-weight: 700;
font-size: 0.95rem;
padding: 2px 2px 14px;
cursor: pointer;
letter-spacing: 0.3px;
}
/* ---------- calendario ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-titulo { margin: 0; font-size: 1.05rem; color: var(--bronce); font-weight: 800; letter-spacing: 0.3px; }
.cal-titulo::before { content: none; }
.cal-nav {
width: 38px; height: 38px; border-radius: 10px;
border: 1px solid var(--borde); background: var(--blanco);
color: var(--bronce); font-size: 1.4rem; font-weight: 800; line-height: 1;
cursor: pointer; display: grid; place-items: center;
}
.cal-nav:active { transform: scale(0.95); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dia {
aspect-ratio: 1 / 1;
border: 1px solid var(--borde);
background: var(--blanco);
border-radius: 10px;
padding: 4px;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 3px; cursor: pointer;
font: inherit; color: var(--tinta);
position: relative;
transition: background 0.12s ease;
}
.cal-dia:active { background: var(--crema); }
.cal-dia .dnum { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-dia.otro-mes { opacity: 0.4; }
.cal-dia.festivo { background: #fbf1df; border-color: #ecd9b4; }
.cal-dia.festivo .dnum { color: var(--naranja); font-weight: 800; }
.cal-dia.hoy { border-color: var(--bronce); border-width: 2px; }
.cal-dia.hoy .dnum { color: var(--bronce); font-weight: 800; }
.cal-dia .dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.cal-dia .dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-leyenda { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.cal-leyenda .ley { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--gris); font-weight: 600; }
.cal-leyenda i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.pt-hoy { border: 2px solid var(--bronce); }
.pt-festivo { background: var(--naranja); }
.pt-entrega { background: var(--gold-soft, var(--oro)); }
/* selector de color */
.proy-colores { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: var(--sombra-sm); }
.swatch.sel { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--bronce); }
/* lista de entregas */
.lista-entregas { list-style: none; }
.lista-entregas li {
display: flex; align-items: flex-start; gap: 11px;
padding: 11px 2px; border-bottom: 1px solid var(--borde);
}
.lista-entregas li:last-child { border-bottom: none; }
.ent-color { width: 6px; align-self: stretch; border-radius: 4px; flex: none; min-height: 34px; }
.ent-info { flex: 1; min-width: 0; }
.ent-nombre { font-weight: 700; display: block; }
/* capitalize solo en la fecha (.ent-fecha): las notas del usuario van en esta misma línea */
.ent-meta { display: block; color: var(--gris); font-size: 0.8rem; margin-top: 2px; }
.ent-fecha { text-transform: capitalize; }
.lista-entregas .borrar { background: none; border: none; color: var(--rojo); font-size: 1rem; cursor: pointer; padding: 2px 4px; flex: none; }
/* la entrega ahora se toca para ver el detalle */
.ent-item { cursor: pointer; }
.ent-item:active { background: var(--crema); }
.ent-flecha { color: var(--gris); font-size: 1.2rem; flex: none; align-self: center; }
.ent-camara { flex: none; align-self: center; font-size: 0.9rem; }
/* el cliente: el fijo se marca; el ocasional va en gris, sin promesa de ficha */
.ent-cliente {
display: inline-block; margin-top: 4px; font-size: 0.72rem; font-weight: 700;
padding: 2px 8px; border-radius: 999px; background: var(--crema); color: var(--gris);
border: 1px solid var(--borde);
}
.ent-cliente.fijo { background: var(--oro-claro); color: var(--bronce-osc); border-color: var(--oro); }
/* filtro por cliente, encima del calendario */
.cal-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--blanco); border: 1px solid var(--borde); border-radius: 999px;
padding: 6px 11px; font-size: 0.78rem; font-weight: 700; color: var(--gris); cursor: pointer;
}
.cal-chip i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.cal-chip.sel { background: var(--bronce-grad); color: var(--marfil); border-color: var(--bronce-osc); }
/* foto de referencia de la entrega */
.ent-foto-caja { margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: var(--crema); }
.ent-foto-caja img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.ent-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ent-acciones .secundario { width: 100%; padding: 10px 6px; font-size: 0.8rem; }
/* clientes fijos */
.lista-clientes { list-style: none; }
.cli-item {
display: flex; align-items: center; gap: 11px;
padding: 11px 2px; border-bottom: 1px solid var(--borde);
}
.cli-item:last-child { border-bottom: none; }
.cli-color { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: var(--sombra-sm); }
.cli-info { flex: 1; min-width: 0; }
.cli-info strong { display: block; font-size: 0.95rem; color: var(--tinta); }
.cli-info small { display: block; color: var(--gris); font-size: 0.78rem; margin-top: 1px; }
.cli-btn { flex: none; padding: 7px 14px; font-size: 0.8rem; }
.prox { font-size: 0.68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; letter-spacing: 0.3px; vertical-align: middle; text-transform: none; }
.prox.vencido { background: #fdecea; color: var(--rojo); }
.prox.hoy-p { background: #e2f3e8; color: var(--verde-oscuro); }
.prox.semana { background: #fff3d6; color: #8a6410; }
.dia-festivo { background: #fbf1df; border: 1px solid #ecd9b4; color: var(--naranja); border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: 0.9rem; }
/* ---------- mi perfil ---------- */
.perfil-ok {
background: #e2f3e8;
color: var(--verde-oscuro);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
font-size: 0.9rem;
font-weight: 700;
}
.lista-horarios { list-style: none; }
.lista-horarios li {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 2px; border-bottom: 1px solid var(--borde);
}
.lista-horarios li:last-child { border-bottom: none; }
.hm-mes { font-weight: 700; text-transform: capitalize; }
.hm-datos { text-align: right; }
.hm-horas { display: block; font-weight: 800; color: var(--bronce); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.hm-sub { display: block; font-size: 0.76rem; color: var(--gris); }
/* nómina y saldo */
.saldo-grande { font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; margin-bottom: 4px; }
.saldo-grande.positivo { color: var(--verde-oscuro); }
.saldo-grande.negativo { color: var(--rojo); }
.lista-nomina { list-style: none; }
.nom-mes { padding: 15px 2px; border-bottom: 1px solid var(--borde); }
.nom-mes:last-child { border-bottom: none; }
.nom-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.nom-titulo { font-weight: 800; color: var(--bronce); }
.nom-saldo { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.nom-saldo.positivo { color: var(--verde-oscuro); }
.nom-saldo.negativo { color: var(--rojo); }
.nom-linea { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; padding: 3px 0; }
.nom-linea > span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.nom-ant { color: var(--gris); font-size: 0.83rem; padding-left: 12px; }
.nom-arr { color: var(--gris); border-top: 1px dashed var(--borde); margin-top: 7px; padding-top: 7px; font-size: 0.83rem; }
.saldo-actual-admin { font-size: 1.35rem; font-weight: 800; margin: 14px 0; font-variant-numeric: tabular-nums; }
.saldo-actual-admin.positivo { color: var(--verde-oscuro); }
.saldo-actual-admin.negativo { color: var(--rojo); }
/* nota bajo el saldo — texto normal (sin capitalizar cada palabra) */
.saldo-nota { color: var(--gris); font-size: 0.9rem; margin: 0; }
/* tarjeta de mes clicable */
.nom-mes-link { cursor: pointer; transition: background 0.15s; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.nom-mes-link:hover { background: rgba(70, 60, 40, 0.05); }
.nom-ver { color: var(--gold); font-size: 0.78rem; font-weight: 700; margin-top: 6px; }
/* detalle de mes (modal) */
.mes-resumen { margin-bottom: 12px; }
.tabla-mes { font-size: 0.86rem; }
.tabla-mes td, .tabla-mes th { padding: 6px 8px; }
.tabla-mes .dia-incons td { color: var(--rojo); }
.mes-vacio { text-align: center; color: var(--gris); }
.mes-ant { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.mes-ant:last-child { border-bottom: none; }
.mes-ant-info { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; }
.mes-ant-monto { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.mes-ant-monto.pos { color: var(--verde-oscuro); }
.mes-ant em { color: var(--gold); font-style: normal; font-weight: 700; }
.ver-foto { background: none; border: none; color: var(--gold); font-weight: 700; font-size: 0.8rem; cursor: pointer; padding: 4px 0 0; }
.foto-comprobante { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; background: #f4efe5; }
/* fila de mes clicable en la tabla del admin */
.fila-mes { cursor: pointer; }
.fila-mes:hover { background: rgba(70, 60, 40, 0.05); }
.ver-mes { color: var(--gold); font-size: 0.72rem; font-weight: 700; }
.ver-foto-a { background: none; border: none; color: var(--gold); font-weight: 700; cursor: pointer; font-size: 0.82rem; flex: none; white-space: nowrap; }
/* documentación / contabilidad */
.lista-docs { list-style: none; }
.doc-item { padding: 12px 2px; border-bottom: 1px solid var(--borde); }
.doc-item:last-child { border-bottom: none; }
.doc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.doc-top-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.doc-nombre { font-weight: 700; color: var(--bronce); overflow: hidden; text-overflow: ellipsis; }
.doc-handle { cursor: grab; color: var(--gris); font-size: 1.15rem; line-height: 1; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.doc-handle:active { cursor: grabbing; }
.doc-item.sortable-chosen { background: #f6f1e6; border-radius: 8px; }
.doc-item.sortable-ghost { opacity: 0.4; }
.doc-monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-meta { color: var(--gris); font-size: 0.82rem; margin-top: 2px; }
.doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-acciones button { background: none; border: 1px solid var(--borde); border-radius: 8px; padding: 5px 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--bronce); }
.doc-acciones button.link { border: none; padding: 5px 2px; color: var(--gold); }
.doc-acciones button.ver-btn { background: var(--bronce); color: #fff; border-color: var(--bronce); padding: 7px 16px; }
.doc-acciones button.compartir { border-color: var(--bronce); }
.doc-acciones button.peligro { color: var(--rojo); border-color: var(--rojo); }
.badge-vig { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.2px; white-space: nowrap; }
.vig-ok { background: #e3efe4; color: var(--verde-oscuro); }
.vig-pronto { background: #fbf0d5; color: #8a6d1e; }
.vig-vencido { background: #f7dcdc; color: var(--rojo); }
/* visor de archivos a pantalla completa (PDF renderizado / imagen) */
.visor-full { position: fixed; inset: 0; z-index: 2000; background: #2c2a26; display: flex; flex-direction: column; }
.visor-full .visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bronce); flex: none; }
.visor-titulo { font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-btns { display: flex; gap: 8px; flex: none; }
.visor-btns button { padding: 8px 14px; font-size: 0.9rem; font-weight: 700; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.visor-btns button:active { background: rgba(255, 255, 255, 0.32); }
.visor-cont { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px; text-align: center; }
.visor-cont img { max-width: 100%; height: auto; display: inline-block; border-radius: 6px; }
.pdf-pagina { position: relative; margin: 0 auto 10px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.pdf-pagina canvas { display: block; width: 100%; height: 100%; }
/* Capa de texto transparente encima del lienzo: permite seleccionar y copiar. */
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; text-size-adjust: none; -webkit-text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; opacity: 1; }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(120, 90, 40, 0.4); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer .endOfContent.active { top: 0; }
.visor-cargando { color: #eee; padding: 40px 20px; }
.badge-estado { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.est-pendiente { background: #fbf0d5; color: #8a6d1e; }
.est-pagado { background: #e3efe4; color: var(--verde-oscuro); }
/* cuentas y datos para copiar */
.lista-datos { list-style: none; }
.dato-item { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.dato-item:last-child { border-bottom: none; }
.dato-titulo { font-weight: 800; color: var(--bronce); margin-bottom: 6px; }
.dato-contenido { white-space: pre-wrap; word-break: break-word; background: #f6f1e6; border-radius: 8px; padding: 10px 12px; font-size: 0.92rem; line-height: 1.5; }
.dato-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dato-acciones button { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; color: var(--bronce); background: none; }
.dato-acciones button.copiar { background: var(--bronce); color: #fff; border-color: var(--bronce); padding: 8px 18px; }
.dato-acciones button.abrir { background: var(--bronce); color: #fff; border-color: var(--bronce); padding: 8px 18px; text-decoration: none; display: inline-block; }
.dato-acciones button.peligro { color: var(--rojo); border-color: var(--rojo); }
.link-url { color: var(--gris); font-size: 0.85rem; margin-bottom: 6px; word-break: break-all; }
/* ---------- permisos (modal admin) ---------- */
.permiso-op {
display: flex; gap: 11px; align-items: flex-start;
padding: 12px 2px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.permiso-op:last-of-type { border-bottom: none; }
.permiso-op input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--bronce); flex: none; }
.permiso-op strong { display: block; color: var(--tinta); }
.permiso-op small { display: block; color: var(--gris); font-size: 0.8rem; margin-top: 2px; }
.insignia {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--blanco);
box-shadow: var(--sombra-sm);
}
.insignia::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.9;
box-shadow: 0 0 8px currentColor;
}
.insignia.fuera { background: linear-gradient(135deg, #8a9182, var(--gris)); }
.insignia.trabajando { background: linear-gradient(135deg, #37946a, var(--verde)); }
.insignia.pausa { background: linear-gradient(135deg, #d99b28, var(--ambar)); }
.insignia.almuerzo { background: linear-gradient(135deg, #e0691a, var(--naranja)); }
/* ---------- equipo (chip + modal) ---------- */
.estado-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chip-equipo {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(70, 60, 40, 0.08);
border: 1px solid var(--borde);
border-radius: 999px;
padding: 5px 12px;
font-size: 0.8rem;
font-weight: 700;
color: var(--bronce);
cursor: pointer;
white-space: nowrap;
transition: background 0.16s ease;
}
.chip-equipo:hover { background: rgba(70, 60, 40, 0.16); }
.chip-equipo:active { transform: scale(0.97); }
/* campanita de notificaciones */
.campana { position: relative; font-size: 0.95rem; padding: 7px 11px; }
.notif-badge {
position: absolute; top: -6px; right: -6px;
min-width: 18px; height: 18px; padding: 0 4px;
background: #c0392b; color: #fff; border-radius: 999px;
font-size: 0.66rem; font-weight: 800; line-height: 18px; text-align: center;
border: 2px solid var(--bronce); box-sizing: border-box;
}
.lista-notif { list-style: none; }
.lista-notif li {
display: flex; gap: 10px; align-items: flex-start;
padding: 11px 6px; border-bottom: 1px solid var(--borde); font-size: 0.92rem;
}
.lista-notif li:last-child { border-bottom: none; }
.lista-notif li.no-leida { background: rgba(181, 146, 79, 0.12); border-radius: 8px; }
.noti-icono { font-size: 1.1rem; flex: none; line-height: 1.35; }
.noti-cuerpo { display: flex; flex-direction: column; gap: 2px; }
.noti-texto { line-height: 1.35; }
.noti-hora { color: var(--gris); font-size: 0.78rem; }
.modal-equipo {
text-align: left;
max-width: 420px;
max-height: 88vh;
overflow-y: auto;
}
.titulo-modal { color: var(--bronce); margin-bottom: 8px; font-size: 1.05rem; }
.lista-equipo, .lista-registros { list-style: none; }
.lista-equipo li, .lista-registros li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 9px 2px;
border-bottom: 1px solid var(--borde);
font-size: 0.94rem;
}
.lista-equipo li:last-child, .lista-registros li:last-child { border-bottom: none; }
.lista-equipo .eq-nombre, .lista-registros .eq-nombre { font-weight: 600; }
.lista-registros .eq-tipo { color: var(--gris); font-weight: 400; }
.lista-registros .hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bronce); }
.cerrar-modal {
width: 100%;
margin-top: 16px;
padding: 12px;
border-radius: 10px;
border: none;
background: var(--bronce);
color: var(--marfil);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
}
.botones-marca { display: grid; grid-template-columns: 1fr; gap: 12px; }
.botones-marca button {
padding: 20px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 1.5px;
border: none;
border-radius: 15px;
color: var(--blanco);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--sombra-md);
transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.12s ease;
}
.botones-marca button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%);
pointer-events: none;
}
.botones-marca button:hover { transform: translateY(-1px); box-shadow: var(--sombra-lg); }
.botones-marca button:active { transform: translateY(1px); filter: brightness(0.92); }
.b-entrada { background: linear-gradient(135deg, #3a9268 0%, var(--verde-oscuro) 100%); }
.b-pausa { background: linear-gradient(135deg, #d99b28 0%, #a9720c 100%); }
.b-despausa { background: linear-gradient(135deg, #1e8c7e 0%, #0f5d54 100%); }
.b-almuerzo { background: linear-gradient(135deg, #e0691a 0%, #a83f00 100%); }
.b-fin_almuerzo { background: linear-gradient(135deg, #1e8c7e 0%, #0f5d54 100%); }
.b-salida { background: linear-gradient(135deg, #cf4436 0%, #932619 100%); }
.lista-marcas { list-style: none; }
.lista-marcas li {
display: flex;
justify-content: space-between;
padding: 9px 2px;
border-bottom: 1px solid var(--borde);
font-size: 0.95rem;
}
.lista-marcas li:last-child { border-bottom: none; }
.lista-marcas .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.nota-editada { color: var(--ambar); font-size: 0.8rem; }
/* ---------- compras ---------- */
.form-compra { display: flex; gap: 8px; margin-bottom: 6px; }
.form-compra input { flex: 1; margin-bottom: 0; }
.form-compra button {
padding: 0 18px;
font-size: 1.3rem;
font-weight: 800;
color: var(--blanco);
background: var(--verde);
border: none;
border-radius: 10px;
cursor: pointer;
}
.lista-compras { list-style: none; }
.lista-compras li {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 2px;
border-bottom: 1px solid var(--borde);
}
.lista-compras li:last-child { border-bottom: none; }
.lista-compras input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--verde); flex-shrink: 0; }
.lista-compras .texto { flex: 1; }
.lista-compras .meta { display: block; color: var(--gris); font-size: 0.78rem; margin-top: 2px; }
.lista-compras li.hecho .texto { text-decoration: line-through; color: var(--gris); }
.compra-prov {
display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 700;
padding: 1px 8px; border-radius: 999px; background: var(--oro-claro); color: var(--bronce-osc);
vertical-align: middle;
}
.lista-compras li.hecho .compra-prov { opacity: 0.6; }
.lista-compras .borrar {
background: none; border: none; color: var(--rojo); font-size: 1.1rem; cursor: pointer; padding: 4px;
}
.subtitulo { color: var(--gris); font-size: 0.85rem; font-weight: 700; margin: 16px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
/* ---------- tablas admin ---------- */
.envoltura-tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { color: var(--gris); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.acciones button {
background: none;
border: 1px solid var(--borde);
border-radius: 7px;
padding: 4px 9px;
font-size: 0.8rem;
cursor: pointer;
margin-right: 4px;
color: var(--tinta);
}
.acciones button.peligro { color: var(--rojo); border-color: #ecc; }
.fila-controles { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.fila-controles label { font-size: 0.8rem; color: var(--gris); display: block; margin-bottom: 4px; }
.fila-controles > div { flex: 1; min-width: 130px; }
.fila-controles input, .fila-controles select { margin-bottom: 0; }
.fila-controles button { white-space: nowrap; }
button.secundario {
padding: 12px 18px;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.5px;
background: var(--blanco);
color: var(--bronce);
border: 1.5px solid var(--bronce);
border-radius: 11px;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease;
}
button.secundario:hover { background: var(--bronce); color: var(--marfil); }
.aviso {
background: #fff8e6;
border: 1px solid #eadfa9;
color: #7a621a;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.88rem;
margin-bottom: 16px;
}
/* aviso de bienvenida tras entrar por enlace mágico, con la recuperación de PIN dentro */
.aviso-enlace { position: relative; padding: 14px 16px; }
.be-x {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: #a2884a;
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 4px;
}
.be-x:hover { color: var(--bronce); }
.be-texto { font-weight: 700; padding-right: 20px; }
.be-reset-link {
display: inline-block;
margin-top: 8px;
padding: 2px 0;
background: none;
border: none;
color: var(--bronce);
font-size: 0.86rem;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.be-reset-bloque {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid #eadfa9;
animation: surgir 0.35s ease both;
}
/* ---------- reportes de corrección ---------- */
button.mini {
background: none;
border: 1px solid var(--borde);
border-radius: 7px;
padding: 3px 8px;
font-size: 0.75rem;
color: var(--gris);
cursor: pointer;
margin-left: 8px;
}
button.mini:active { border-color: var(--verde); color: var(--verde); }
.chip {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.chip-pendiente { background: #fff3d6; color: #8a6410; }
.chip-aprobado { background: #e2f3e8; color: var(--verde-oscuro); }
.chip-rechazado { background: #fdecea; color: var(--rojo); }
.badge-num {
display: inline-block;
background: var(--rojo);
color: var(--blanco);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
padding: 1px 7px;
margin-left: 6px;
vertical-align: middle;
}
.lista-reportes-admin { list-style: none; }
.lista-reportes-admin .reporte-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 2px;
border-bottom: 1px solid var(--borde);
font-size: 0.92rem;
}
.lista-reportes-admin .reporte-item:last-child { border-bottom: none; }
.reporte-item .motivo { color: var(--gris); font-style: italic; margin-top: 3px; font-size: 0.85rem; }
.reporte-item .acciones { display: flex; flex-direction: column; gap: 6px; }
.reporte-item .acciones button { margin: 0; }
.reporte-item .acciones .aprobar { color: var(--verde-oscuro); border-color: #bcd9c6; }
.meta-reporte { display: block; color: var(--gris); font-size: 0.8rem; margin-top: 2px; }
/* ---------- modal ---------- */
.velo {
position: fixed; inset: 0;
background: rgba(20, 30, 20, 0.45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
z-index: 50;
}
.modal {
background: var(--blanco);
border-radius: 16px;
padding: 22px;
width: 100%;
max-width: 360px;
text-align: center;
/* si el contenido crece (p. ej. la galería de 16 colores), que se pueda desplazar:
el velo es fixed y lo que se desborde de él no se alcanza ni con scroll */
max-height: 90vh;
overflow-y: auto;
}
.modal p { margin-bottom: 18px; font-size: 1.05rem; }
.modal .botones { display: flex; gap: 10px; }
.modal .botones button { flex: 1; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; }
.modal .botones button:disabled { opacity: 0.55; cursor: wait; }
.modal .confirmar { background: var(--verde); color: var(--blanco); }
.modal .cancelar { background: #eceae2; color: var(--tinta); }
@media (min-width: 560px) {
.botones-marca { grid-template-columns: 1fr 1fr; }
.botones-marca button.solo { grid-column: 1 / -1; }
}
/* resultado del alta masiva */
.lote-resultado { margin-top: 14px; }
.lote-aviso {
background: #fff8e6;
border: 1px solid #eadfa9;
color: #7a621a;
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
margin-bottom: 12px;
}
.lote-lista { list-style: none; }
.lote-lista li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 2px;
border-bottom: 1px solid var(--borde);
font-size: 0.95rem;
}
.lote-lista li:last-child { border-bottom: none; }
.lote-lista .lote-pin {
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: 2px;
font-size: 1.1rem;
color: var(--verde-oscuro);
}
.lote-lista .lote-omitido { color: var(--gris); font-size: 0.82rem; font-style: italic; }
/* respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ============================== Juegos — Sudoku ============================= */
/* ---- TEMA del tablero y su menú ----
Aquí viven SOLO los valores de la marca (el tema por defecto). Los demás colores
los calcula temas.js y los escribe como variables inline sobre #vista-juegos, de
donde los heredan tanto el menú como el tablero. Agregar un color = una línea allá. */
#vista-juegos {
--sk-rgb: var(--oro-rgb); /* acento: tintes de la guía y del mismo número */
--sk-sel: var(--oro-claro); /* celda tocada */
--sk-fondo: #ffffff; /* fondo del tablero */
--sk-linea: #e7e2d5; /* líneas finas */
--sk-marco: var(--bronce-osc); /* marco y líneas de caja */
--sk-dado: #26301f; /* números que ya venían */
--sk-user: #1d5c38; /* tus números */
--sk-pista: #16786c; /* números puestos por una pista */
--sk-nota: #5e655a; /* anotaciones a lápiz */
--sk-error: #c0392b;
--sk-tecla: var(--bronce); /* teclado */
--sk-tecla-bg: #ffffff;
--sk-tecla-borde: #e2ded3;
--sk-mesa: transparent; /* la "mesa" sobre la que se apoya el tablero */
--sk-texto: var(--gris); /* textos de la barra superior y el récord */
--sk-acento: var(--bronce); /* dificultad y flecha de volver */
--sk-btn-bg: var(--blanco); /* iconos, acciones y pie */
--sk-btn-txt: var(--gris);
--sk-btn-borde: var(--borde);
--sk-activa-bg: var(--bronce); /* botón de notas encendido */
--sk-activa-txt: var(--marfil);
--sk-vida: #e0392b; /* corazón lleno */
--sk-vida-ida: #d8d2c4; /* corazón gastado: debe verse MENOS que el lleno */
/* menú del Sudoku */
--sk-hero-a: var(--head-a);
--sk-hero-b: var(--head-c);
--sk-hero-oro: var(--oro-claro);
--sk-hero-sub: #cfc7b5;
--sk-card-bg: var(--blanco);
--sk-card-borde: var(--borde);
--sk-card-txt: var(--bronce);
}
#sudoku-host { background: var(--sk-mesa); border-radius: 14px; padding: 8px 6px; }
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sk-volver { background: none; border: none; color: var(--sk-acento); font-weight: 700; cursor: pointer; font-size: 1.1rem; padding: 2px 4px; flex: none; }
.sk-stats { display: flex; gap: 10px; align-items: center; font-size: 0.86rem; color: var(--sk-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-stats .sk-dif { color: var(--sk-acento); }
/* iconos de la barra: 🎨 tema y ⚙️ ajustes (estadísticas y duelos viven ahí dentro) */
.sk-iconos { display: flex; gap: 6px; flex: none; }
.sk-icono {
width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sk-btn-borde);
background: var(--sk-btn-bg); font-size: 1rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-sm);
}
.sk-icono:active { transform: scale(0.94); }
/* La cuadrícula NO usa bordes por celda (en Android se difuminaban/desparejaban por el
redondeo de subpíxeles: las cajas quedaban de distinto tamaño). El grid de celdas es
PLANO 9x9 y las líneas las dibuja un SVG superpuesto (.sk-rejilla) con grosor fijo en
píxeles — exactas y parejas en cualquier pantalla y densidad. */
.sk-board {
display: grid; grid-template-columns: repeat(9, 1fr);
position: relative;
width: 100%; max-width: min(94vw, 460px); aspect-ratio: 1; margin: 12px auto;
background: var(--sk-fondo); border: 2px solid var(--sk-marco); border-radius: 10px;
overflow: hidden; box-shadow: var(--sombra-md); touch-action: manipulation;
}
.sk-board.generando { opacity: 0.45; pointer-events: none; }
/* rejilla SVG por ENCIMA de las celdas: UNA sola línea por borde (el original con bordes
por celda mostraba una fina pegada a la gruesa = "doble línea"). 1px finas + 2px gruesas
de caja, exactas gracias a non-scaling-stroke; no intercepta toques. */
.sk-rejilla { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* geometricPrecision (NO crispEdges): con crispEdges + un trazo de 2px que cae en una
posición de subpíxel, el navegador partía la línea gruesa en DOS de 1px (la "doble
línea"). Con geometricPrecision se pinta como UNA sola línea. */
.sk-rejilla path { fill: none; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
.sk-rejilla .sk-l-fina { stroke: var(--sk-linea); stroke-width: 1; }
.sk-rejilla .sk-l-gruesa { stroke: var(--sk-marco); stroke-width: 2; }
.sk-cell {
position: relative; display: flex; align-items: center; justify-content: center;
padding: 0; background: transparent; cursor: pointer;
transition: background 0.1s ease;
}
/* GUÍA al tocar una celda: se tiñen su fila, su columna y su caja 3x3 (más intuitivo) */
.sk-cell.par { background: rgba(var(--sk-rgb), 0.20); }
/* mismo número que el de la celda tocada: se resalta más */
.sk-cell.mismo { background: rgba(var(--sk-rgb), 0.38); }
/* la celda tocada: la más marcada de todas */
.sk-cell.sel { background: var(--sk-sel); box-shadow: inset 0 0 0 2px var(--sk-marco); }
.sk-val { font-size: clamp(1.05rem, 5.2vw, 1.6rem); font-weight: 600; color: var(--sk-user); font-variant-numeric: tabular-nums; line-height: 1; }
.sk-cell.dado .sk-val { color: var(--sk-dado); font-weight: 800; }
.sk-cell.pista .sk-val { color: var(--sk-pista); font-weight: 800; }
.sk-cell.error .sk-val { color: var(--sk-error); }
.sk-notas { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.sk-notas i { font-style: normal; font-size: clamp(0.42rem, 1.9vw, 0.6rem); color: var(--sk-nota); display: flex; align-items: center; justify-content: center; line-height: 1; }
.sk-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; max-width: min(94vw, 460px); margin: 0 auto 12px; }
.sk-num {
position: relative; aspect-ratio: 1; font-size: clamp(1.1rem, 5vw, 1.5rem); font-weight: 700;
color: var(--sk-tecla); background: var(--sk-tecla-bg); border: 1px solid var(--sk-tecla-borde); border-radius: 12px;
cursor: pointer; box-shadow: var(--sombra-sm); display: flex; align-items: center; justify-content: center;
}
.sk-num:active { transform: translateY(1px); filter: brightness(0.95); }
.sk-num.completo { opacity: 0.32; }
.sk-num .sk-rem { position: absolute; top: 3px; right: 5px; font-size: 0.58rem; color: var(--sk-nota); font-weight: 700; }
/* ajustes: ocultar cronómetro / números restantes según preferencias */
#sudoku-host.sin-contador .sk-reloj { display: none; }
#sudoku-host.sin-restantes .sk-rem { display: none; }
.sk-acciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: min(94vw, 460px); margin: 0 auto 14px; }
.sk-accion {
display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px;
background: var(--sk-btn-bg); border: 1px solid var(--sk-btn-borde); border-radius: 12px;
font-size: 0.72rem; font-weight: 700; color: var(--sk-btn-txt); cursor: pointer; box-shadow: var(--sombra-sm);
}
.sk-accion .sk-ai { font-size: 1.15rem; }
.sk-accion:active { transform: translateY(1px); }
.sk-accion.activa { background: var(--sk-activa-bg); color: var(--sk-activa-txt); border-color: var(--sk-activa-bg); }
.sk-pie { display: flex; gap: 10px; align-items: center; max-width: min(94vw, 460px); margin: 0 auto; }
.sk-pie .sk-nivel { flex: 1; margin-bottom: 0; }
.sk-pie .sk-nivel,
.sk-pie .secundario { background: var(--sk-btn-bg); color: var(--sk-btn-txt); border-color: var(--sk-btn-borde); }
.sk-record { text-align: center; color: var(--sk-texto); font-size: 0.8rem; margin: 10px auto 0; font-variant-numeric: tabular-nums; }
.sk-victoria { position: fixed; inset: 0; background: rgba(20, 30, 20, 0.5); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 60; }
.sk-victoria-caja { background: var(--blanco); border-radius: 18px; padding: 28px 24px; text-align: center; max-width: 320px; box-shadow: var(--sombra-lg); animation: surgir 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sk-trofeo { font-size: 3rem; line-height: 1; }
.sk-victoria-caja h3 { color: var(--bronce); margin: 8px 0 4px; font-size: 1.3rem; }
.sk-victoria-caja p { color: var(--gris); margin-bottom: 18px; font-size: 0.95rem; line-height: 1.4; }
/* --- Sudoku: vidas, toast, estadísticas, y bloqueo de zoom por doble toque --- */
#vista-juegos, #vista-juegos * { touch-action: manipulation; } /* evita el zoom al tocar dos veces */
.sk-vidas { display: inline-flex; gap: 2px; }
.sk-vida { font-size: 1.05rem; line-height: 1; }
.sk-vida.llena { color: var(--sk-vida); }
.sk-vida.vacia { color: var(--sk-vida-ida); }
.sk-toast {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
background: var(--bronce); color: var(--marfil); padding: 11px 18px; border-radius: 12px;
font-weight: 700; font-size: 0.9rem; box-shadow: var(--sombra-lg); z-index: 70;
opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90vw; text-align: center;
}
.sk-toast.sk-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sk-elo { text-align: center; padding: 6px 0 14px; }
.sk-elo-num { font-size: 2.6rem; font-weight: 800; color: var(--bronce); line-height: 1; font-variant-numeric: tabular-nums; }
.sk-elo-rango { font-size: 1rem; font-weight: 700; color: var(--oro); margin-top: 4px; }
.sk-elo-cap { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); margin-top: 2px; }
.sk-stats-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sk-stats-tabla th, .sk-stats-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--borde); text-align: right; font-variant-numeric: tabular-nums; }
.sk-stats-tabla th:first-child, .sk-stats-tabla td:first-child { text-align: left; }
.sk-stats-tabla th { color: var(--gris); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; }
.sk-stats-resumen { text-align: center; color: var(--gris); font-size: 0.85rem; margin-top: 12px; font-weight: 600; }
/* --- cierre fácil de modales de lista: cabecera fija con ✕ (y tocar fuera cierra) --- */
/* La cabecera se PEGA arriba (top:0) pero tenía margin-top:-22px: al fijarse bajaba
22px y se comía lo que venía debajo (el ELO en Estadísticas, los iconos en Ajustes).
Ahora la cabecera aporta su propio padding y el modal no lleva padding arriba. */
.modal.tiene-cab { padding-top: 0; }
.modal-cab {
position: sticky; top: 0; z-index: 4;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--blanco); margin: 0 -22px 6px; padding: 20px 20px 10px;
border-radius: 16px 16px 0 0;
}
.modal-cab .titulo-modal { margin: 0; }
.modal-x {
flex: none; width: 34px; height: 34px; border: none; border-radius: 9px;
background: rgba(70, 60, 40, 0.08); color: var(--bronce); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.modal-x:hover { background: rgba(70, 60, 40, 0.16); }
.modal-x:active { transform: scale(0.94); }
/* --- Sudoku: tabla de posiciones (ranking del equipo) --- */
.sk-rank tbody tr.sk-yo { background: rgba(181, 146, 79, 0.16); font-weight: 800; color: var(--bronce); }
.sk-rank td:first-child, .sk-rank th:first-child { text-align: center; width: 34px; }
.sk-rank-cargando { text-align: center; color: var(--gris); font-size: 0.85rem; padding: 12px 0; }
/* ✕ para salir de los overlays de victoria/derrota del Sudoku */
.sk-victoria-caja { position: relative; }
.sk-ov-x {
position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: none; border-radius: 9px;
background: rgba(70, 60, 40, 0.08); color: var(--bronce); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.sk-ov-x:hover { background: rgba(70, 60, 40, 0.16); }
.sk-ov-x:active { transform: scale(0.94); }
/* --- Sudoku: duelos entre compañeros --- */
.sk-duelo-badge { font-size: 0.82rem; font-weight: 800; color: var(--sk-acento); white-space: nowrap; }
.retos-lista { margin-top: 4px; }
.reto-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--borde); }
.reto-item:last-child { border-bottom: none; }
.reto-info { font-size: 0.9rem; }
.reto-info strong { color: var(--bronce); }
.reto-estado { display: block; color: var(--gris); font-size: 0.8rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.reto-item .secundario { padding: 8px 14px; flex: none; }
/* aviso dentro del modal de estadísticas (p. ej. tras borrar puntajes) */
.sk-stats-aviso {
background: #fff8e6; border: 1px solid #eadfa9; color: #7a621a;
border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
font-size: 0.88rem; font-weight: 700; text-align: center;
}
/* ---- avisos push en el celular ---- */
.push-estado {
display: flex; align-items: center; gap: 8px; justify-content: center;
background: var(--crema); border: 1px solid var(--borde); border-radius: 12px;
padding: 12px 14px; margin-bottom: 12px;
font-size: 0.9rem; font-weight: 700; color: var(--gris); text-align: center;
}
.push-estado.activo { background: #eef7f0; border-color: #cfe6d8; color: var(--verde-oscuro); }
#push-ayuda { margin-top: 12px; margin-bottom: 0; text-align: left; line-height: 1.45; }
/* ---- galería de colores (tablero y app) — el degradado lo pone temas.js ---- */
.sk-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; padding: 10px 0 4px; }
.sk-tema { background: none; border: none; cursor: pointer; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* el aro interior evita que la mitad clara (Marca) se pierda sobre el modal blanco */
.sk-tema .sk-sw {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
border: 3px solid transparent; box-shadow: var(--sombra-sm), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.sk-tema small { font-size: 0.68rem; font-weight: 700; color: var(--gris); }
.sk-tema.sel .sk-sw { border-color: var(--tinta); }
.sk-tema.sel small { color: var(--tinta); }
.sk-tema:active { transform: translateY(1px); }
/* el botón "+" que abre el resto de la paleta */
.sk-tema-mas .sk-sw {
background: var(--blanco); border: 2px dashed var(--oro); box-shadow: none;
color: var(--oro); font-size: 1.3rem; font-weight: 700; line-height: 1;
}
/* ---- menú del Sudoku (entre la lista de juegos y el tablero) ---- */
/* Todo el menú se pinta con las variables del tema: al cambiar el color del
tablero cambia también el menú. Los que viven en modales (fuera de #vista-juegos)
no heredan nada, por eso cada var lleva su respaldo con el color de la app. */
.sk-hero {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, var(--sk-hero-a) 0%, var(--sk-hero-b) 100%); color: var(--marfil);
border: 1px solid var(--sk-hero-b); border-radius: 18px;
padding: 18px 18px; box-shadow: var(--sombra-md); margin-bottom: 14px;
}
/* la misma hairline dorada de las tarjetas de la app */
.sk-hero::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--sk-hero-oro) 25%, var(--sk-hero-oro) 75%, transparent);
opacity: 0.85;
}
/* mini tablero decorativo */
.sk-hero-mini {
flex: none; width: 52px; height: 52px; display: grid;
grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px;
border: 1.5px solid var(--sk-hero-oro); border-radius: 10px; background: rgba(0, 0, 0, 0.18);
}
.sk-hero-mini i { display: block; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.sk-hero-mini i.on { background: var(--sk-hero-oro); }
.sk-hero-info { flex: 1; min-width: 0; }
.sk-hero-kicker {
display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--sk-hero-oro); margin-bottom: 1px;
}
.sk-hero-info h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--marfil); letter-spacing: 0.3px; }
.sk-hero-info h2::before { content: none; }
.sk-hero-info p { margin: 3px 0 0; font-size: 0.78rem; color: var(--sk-hero-sub); line-height: 1.35; }
.sk-hero-elo { flex: none; text-align: right; }
.sk-hero-elo strong {
display: block; font-size: 1.3rem; font-weight: 800; color: var(--sk-hero-oro);
font-variant-numeric: tabular-nums; line-height: 1;
}
.sk-hero-elo small { display: block; font-size: 0.62rem; color: var(--sk-hero-sub); font-weight: 700; margin-top: 3px; opacity: 0.85; }
/* continuar partida: el botón protagonista */
.sk-continuar {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 14px 16px; border-radius: 16px; cursor: pointer; margin-bottom: 14px;
background: var(--sk-card-bg); border: 1.5px solid rgba(var(--sk-rgb), 0.8); box-shadow: var(--sombra-md);
}
.sk-continuar:active { transform: translateY(1px); }
.sk-cont-ico {
flex: none; width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--sk-hero-a) 0%, var(--sk-hero-b) 100%); color: var(--sk-hero-oro);
display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.sk-cont-txt { min-width: 0; }
.sk-cont-txt strong { display: block; font-size: 0.98rem; font-weight: 800; color: var(--sk-card-txt); }
.sk-cont-txt small { display: block; font-size: 0.78rem; color: var(--sk-texto); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* fichas de dificultad (crecen solas si mañana agregamos más niveles o variantes) */
.sk-bloque { margin-bottom: 0; background: var(--sk-card-bg); border-color: var(--sk-card-borde); }
.sk-bloque h2 { color: var(--sk-card-txt); }
.sk-bloque h2::before { background: var(--sk-acento); }
/* el botón de Jugar también es del tema: si no, queda un botón bronce sobre un menú verde */
#sudoku-menu .principal {
background: linear-gradient(135deg, var(--sk-hero-a) 0%, var(--sk-hero-b) 100%);
border-color: var(--sk-hero-b); color: var(--marfil);
}
.sk-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
/* dentro del Sudoku la salida es "← Juegos": sobra el "← Inicio" de la sección */
#vista-juegos.en-sudoku > .volver-inicio { display: none; }
.sk-chip {
display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px;
background: var(--sk-card-bg); border: 1.5px solid var(--sk-card-borde); border-radius: 12px;
cursor: pointer; box-shadow: var(--sombra-sm); transition: transform 0.1s ease;
}
.sk-chip strong { font-size: 0.8rem; font-weight: 800; color: var(--sk-card-txt); }
.sk-chip small { font-size: 0.64rem; color: var(--sk-texto); font-variant-numeric: tabular-nums; }
.sk-chip:active { transform: translateY(1px); }
.sk-chip.sel {
background: linear-gradient(135deg, var(--sk-hero-a) 0%, var(--sk-hero-b) 100%);
border-color: var(--sk-hero-b); box-shadow: var(--sombra-md);
}
.sk-chip.sel strong { color: var(--marfil); }
.sk-chip.sel small { color: var(--sk-hero-oro); }
/* fichas de acción (menú y atajos de ajustes): icono arriba, para que el texto no se corte */
.sk-menu-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sk-mtile {
display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 6px;
background: var(--sk-card-bg, var(--blanco)); border: 1px solid var(--sk-card-borde, var(--borde));
border-radius: 14px; box-shadow: var(--sombra-sm); cursor: pointer; text-align: center;
}
.sk-mtile:active { transform: translateY(1px); }
.sk-mtile-i { font-size: 1.35rem; line-height: 1; }
.sk-mtile-n { font-size: 0.76rem; font-weight: 800; color: var(--sk-card-txt, var(--bronce)); letter-spacing: 0.2px; }
.sk-mtile small { font-size: 0.62rem; color: var(--sk-texto, var(--gris)); line-height: 1.25; }
/* ---- ajustes del Sudoku: atajos + interruptores ---- */
.sk-atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.sk-ajuste {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 9px 2px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.sk-ajuste:last-child { border-bottom: none; }
.sk-ajuste-txt strong { display: block; font-size: 0.88rem; color: var(--tinta); font-weight: 700; }
.sk-ajuste-txt small { display: block; margin-top: 1px; font-size: 0.72rem; color: var(--gris); line-height: 1.3; }
.sk-ajuste input { width: 22px; height: 22px; flex: none; accent-color: var(--bronce); cursor: pointer; }
/* ============================== Herramientas de taller ============================= */
.th-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.th-volver { background: none; border: none; color: var(--bronce); font-weight: 700; cursor: pointer; font-size: 1.2rem; padding: 2px 6px; flex: none; }
.th-titulo { font-weight: 800; color: var(--bronce); font-size: 1.05rem; }
.th-card { margin-bottom: 14px; }
.th-vacio { color: var(--gris); font-size: 0.86rem; margin: 4px 0 10px; }
.th-add { margin-top: 4px; }
.th-item {
display: flex; align-items: center; gap: 8px;
padding: 10px 2px; border-bottom: 1px solid var(--borde);
}
.th-item:last-of-type { border-bottom: none; }
.th-item-info { flex: 1; min-width: 0; }
.th-item-info strong { display: block; font-size: 0.92rem; color: var(--tinta); }
.th-item-info small { display: block; color: var(--gris); font-size: 0.78rem; margin-top: 1px; }
.th-item-val { font-weight: 800; color: var(--bronce); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-alerta { color: var(--rojo); font-weight: 700; }
.th-mini { flex: none; width: 30px; height: 30px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); cursor: pointer; font-size: 0.9rem; color: var(--bronce); }
.th-mini.th-del { color: var(--rojo); }
.th-mini:active { transform: translateY(1px); }
/* formulario inline (agregar / editar tablero o pieza) */
.th-form { background: var(--crema); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.th-form .subtitulo:first-child { margin-top: 0; }
.th-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.th-fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.th-form-btns { display: flex; gap: 10px; margin-top: 12px; }
.th-form-btns button { flex: 1; }
.th-total {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
background: var(--bronce-grad); color: var(--marfil);
border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra-md);
}
.th-total-lbl { font-size: 0.9rem; font-weight: 700; color: var(--oro-claro); }
.th-total-val { font-size: 1.6rem; font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; }
.th-total-nota { flex-basis: 100%; font-size: 0.76rem; color: #cfc7b5; }
/* ---- despiece: resultado y plano ---- */
.dsp-chip { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.dsp-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.86rem; color: var(--tinta); cursor: pointer; }
.dsp-check input { width: 20px; height: 20px; accent-color: var(--bronce); }
.dsp-resumen { display: flex; gap: 10px; margin-bottom: 14px; }
.dsp-metrica {
flex: 1; background: var(--crema); border: 1px solid var(--borde); border-radius: 12px;
padding: 12px 8px; text-align: center;
}
.dsp-metrica strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--bronce); font-variant-numeric: tabular-nums; }
.dsp-metrica small { display: block; color: var(--gris); font-size: 0.72rem; margin-top: 2px; }
.dsp-plano-lbl { font-weight: 700; color: var(--bronce); font-size: 0.85rem; margin: 14px 0 6px; }
.dsp-svg { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: var(--sombra-sm); background: #fff; }
/* ---- Optimizar corte: restyle (leyenda, retazos, cantidades rápidas) ---- */
.dsp-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 12px; }
.dsp-ley-item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.78rem; font-weight: 700; color: var(--tinta);
}
.dsp-ley-item i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.dsp-ley-item small { color: var(--gris); font-weight: 700; }
.dsp-plano-sub { font-weight: 700; color: var(--gris); font-size: 0.78rem; }
.dsp-retazos {
background: var(--crema); border: 1px dashed var(--borde); border-radius: 12px;
padding: 12px 14px; margin-top: 14px;
}
.dsp-retazos strong { display: block; font-size: 0.85rem; color: var(--bronce); margin-bottom: 6px; }
.dsp-retazo {
display: inline-block; background: var(--blanco); border: 1px solid var(--borde);
border-radius: 999px; padding: 3px 10px; margin: 2px 4px 2px 0;
font-size: 0.78rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.dsp-retazo small { color: var(--gris); font-weight: 600; }
.dsp-mas { display: block; color: var(--gris); margin-top: 4px; }
.dsp-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dsp-acciones .secundario { width: 100%; }
.dsp-step { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.dsp-step b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta); }
.dsp-step-btn {
width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--borde);
background: var(--blanco); color: var(--bronce); font-size: 1rem; line-height: 1;
cursor: pointer; font-weight: 700;
}
.dsp-step-btn:active { transform: scale(0.92); }
/* con 4 métricas en celular, que bajen de línea en vez de apretarse */
.dsp-resumen { flex-wrap: wrap; }
.dsp-metrica { min-width: 30%; }
/* biblioteca: el wordmark en la cabecera de la sección */
.bib-logo { margin-left: auto; height: 16px; width: auto; opacity: 0.9; }
/* biblioteca: grupos de cortes guardados + botón de enviar */
.bib-grupo { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--oro); margin: 12px 0 2px; }
.bib-grupo:first-child { margin-top: 0; }
.bib-enviar { flex: none; padding: 7px 10px; font-size: 0.74rem; white-space: nowrap; }
/* proveedores: lista de precios de lámina en la ficha */
.pf-lam-fila { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--borde); font-size: 0.85rem; }
.pf-lam-fila:last-child { border-bottom: none; }
.pf-lam-fila span { flex: 1; color: var(--tinta); }
.pf-lam-fila strong { color: var(--bronce); font-variant-numeric: tabular-nums; }
.pf-lam-fila .borrar { background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 0.95rem; padding: 2px 4px; }
/* dos filas: material/calibre/tipo arriba, precio ancho + botón abajo (en una sola
fila de 5 los selects quedaban de ~76px y el texto no cabía) */
.pf-lam-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.pf-lam-form #pfl-precio { grid-column: 1 / 3; }
.pf-lam-form #pfl-add { grid-column: 3; }
.pf-lam-form select, .pf-lam-form input { margin-bottom: 0; padding: 9px 8px; font-size: 0.82rem; }
.pf-lam-form .secundario { padding: 8px 12px; }
/* biblioteca: costo de la orden */
.bib-costo-caja { background: var(--crema); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.bib-costo-caja > strong { display: block; font-size: 0.85rem; color: var(--bronce); margin-bottom: 6px; }
.bib-costo-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 0.85rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.bib-costo-fila.bib-envio { color: var(--gris); font-size: 0.8rem; }
.bib-envio-inp { width: 90px; padding: 4px 6px; margin: 0; font-size: 0.8rem; text-align: right; }
.bib-costo-fila.bib-total { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 8px; font-weight: 800; color: var(--bronce); font-size: 0.95rem; }
.bib-costo-nota { display: block; margin-top: 6px; color: #7a621a; }
.preinv-inp { width: 76px; padding: 8px 6px; margin: 0; text-align: center; flex: none; }
/* ============================ Controles y consistencia ============================ */
/* --gold se usaba en 7 reglas sin estar definida (el color caía al heredado); sigue
al tema del colaborador porque temas.js reescribe --oro */
:root { --gold: var(--oro); }
/* los salían como el control crudo del navegador */
input[type="file"] {
width: 100%;
padding: 9px 10px;
border: 1px dashed var(--borde);
border-radius: 11px;
background: var(--blanco);
margin-bottom: 12px;
font-size: 0.85rem;
color: var(--gris);
}
/* dentro de una fila de controles no lleva el margen de bloque (empataba en
especificidad con la regla de .fila-controles y ganaba por orden de fuente) */
.fila-controles input[type="file"] { margin-bottom: 0; }
input[type="file"]::file-selector-button {
border: none;
border-radius: 8px;
background: #eceae2;
color: var(--tinta);
padding: 7px 12px;
margin-right: 10px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
/* button.enlace fuera del header (herramientas de taller) no tenía NINGUNA regla */
main button.enlace, .modal button.enlace {
display: block;
margin: 10px auto 0;
background: none;
border: none;
color: var(--bronce);
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.3px;
padding: 6px 10px;
cursor: pointer;
}
main button.enlace:hover, .modal button.enlace:hover { color: var(--oro); }
/* modales de formulario: antes era style="text-align:left; max-width:420px" copiado 13 veces */
.modal-form { text-align: left; max-width: 420px; }
/* aclaraciones dentro de una label .subtitulo sin deshacer el uppercase a mano */
.subtitulo .nota { text-transform: none; letter-spacing: 0; color: var(--gris); font-weight: 400; }
/* el chip Pendiente/Aprobado se estiraba a la altura de la fila (flex default stretch) */
.lista-marcas li { align-items: center; gap: 10px; }
.lista-marcas .chip { flex: none; }
/* las flechitas del spinner se montaban sobre el número en los inputs chicos */
.bib-envio-inp::-webkit-inner-spin-button, .bib-envio-inp::-webkit-outer-spin-button,
.preinv-inp::-webkit-inner-spin-button, .preinv-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bib-envio-inp, .preinv-inp { -moz-appearance: textfield; }
/* feedback de hover en escritorio (en táctil no molesta: no hay hover);
:not(.festivo)/:not(.sel) para no pisar los estados por orden de fuente */
.cal-nav:hover, .cal-chip:not(.sel):hover { border-color: var(--oro); }
.cal-dia:not(.festivo):hover { background: var(--crema); }
.cal-dia:hover { cursor: pointer; }
.ent-item:hover { background: var(--crema); }
button.mini { transition: border-color 0.15s ease, color 0.15s ease; }
button.mini:hover { border-color: var(--oro); color: var(--bronce); }
.form-compra button { transition: filter 0.12s ease; }
.form-compra button:hover { filter: brightness(1.08); }
.nom-mes-link:hover { background: var(--crema); }
/* en ventanas bajas el login centrado cortaba el logo por arriba (inaccesible) */
.login { justify-content: center; justify-content: safe center; }
/* la cabecera sticky de modal reponía 20px de padding sobre los 22 del modal */
.modal-cab { padding: 20px 22px 10px; }
/* el rótulo del optimizador antes vivía en un inline style */
#dsp-resultado { margin-top: 16px; }
/* ============================ Escritorio ============================ */
@media (min-width: 560px) {
/* taller tiene exactamente 3 herramientas: que no quede una coja */
#vista-taller .menu-tiles { grid-template-columns: repeat(3, 1fr); }
/* con 3 botones de marca (trabajando) el impar de abajo ocupa la fila completa */
.botones-marca button:nth-child(odd):last-child { grid-column: 1 / -1; }
}
/* en celular los campos fluyen como siempre (el envoltorio .campo no pinta caja) */
#perfil-campos .campo { display: contents; }
@media (min-width: 700px) {
/* modales que en monitor merecen aire (en celular el ancho lo da la pantalla) */
.modal-form, .modal-equipo { max-width: 540px; }
#velo-proveedor-form .modal { max-width: 600px; }
#velo-mes .modal, #velo-mes-a .modal { max-width: 680px; }
.tabla-mes { font-size: 0.92rem; }
.tabla-mes td, .tabla-mes th { padding: 8px 10px; }
/* datos personales en dos columnas */
#perfil-campos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
#perfil-campos .campo { display: block; }
#perfil-campos .campo-ancho { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
/* el ancho de main depende de la vista abierta: las de formulario se quedan
angostas (leerse bien > llenar la pantalla); estas aprovechan el monitor */
main:has(#vista-inicio:not(.oculto)),
main:has(#vista-calendario:not(.oculto)),
main:has(#vista-documentacion:not(.oculto)),
main:has(#vista-contabilidad:not(.oculto)) { max-width: 1000px; }
/* los hosts pierden .oculto al abrirse y NO lo recuperan al salir con "← Inicio"
(solo al reentrar al taller): exigir el ancestro visible evita que la regla se
"fugue" y deje TODA la app en 1100px */
main:has(#vista-taller:not(.oculto) #costo-host:not(.oculto)),
main:has(#vista-taller:not(.oculto) #despiece-host:not(.oculto)),
main:has(#vista-taller:not(.oculto) #biblioteca-host:not(.oculto)) { max-width: 1100px; }
/* inicio: el reloj a la izquierda (se queda fijo al hacer scroll), el menú a la
derecha. Solo si el widget está visible: a la contadora (pago fijo) y a las
cuentas solo-juegos se les oculta, y el grid dejaría una columna vacía de 400px. */
#vista-inicio:has(> #widget-marcar:not(.oculto)) { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0 20px; align-items: start; }
#vista-inicio > * { grid-column: 1; }
#vista-inicio > .menu-tiles {
grid-column: 2;
grid-row: 1 / span 2;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
align-content: start;
margin-top: 0;
}
#vista-inicio > #widget-marcar { position: sticky; top: 16px; }
/* calendario: cuadrícula grande a la izquierda, agregar/próximas a la derecha */
#vista-calendario { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 18px; align-items: start; }
#vista-calendario > * { grid-column: 2; }
#vista-calendario > .volver-inicio { grid-column: 1 / -1; }
#vista-calendario > #cal-card { grid-column: 1; grid-row: 2 / span 6; }
/* documentación y contabilidad: sus dos tarjetas lado a lado */
#vista-documentacion, #vista-contabilidad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
#vista-documentacion > .volver-inicio, #vista-contabilidad > .volver-inicio { grid-column: 1 / -1; }
/* calculadora de costos: tableros y piezas lado a lado */
#costo-host { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
#costo-host > .th-top, #costo-host > .th-total, #costo-host > button { grid-column: 1 / -1; }
/* optimizar corte: formulario a la izquierda, plano a la derecha…
…pero mientras no haya resultado, columna centrada como en celular */
#despiece-host { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 0 18px; align-items: start; }
#despiece-host > * { grid-column: 1; }
#despiece-host > .th-top { grid-column: 1 / -1; }
#despiece-host > #dsp-resultado { grid-column: 2; grid-row: 2 / span 4; margin-top: 0; }
#despiece-host:has(#dsp-resultado:empty) { display: block; max-width: 640px; margin: 0 auto; }
/* biblioteca: armar la orden | orden, pre-inventario | cortes guardados */
#biblioteca-host { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
#biblioteca-host > .th-top, #biblioteca-host > #bib-error, #biblioteca-host > #bib-vacio { grid-column: 1 / -1; }
}
/* ============================ Panel admin en escritorio ============================ */
.main-admin { max-width: 880px; }
td.col-rol { white-space: normal; max-width: 340px; }
.fila-controles > div { max-width: 260px; }
@media (min-width: 1100px) {
.main-admin { max-width: 1060px; }
}
@media (min-width: 900px) {
#seccion-empleados, #seccion-reportes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
#seccion-empleados > .tarjeta:last-child { grid-column: 1 / -1; }
}
/* perfiles de permisos: plantillas por rol en el modal de permisos del admin */
.perfil-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.perfil-chips-lbl { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gris); }
.perfil-chips button {
border: 1px solid var(--borde);
background: var(--crema);
color: var(--bronce);
border-radius: 999px;
padding: 7px 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.perfil-chips button:hover { border-color: var(--oro); background: var(--blanco); }
/* ============================ Facturas electrónicas ============================ */
.fac-buscar-fila { display: flex; gap: 8px; }
.fac-buscar-fila input { margin-bottom: 0; flex: 1; }
.fac-buscar-fila .secundario { flex: none; padding: 10px 16px; }
#fac-resultados { margin-top: 10px; }
.fac-cab-lista { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fac-mes { width: auto; margin-bottom: 0; padding: 8px 10px; font-size: 0.88rem; }
.fac-totales {
display: flex; flex-wrap: wrap; gap: 6px 16px;
background: var(--crema); border: 1px solid var(--borde); border-radius: 12px;
padding: 10px 14px; margin-bottom: 10px; font-size: 0.82rem; color: var(--gris);
}
.fac-totales strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.fac-totales .fac-tot-total strong { color: var(--bronce); }
.fac-fila { cursor: pointer; }
.fac-fila:hover { background: var(--crema); }
.fac-fila-der { display: flex; align-items: center; gap: 6px; flex: none; }
.fac-monto { font-weight: 800; color: var(--bronce); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-monto-nc { color: var(--rojo); }
.fac-chip-tipo { background: #eef3fb; color: #33527d; }
.fac-aviso { background: #fff8e6; border: 1px solid #eadfa9; color: #7a621a; border-radius: 10px; padding: 9px 12px; font-size: 0.84rem; margin: 10px 0; }
/* ---- Lote 4: segmentado Lista / Alegra · gutter de estado · alerta de precio ---- */
/* segmentado bajo los totales (reusa .pestanas), un pelín más compacto */
.fac-vista { margin-bottom: 12px; }
/* badge con el nº de problemas de cruce del mes, dentro del segmento "Facturas Alegra" */
.fac-vista-badge {
display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
background: var(--ambar); color: var(--blanco); border-radius: 999px;
font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
line-height: 18px; text-align: center;
}
.fac-vista button.activa .fac-vista-badge { background: rgba(255, 255, 255, 0.26); color: var(--marfil); }
/* pie de frescura del cruce + botón Actualizar (enlace inline, no el centrado de main) */
.fac-alegra-fresco {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
margin: -2px 0 12px; font-size: 0.8rem; color: var(--gris);
}
.fac-alegra-fresco .enlace { display: inline; margin: 0; padding: 0; font-size: 0.8rem; }
.fac-alegra-fresco-txt.sincronizando { color: var(--ambar); font-weight: 700; }
/* gutter de estado del cruce con Alegra a la izquierda de cada fila (ancho fijo para
que todos los nombres arranquen alineados, haya símbolo o no) */
.fac-estado { flex: none; width: 22px; text-align: center; font-size: 0.95rem; line-height: 1.2; }
.fac-estado-neutro { color: var(--gris); opacity: 0.75; } /* ○ pendiente de cruce */
/* motivo del cruce colgando del de la fila: ámbar en problemas, gris en pendiente */
.fac-estado-motivo { color: var(--ambar); font-weight: 700; }
.fac-estado-motivo.neutro { color: var(--gris); font-weight: 600; }
/* chip de alerta de precio en la parte derecha de la fila (⚠ N productos más caros) */
.fac-chip-alerta {
background: #fbf0d8; color: var(--ambar); border: 1px solid #ecd9a6;
border-radius: 999px; padding: 2px 8px; font-size: 0.74rem; font-weight: 800;
white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* En pantallas muy angostas (iPhone SE ~320px) una fila con chip de tipo + chip de
alerta + monto de 7 dígitos apretuja el bloque derecho y desborda unos px. Se le deja
ENVOLVER y encoger para que el chip baje de línea antes que empujar. Solo <=360px; en
375px+ nunca ocurre, así que no toca el resto de teléfonos. */
@media (max-width: 360px) {
.fac-fila-der { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; }
}
/* notas de alerta de precio bajo el nombre del producto en el detalle (3 clases para
ganarle a ".fac-desc small", que es gris). Ámbar si subió, apagada si bajó. */
.tabla-fac .fac-desc .fac-alerta-nota { display: block; margin-top: 2px; color: var(--ambar); font-weight: 700; }
.tabla-fac .fac-desc .fac-baja-nota { display: block; margin-top: 2px; color: var(--gris); }
.facd-emisor { margin-bottom: 10px; }
.facd-emisor small { display: block; color: var(--gris); margin-top: 2px; }
.facd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.facd-pago, .facd-cat {
border: 1px solid var(--borde); background: var(--blanco); color: var(--gris);
border-radius: 999px; padding: 6px 11px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.facd-pago { color: var(--naranja); border-color: #ecd9b4; }
.facd-pago.pagada { color: var(--blanco); background: var(--verde); border-color: var(--verde); }
.facd-cat.sel { color: var(--blanco); background: var(--bronce); border-color: var(--bronce); }
.facd-cat:hover, .facd-pago:hover { border-color: var(--oro); }
.facd-prov { margin-bottom: 12px; font-size: 0.88rem; }
.tabla-fac { font-size: 0.82rem; }
.tabla-fac td, .tabla-fac th { padding: 6px 8px; }
.tabla-fac .fac-desc { white-space: normal; min-width: 140px; }
.tabla-fac .fac-desc small { display: block; color: var(--gris); }
.fac-emp { width: 86px; padding: 5px 6px; margin: 0; font-size: 0.82rem; text-align: right; }
.fac-emp::-webkit-inner-spin-button, .fac-emp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fac-unidad { font-weight: 800; color: var(--verde-oscuro); }
/* Detalle de factura: desglose completo del IVA por línea. Precios SIN IVA como en
la factura DIAN; las columnas de IVA (IVA/u, IVA, y por herencia el total c/IVA)
son valores DERIVADOS → se tiñen de gris para leerse como referencia, no como el
dato oficial. Encabezados en dos renglones (Precio/u · sin IVA) para angostar y
que quepan las 7 columnas con scroll horizontal en iPhone. */
.fac-iva-leyenda { color: var(--gris); font-size: 0.74rem; margin: 0 0 6px; }
.tabla-fac-iva td, .tabla-fac-iva th { padding: 6px 7px; }
.tabla-fac-iva th { vertical-align: bottom; line-height: 1.15; }
.tabla-fac-iva th .fac-th-sub {
display: block; font-weight: 400; font-size: 0.66rem;
text-transform: none; letter-spacing: 0; color: var(--gris);
}
.tabla-fac td.fac-col-iva, .tabla-fac th.fac-col-iva { color: var(--gris); }
/* nota de descuento por unidad bajo el nombre del producto (precio de lista vs.
neto real). Especificidad de 3 clases para ganarle a ".fac-desc small" (gris). */
.tabla-fac .fac-desc .fac-desc-nota { display: block; margin-top: 2px; color: var(--verde-oscuro); }
.fac-desglose { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 8px; }
.facd-acciones { display: flex; gap: 8px; margin-top: 14px; }
.facd-acciones .secundario { flex: 1; }
@media (min-width: 700px) {
/* el detalle de factura trae una tabla ancha (desglose de IVA por producto):
que la ventana CREZCA hasta donde haya espacio en el PC para que la tabla
quepa sin barra interna; en un navegador angosto, 94vw la achica y ahí sí
la envoltura-tabla vuelve a hacer scroll horizontal. */
#velo-factura .modal { max-width: min(1120px, 94vw); }
}
@media (min-width: 900px) {
main:has(#vista-facturas:not(.oculto)) { max-width: 1000px; }
#vista-facturas { display: grid; grid-template-columns: 5fr 6fr; gap: 0 18px; align-items: start; }
#vista-facturas > .volver-inicio { grid-column: 1 / -1; }
/* en la vista de Alegra el panel trae una tabla ancha: se colapsa la rejilla de dos
columnas a una sola para que la tarjeta de Facturas se estire al ancho completo */
#vista-facturas:has(#fac-alegra-panel:not(.oculto)) { grid-template-columns: 1fr; }
}
/* estado del robot del correo en Facturas */
.fac-robot-error { color: var(--rojo); }
#fac-robot .enlace { margin: 4px auto 0; }
/* conteo de documentos del mes (señal anti-recaída junto al título) */
.fac-conteo {
font-size: 0.7rem; font-weight: 700; color: var(--gris);
background: var(--crema); border: 1px solid var(--borde); border-radius: 999px;
padding: 2px 9px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}
.fac-conteo.vacio { color: var(--rojo); background: #fdecea; border-color: #f0cfca; }
/* marca discreta de fecha estimada en una fila de factura */
.fac-aprox { color: var(--ambar); font-weight: 700; }
/* panel del robot enriquecido: modo de búsqueda + resumen de la última corrida */
.fac-robot-modo { font-size: 0.82rem; margin: 6px 0 0; }
.fac-robot-modo.ok { color: var(--verde-oscuro); }
.fac-robot-modo.aviso { color: var(--naranja); }
.fac-robot-resumen { font-size: 0.8rem; color: var(--gris); margin: 4px 0 0; }
/* controles de admin (reescanear + borrar todo), separados por una línea */
.fac-admin { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.fac-admin-btn { width: 100%; margin-top: 8px; }
.fac-admin-btn:first-child { margin-top: 0; }
#fac-robot .fac-admin-btn.peligro { color: var(--rojo); border-color: var(--rojo); background: var(--blanco); }
#fac-robot .fac-admin-btn.peligro:hover { background: var(--rojo); color: var(--marfil); border-color: var(--rojo); }
.fac-peligro-nota { margin: 6px 0 0; }
/* facturas: nota de empaque bajo el producto + botón 📦 discreto */
.fac-emp-nota { display: block; color: var(--verde-oscuro); margin-top: 2px; }
.fac-emp-btn { border: 1px solid var(--borde); background: var(--blanco); border-radius: 8px; padding: 4px 7px; cursor: pointer; }
.fac-emp-btn:hover { border-color: var(--oro); }
/* ===== Cruce con Alegra: herramienta interactiva (solo lectura) =====
Panel ancho bajo las dos columnas de Facturas. Resumen llano + pestañas por lado +
filtros (fecha/proveedor/texto) + mini-resumen por proveedor + tabla ordenable. */
#vista-facturas > .fac-alegra { grid-column: 1 / -1; }
/* A. resumen en lenguaje llano + aviso de 'alegraDesde' */
.fac-alegra-frase { font-size: 0.9rem; color: var(--tinta); margin: 12px 0 0; line-height: 1.5; }
.fac-alegra-frase strong { color: var(--bronce); font-variant-numeric: tabular-nums; }
.fac-alegra-frase small { color: var(--gris); }
.fac-cross-banner {
background: #fff8e6; border: 1px solid #eadfa9; color: #6f5a17;
border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; font-size: 0.84rem; line-height: 1.5;
}
.fac-cross-banner strong { color: var(--bronce); }
/* atajos de fecha (píldoras contorneadas) — reusadas en el banner y en la barra */
.fac-cross-atajo {
display: inline-block; border: 1px solid var(--oro); background: var(--blanco);
color: var(--bronce); border-radius: 999px; padding: 4px 10px; font-size: 0.76rem;
font-weight: 700; cursor: pointer; margin: 4px 4px 0 0;
}
.fac-cross-atajo:hover { background: var(--oro); color: var(--marfil); }
/* B. pestañas por lado */
.fac-cross-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.fac-cross-pill {
border: 1px solid var(--borde); background: var(--blanco); color: var(--gris);
border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fac-cross-pill:hover { border-color: var(--oro); }
.fac-cross-pill.activa { background: var(--bronce-grad); color: var(--marfil); border-color: var(--bronce-osc); }
.fac-cross-pilln {
font-variant-numeric: tabular-nums; background: rgba(70, 60, 40, 0.10);
border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 0.78rem;
}
.fac-cross-pill.activa .fac-cross-pilln { background: rgba(255, 255, 255, 0.22); }
/* C. barra de filtros */
.fac-cross-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fac-cross-fecha { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-cross-fecha label { font-size: 0.78rem; color: var(--gris); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.fac-cross-fecha input[type="date"] { margin: 0; padding: 7px 9px; font-size: 0.82rem; width: auto; }
.fac-cross-filtros select { margin: 0; padding: 8px 10px; font-size: 0.82rem; max-width: 100%; flex: 1 1 200px; }
.fac-cross-atajos { display: flex; flex-wrap: wrap; gap: 4px; }
.fac-cross-q { margin: 0 !important; flex: 1 1 180px; min-width: 140px; }
/* D. conteo filtrado en vivo */
.fac-cross-cuenta { font-size: 0.82rem; color: var(--gris); margin: 4px 0 8px; }
.fac-cross-cuenta strong { color: var(--bronce); font-variant-numeric: tabular-nums; }
.fac-cross-limpiar { display: inline !important; margin: 0 0 0 6px !important; padding: 0 !important; font-size: 0.8rem !important; }
/* E. mini-resumen por proveedor (chips que además filtran al tocarlos) */
.fac-cross-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fac-cross-provchip {
max-width: 100%; border: 1px solid var(--borde); background: var(--crema); color: var(--bronce);
border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-cross-provchip:hover { border-color: var(--oro); }
.fac-cross-provchip.activa { background: var(--bronce); color: var(--marfil); border-color: var(--bronce); }
.fac-cross-provn { font-variant-numeric: tabular-nums; opacity: 0.75; margin-left: 2px; font-weight: 800; }
/* D. tabla ordenable, con scroll propio (no empuja el ancho de la página) */
.fac-cross-scroll {
max-height: 62vh; overflow: auto; border: 1px solid var(--borde); border-radius: 12px;
}
.fac-cross-tabla { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.fac-cross-tabla th, .fac-cross-tabla td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.fac-cross-tabla tbody tr:last-child td { border-bottom: none; }
.fac-cross-tabla th {
position: sticky; top: 0; z-index: 1; background: var(--crema);
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris); font-weight: 800;
}
.fac-cross-tabla th.num, .fac-cross-tabla td.num { text-align: right; }
.fac-cross-orden { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; }
.fac-cross-orden:hover { color: var(--bronce); }
.fac-cross-cprov strong { display: block; color: var(--tinta); font-weight: 700; }
.fac-cross-cprov small, .fac-cross-cnum small, .fac-cross-cval small { display: block; color: var(--gris); font-size: 0.72rem; font-weight: 600; margin-top: 1px; }
.fac-cross-cnum { font-variant-numeric: tabular-nums; }
.fac-cross-cnum strong { color: var(--tinta); }
.fac-cross-cfecha { white-space: nowrap; color: var(--gris); }
.fac-cross-cval .fac-monto { font-size: 0.86rem; }
/* “ver más” (render por tandas) */
.fac-cross-mas { width: 100%; margin-top: 10px; }
/* F. exportar a Excel para la contadora */
.fac-cross-exportar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.fac-cross-exportar .secundario { flex: none; }
.fac-cross-exp-nota { font-size: 0.78rem; color: var(--gris); }
/* G. pie: sincronización + volver a comparar */
.fac-alegra-pie {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--borde);
font-size: 0.8rem; color: var(--gris);
}
.fac-alegra-pie .enlace { margin: 0; }
.fac-alegra-aviso { color: var(--naranja); }
/* ============================ To-Do (tareas) ============================ */
.td-alta { display: flex; gap: 8px; }
.td-alta input { margin-bottom: 0; flex: 1; }
.td-alta .secundario { flex: none; width: 46px; padding: 0; font-size: 1.4rem; }
#td-lista, #td-asignadas { margin-top: 10px; }
.td-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 2px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.td-item:last-child { border-bottom: none; }
.td-item input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--verde); flex: none; cursor: pointer; }
.td-item .td-texto { flex: 1; line-height: 1.35; }
.td-item .td-de { display: block; color: var(--oro); font-size: 0.76rem; font-weight: 700; margin-top: 1px; }
.td-item.td-hecha .td-texto { text-decoration: line-through; color: var(--gris); }
.td-item .th-del { flex: none; margin-top: 1px; }
@media (min-width: 900px) {
main:has(#vista-todo:not(.oculto)) { max-width: 900px; }
#vista-todo:has(#td-sup) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
#vista-todo:has(#td-sup) > .volver-inicio { grid-column: 1 / -1; }
}