* { box-sizing: border-box; margin: 0; padding: 0; } :root { --verde: #2e7d4f; --verde-oscuro: #1d5c38; --crema: #f6f4ee; --tinta: #26301f; --gris: #5e655a; --borde: #e2ded3; --blanco: #ffffff; /* EL FONDO DE UNA TARJETA. Existía en trece reglas de Bodega y Productividad — `background: var(--tarjeta)`— y NO estaba declarado en ninguna parte: una variable que no existe invalida la declaración entera, así que esas trece superficies computaban rgba(0,0,0,0) y quedaban transparentes sobre el papel. Medido en el navegador: .tarjeta daba rgb(255,255,255) y .pr-op daba rgba(0,0,0,0). Por eso esas pantallas se veían lavadas: las fichas nunca se pintaron. */ --tarjeta: #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); } /* ---------- la letra ---------- En el iPhone `system-ui` YA es la San Francisco de Apple: allí la app se ve como el dueño quiere y NO se toca nada. En Windows, `system-ui` cae en Segoe UI, que tiene otro aire. La San Francisco NO se puede servir desde aquí: su licencia prohíbe expresamente incrustarla, usarla en web y ponerla en una red donde varios equipos la usen — que es literalmente lo que hace este servidor. Por eso en ESCRITORIO se usa Inter, hecha para pantallas con el mismo propósito que la San Francisco y libre de verdad (SIL Open Font License 1.1). Inter — Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter) Licencia SIL OFL 1.1 · copia completa en vendor/fuentes/inter-LICENSE.txt Dos detalles que importan: · Los @font-face solo DECLARAN: el navegador no descarga nada hasta que algo usa la familia, y solo se usa dentro del @media de escritorio ⇒ el celular baja CERO. · size-adjust: 96% — Inter dibuja la equis ~4% más alta que la San Francisco; sin esto, el mismo texto se vería más grande que en el iPhone. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* un solo archivo variable cubre todos los grosores */ font-display: swap; /* el texto se lee desde el primer instante */ size-adjust: 96%; src: url("vendor/fuentes/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { /* Europa del este y monedas raras. Con unicode-range NO se descarga jamás… salvo que alguien escriba un nombre que lo necesite. Cuesta 0 bytes tenerlo por si acaso. */ font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 96%; src: url("vendor/fuentes/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } 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; } /* SALIR SE SEPARA DEL RESTO. En el celular queda en la esquina de arriba a la derecha, justo donde cae el pulgar al estirar la mano y pegado a la campana de avisos: apuntar a una y darle a la otra es cuestión de tiempo. Un hueco propio y menos contraste hacen que no compita con los botones que sí se usan a diario. Además pide confirmación. */ #boton-salir { margin-left: 6px; opacity: 0.72; } #boton-salir:hover, #boton-salir:focus-visible { opacity: 1; } } main { max-width: 640px; margin: 0 auto; padding: 18px 14px 60px; } /* ---------- barra lateral de escritorio ---------- En celular NO existe (los tiles del inicio mandan). Todo lo suyo vive en el bloque @media ≥900px de más abajo; aquí solo se apaga. El pulso del inicio (tarjetas del tablero) igual: nace apagado y solo respira en pantalla grande. */ #barra-lateral { display: none; } .pulso-inicio { display: none; } /* ---------- descripción del ítem: varias líneas con su ✕ ---------- */ .cot-it-desc-zona { grid-area: desc2; display: flex; flex-direction: column; gap: 5px; } .cot-it-detalles { display: flex; flex-direction: column; gap: 5px; } .cot-it-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 5px; align-items: center; } .cot-it-detalle .cot-it-det { font-size: 0.88rem; } .cot-it-det-x { width: 26px; height: 26px; font-size: 0.7rem; } /* el + no debe competir con los botones grandes: discreto y alineado a la izquierda */ .cot-it-mas { align-self: flex-start; padding: 5px 11px; font-size: 0.78rem; border-style: dashed; } /* en el detalle, las líneas debajo del título del ítem */ .cot-td-det { display: block; font-size: 0.82rem; color: var(--gris); line-height: 1.4; } .cot-td-det::before { content: "· "; color: var(--oro); font-weight: 700; } /* ---------- compartir la cotización con el cliente ---------- */ .cot-compartir { margin-top: 16px; padding: 14px; background: var(--crema); border: 1px solid var(--borde); border-radius: 12px; } .cot-enlace { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 9px 11px; margin: 8px 0; /* el enlace es largo y no debe desbordar el celular */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .cot-enlace code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; color: var(--bronce); white-space: nowrap; } .cot-respuesta { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--verde); background: var(--blanco); } .cot-respuesta.no { border-left-color: var(--rojo); } /* pedido de ajustes: no es un veredicto, es «hablemos» — va en el bronce de la casa */ .cot-respuesta.ajuste { border-left-color: var(--bronce); background: #fdf8ef; } .cot-respuesta .cot-notas { margin-top: 6px; font-size: 0.88rem; } /* lo que el cliente anotó en ítems concretos, con el título del ítem al lado */ .cot-notas-items { margin: 8px 0 0; padding-left: 0; list-style: none; } .cot-notas-items li { font-size: 0.86rem; line-height: 1.45; padding: 5px 0 5px 12px; border-left: 2px solid var(--oro-claro, #d8bd86); margin-bottom: 4px; } .cot-notas-items strong { color: var(--bronce); } /* ---------- día por día de la nómina ---------- */ /* Franja que agrupa los días por semana del año. Selector con el ancestro a propósito: `.tabla-mes td` se declara más abajo con la misma especificidad y le ganaría el desempate por orden, dejando la franja con el relleno de una fila normal (el mismo tropiezo que el z-index de la ventanita de pausas). */ .tabla-mes .mes-semana td { padding: 10px 6px 4px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--borde); background: none; } /* el punto azul: abre las pausas del día. Azul a propósito — es el único dato del día que se puede DESPLEGAR, y no debe confundirse con los avisos (ámbar/rojo). */ .punto-pausas { width: 11px; height: 11px; padding: 0; margin-left: 6px; border: none; border-radius: 50%; background: #2f6fd0; cursor: pointer; vertical-align: middle; flex: none; box-shadow: 0 0 0 0 rgba(47, 111, 208, 0.5); transition: box-shadow 0.15s ease, transform 0.15s ease; } .punto-pausas:hover { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(47, 111, 208, 0.18); } /* doble clase: `.nom-linea` se declara después y le ganaría el desempate por orden */ .nom-linea.pausas-total { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 8px; } /* La ventanita de pausas se abre ENCIMA del detalle del mes. Doble clase a propósito: `.velo` se declara más abajo con la misma especificidad y ganaría el desempate por orden, dejando esta ventana DEBAJO de la que la abrió. */ .velo.velo-encima { z-index: 70; } /* ---------- cartera (quién nos debe) ---------- */ .cartera-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--crema); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; margin-top: 10px; } .cartera-total b { font-size: 1.3rem; color: var(--bronce); font-variant-numeric: tabular-nums; } .cartera-cli { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-top: 10px; background: var(--blanco); } .cartera-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .cartera-nom { font-weight: 700; } .cartera-saldo { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ambar); white-space: nowrap; } .cartera-saldo.a-favor { color: var(--verde); } .cartera-sub { font-size: 0.78rem; color: var(--gris); margin-top: 2px; } .cartera-seccion { margin-top: 16px; font-weight: 700; } .cartera-cli details { margin-top: 6px; } .cartera-cli summary { cursor: pointer; font-size: 0.8rem; color: var(--gris); } .cartera-movs { list-style: none; margin-top: 6px; font-size: 0.84rem; } .cartera-movs li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--crema); } .cartera-movs li:last-child { border-bottom: none; } .mov-cargo { color: var(--ambar); font-variant-numeric: tabular-nums; } .mov-abono { color: var(--verde); font-variant-numeric: tabular-nums; } .cartera-abono-btn { margin-top: 8px; width: 100%; } /* ---------- 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; } /* Los controles NO heredan la letra: el navegador les impone la suya (aquí salían en Arial, que no es la de nadie). Con esto la letra de la app llega también a botones, campos y desplegables — en el iPhone pasan a la de Apple y en el monitor a Inter, en vez del Arial suelto que desentonaba en las dos. */ button, input, select, textarea, optgroup { font-family: inherit; } textarea { 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; } /* el sueldo, por tramos: «desde tal mes gana tanto». Se lee como una historia —del más viejo al más nuevo—, así que va en filas, no en tarjetas sueltas. */ .nom-sueldos { border-top: 1px solid var(--borde); margin-top: 18px; padding-top: 14px; } .nom-sueldos .subtitulo { display: block; margin-bottom: 4px; } .nom-tramo { display: flex; align-items: baseline; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--borde); font-size: 0.9rem; } .nom-tramo:last-child { border-bottom: none; } .nom-tramo-mes { flex: 1; min-width: 190px; color: var(--gris); } .nom-tramo-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .nom-tramo button { padding: 0; font-size: 0.8rem; } /* la división a la vista, antes de guardar */ #nom-s-cuenta { margin-top: 6px; font-variant-numeric: tabular-nums; } #nom-s-horas-caja { max-width: 120px; } /* con qué se pagó cada mes, bajo el monto de la fila */ .nom-a-tarifa { color: var(--gris); font-size: 0.76rem; font-weight: 600; } .nom-sin-sueldo { color: var(--rojo); font-size: 0.76rem; font-weight: 600; } /* 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); } /* estados del expediente de impuestos */ .est-prep { background: #efe9dc; color: #6b5f45; } /* 📝 en preparación (neutro) */ .est-porpagar { background: #fbf0d5; color: #8a6d1e; } /* 💰 pide acción (ámbar) */ /* ---------- impuestos: año → meses (carpetas) → expedientes ---------- */ .imp-anios { margin: 4px 0 14px; } .imp-anios button { flex: 0 0 auto; min-width: 64px; padding: 8px 14px; } /* fila del desplegable de tipo de impuesto + botón "nuevo" (modal cargar impuesto) */ .imp-tipo-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .imp-tipo-fila select { flex: 1; margin-bottom: 0; } .imp-tipo-fila button { flex: none; padding: 9px 12px; white-space: nowrap; } .imp-tipo-fila .tipo-borrar { padding: 9px 10px; } .imp-mes { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.55); overflow: hidden; } .imp-mes[open] { box-shadow: var(--sombra-sm); } .imp-mes-cab { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 700; } .imp-mes-cab::-webkit-details-marker { display: none; } .imp-mes-cab::before { content: '▸'; color: var(--gris); margin-right: 6px; font-size: 0.8rem; transition: transform 0.15s ease; } .imp-mes[open] > .imp-mes-cab::before { transform: rotate(90deg); } .imp-mes-nom { color: var(--bronce); font-size: 1.02rem; flex: 1; } .imp-mes-meta { color: var(--gris); font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .imp-mes-cuerpo { padding: 4px 14px 14px; border-top: 1px solid var(--borde); } /* rejilla de expedientes: en el monitor se acomodan 2-3 por fila; en el celular, 1 */ .imp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; } .imp-exp { border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 10px; padding: 12px; background: var(--blanco); } .est-borde-enPreparacion { border-left-color: #c9bfa6; } .est-borde-porPagar { border-left-color: var(--ambar); } .est-borde-pagado { border-left-color: var(--verde); } .imp-exp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .imp-exp-monto { font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; } .imp-slots { list-style: none; margin: 10px 0 0; } .imp-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; } .imp-slot.sig { background: #fbf6ea; } /* pista suave del siguiente paso */ .imp-slot-nom { font-size: 0.86rem; color: var(--tinta); } .imp-slot.hecho .imp-slot-nom { color: var(--gris); } .imp-slot-ck { font-size: 0.9rem; } .imp-slot-acc { display: flex; flex-wrap: wrap; gap: 6px; } .imp-btn { background: none; border: 1px solid var(--borde); border-radius: 8px; padding: 4px 10px; font-size: 0.76rem; font-weight: 700; cursor: pointer; color: var(--bronce); } .imp-btn:hover { background: var(--crema); } .imp-btn.peligro { color: var(--rojo); border-color: var(--rojo); } .imp-exp-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); } .imp-docsmes { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--borde); } .imp-docsmes-tit { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris); } .imp-dm { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--borde); } .imp-dm:last-of-type { border-bottom: none; } .imp-dm-nom { font-size: 0.86rem; font-weight: 600; color: var(--tinta); } .imp-dm-ret { font-weight: 700; font-size: 0.8rem; color: var(--bronce); font-variant-numeric: tabular-nums; } /* el tipo guardado ya no existe en el catálogo (se borró): aviso suave, no un error */ .imp-dm-huerfano { color: var(--naranja, #b06000); font-weight: 700; font-size: 0.78rem; margin-left: 4px; } /* tarjeta "Retenciones a favor" */ .ret-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); } .ret-fila:last-child { border-bottom: none; } .ret-tipo { font-weight: 600; color: var(--tinta); } .ret-monto { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .ret-monto small { color: var(--gris); font-weight: 600; } .ret-total { margin-top: 2px; border-top: 2px solid var(--borde); border-bottom: none; font-weight: 800; } .ret-total span:last-child { color: var(--verde); font-variant-numeric: tabular-nums; } .imp-add { margin-top: 8px; } .imp-mes-pie { margin-top: 12px; } .imp-globales { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .imp-globales .secundario { flex: 1 1 auto; } /* 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%); } /* Qué se le retiene al proveedor AL PAGARLE. Va en una caja aparte del pie de la factura a propósito: las de arriba son las que el proveedor sugirió en su XML, éstas las decide Raíces. Se parecen demasiado como para dejarlas juntas. */ .facd-ret-caja { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 12px; } .facd-ret-tit { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--bronce); margin-bottom: 6px; } .facd-ret-linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 0.9rem; } .facd-ret-linea small { display: block; color: var(--gris); font-size: 0.76rem; font-weight: 400; } .facd-ret-linea strong { font-variant-numeric: tabular-nums; white-space: nowrap; } .facd-ret-linea.apagada { opacity: 0.72; } .facd-ret-no { color: var(--gris); font-size: 0.8rem; white-space: nowrap; } .facd-ret-neto { border-top: 1px solid var(--borde); margin-top: 4px; padding-top: 8px; font-weight: 700; } .facd-ret-dian { color: var(--gris); font-size: 0.84rem; } .facd-ret-pago { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--crema); border-left: 4px solid var(--verde-oscuro); font-size: 0.84rem; } .facd-ret-pago.entero { border-left-color: var(--ambar); } .facd-ret-ojo { color: var(--rojo); font-weight: 700; } .facd-ret-cuadra { color: var(--verde-oscuro); font-weight: 700; } /* ESCOGER LA ACTIVIDAD. El RUT da 4 dígitos y Bogotá usa 5, así que a veces hay dos actividades posibles con tarifas distintas. Se ven las dos completas —descripción oficial y tarifa— porque la decisión se toma leyéndolas; la escogida va marcada. */ .facd-act-caja { margin-top: 12px; } /* el rótulo y su explicación son dos frases, no una: sin esto salían pegadas («…en BogotáSu RUT dice 4663») */ .facd-act-caja > label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 2px; } .facd-act-caja > small { display: block; color: var(--gris); font-size: 0.8rem; line-height: 1.4; } .facd-act-ops { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; } .facd-act { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left; cursor: pointer; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); color: inherit; font: inherit; } .facd-act:hover:not(.puesta) { border-color: var(--bronce); background: var(--crema); } .facd-act.puesta { border-color: var(--verde-oscuro); border-width: 2px; padding: 7px 9px; background: var(--crema); cursor: default; } .facd-act[disabled] { opacity: 0.55; cursor: progress; } .facd-act-cod { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bronce); } .facd-act-nom { font-size: 0.84rem; line-height: 1.35; } .facd-act-tar { font-size: 0.8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .facd-act-regla { display: block; color: var(--gris); font-size: 0.76rem; line-height: 1.45; } .facd-act-regla em { font-style: normal; font-weight: 700; } @media (max-width: 560px) { .facd-act { grid-template-columns: auto auto; } .facd-act-nom { grid-column: 1 / -1; } } /* El doble del domingo: la propuesta va bajo su día, no escondida en otra pantalla. La barra de color de la izquierda dice de un vistazo en qué estado está. */ .fila-recargo > td { padding: 8px 12px; border-left: 4px solid var(--gold); background: var(--crema); } .fila-recargo.pendiente > td { border-left-color: var(--ambar); } .fila-recargo.aplicado > td { border-left-color: var(--verde-oscuro); } .fila-recargo.descartado > td { border-left-color: var(--borde); opacity: 0.72; } .rec-caja { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rec-texto { flex: 1; min-width: 240px; font-size: 0.86rem; } .rec-tipo { font-weight: 800; color: var(--bronce); } .rec-cuenta { color: var(--gris); margin-top: 2px; } .rec-nota { color: var(--gris); } .rec-falto { color: var(--rojo); } .rec-si { color: var(--verde-oscuro); } .rec-no { color: var(--rojo); } .rec-fallo { margin-top: 3px; font-weight: 700; } .rec-botones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rec-botones button { white-space: nowrap; } /* Corregir un día desde el estado de cuenta. El nombre del día es un botón, pero se ve como el texto que reemplazó: lo que invita a hacer clic es el subrayado al pasar. */ .dia-abrir { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .dia-abrir:hover { text-decoration: underline; } /* el «…» de lo que falta: ahí se ve el hueco, así que ahí se arregla */ .falta-marca { background: none; border: none; padding: 0 4px; margin: 0; font: inherit; color: var(--rojo); font-weight: 800; cursor: pointer; letter-spacing: 1px; } .falta-marca:hover { text-decoration: underline; } .fila-editar-dia > td { background: var(--crema); padding: 10px 12px; } .fila-editar-dia .fila-controles { margin-bottom: 0; margin-top: 8px; } .fila-editar-dia .fila-controles > div { max-width: 170px; } .fila-editar-dia .error { margin-top: 8px; } .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; } /* aviso de versión nueva (pestaña abierta desde antes del último deploy) */ .aviso-version { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .aviso-version button { flex: none; } /* aviso de push apagado en el menú principal (no invasivo, se cierra por una semana) */ .aviso-push { position: relative; padding: 14px 16px; } .ap-texto { padding-right: 20px; line-height: 1.4; } .ap-activar { margin-top: 10px; } .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; } /* la lista de días a los que se puede volver */ .resp-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--borde); font-size: 0.88rem; } .resp-fila:last-child { border-bottom: none; } .resp-que { display: flex; flex-direction: column; min-width: 0; } .resp-que small { color: var(--gris); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .resp-fila > button { flex: 0 0 auto; } /* la papelera: cada archivo con su cuenta atrás */ .pap-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--borde); font-size: 0.88rem; } .pap-fila:last-child { border-bottom: none; } .pap-que { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .pap-que small { color: var(--gris); font-size: 0.78rem; line-height: 1.35; } .pap-cuando { font-variant-numeric: tabular-nums; } /* el que se va hoy o mañana: última oportunidad de bajarlo */ .pap-fila.pap-urge .pap-cuando { color: var(--rojo); font-weight: 700; } .pap-acciones { display: flex; gap: 6px; flex: 0 0 auto; } .pap-acciones button { white-space: nowrap; } @media (max-width: 560px) { .pap-fila { flex-direction: column; align-items: stretch; } .pap-acciones { justify-content: flex-end; } } /* dos personas cuyo nombre se escribe igual para entrar: NINGUNA de las dos puede */ .emp-choca { margin-top: 3px; font-size: 0.74rem; font-weight: 700; color: var(--rojo); line-height: 1.3; } .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; } /* En un sudoku se toca cien veces por partida, y iOS pinta un destello azul del sistema —rgba(51,181,229,.4)— en cada toque de un botón. Con el teclado de números y las 81 celdas, eso hacía que el juego se sintiera de otra app. Se apaga en todo el tablero, incluido el menú y los ajustes. */ #sudoku-host button, #sudoku-menu button, #velo-sk-ajustes button, #velo-sk-tema button { -webkit-tap-highlight-color: transparent; } .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; } /* NUEVE PLACAS detrás de las celdas. Solo las usan las skins «Con aire» y «Elevada», que separan las cajas con espacio o con sombra en vez de con una raya. En las demás está en display:none y no pinta nada. */ .sk-cajas { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sk-cajas i { display: block; } .sk-cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; cursor: pointer; /* La celda es un