) se pinta ENCIMA de la foto real, porque .foto trae display:flex y le gana al [hidden] del navegador: cada tarjeta salía con la foto y, debajo, un vaso flotando. */ [hidden]{ display:none !important; } a{ color:var(--acento); text-decoration:none; } a:hover{ color:var(--acento-fuerte); } h1,h2,h3,h4{ line-height:1.2; font-weight:800; } h1.pagina{ font-size:22px; margin:4px 0 16px; } h2.seccion{ font-size:17px; margin:18px 0 10px; } small,.mini{ font-size:12.5px; color:var(--tinta-suave); } hr{ border:none; border-top:1px solid var(--linea); margin:14px 0; } ::selection{ background:var(--acento); color:#fff; } /* Iconos inline (tff_icon inyecta */ .switch{ position:relative; display:inline-block; width:48px; height:28px; flex:none; vertical-align:middle; } .switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; } .switch .bolita{ position:absolute; inset:0; border-radius:99px; background:var(--gris-suave); border:1px solid var(--linea); transition:background .2s ease, border-color .2s ease; } .switch .bolita::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; } .switch input:checked + .bolita{ background:var(--verde); border-color:var(--verde); } .switch input:checked + .bolita::after{ transform:translateX(20px); } .switch input:focus-visible + .bolita{ box-shadow:0 0 0 3px var(--acento-suave); } .switch.grande{ width:62px; height:34px; } .switch.grande .bolita::after{ width:26px; height:26px; } .switch.grande input:checked + .bolita::after{ transform:translateX(28px); } /* ------------------------------------------------------------ 7. TARJETAS Y ESTADÍSTICAS ------------------------------------------------------------ */ .tarjeta{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); padding:16px; box-shadow:var(--sombra); } .tarjeta-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .tarjeta-cab h3{ font-size:15.5px; display:flex; align-items:center; gap:8px; } .fila-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px; } .stat{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); padding:14px 16px; box-shadow:var(--sombra); } .stat .k{ font-size:11.5px; color:var(--tinta-suave); font-weight:700; text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; } .stat .v{ font-size:26px; font-weight:800; margin-top:4px; } .stat .v.acento{ color:var(--acento); } /* ------------------------------------------------------------ 8. TABLAS ------------------------------------------------------------ */ table.lista{ width:100%; border-collapse:collapse; } table.lista th{ font-size:11.5px; color:var(--tinta-suave); text-transform:uppercase; letter-spacing:.5px; text-align:left; padding:10px 12px; border-bottom:1px solid var(--linea); font-weight:700; } table.lista td{ padding:12px; border-bottom:1px solid var(--linea); font-size:14px; vertical-align:middle; } table.lista tr:last-child td{ border-bottom:none; } table.lista tbody tr{ transition:background .12s; } table.lista tbody tr:hover{ background:var(--superficie-2); } table.lista tr.clicable{ cursor:pointer; } table.lista .num{ text-align:right; font-variant-numeric:tabular-nums; } /* ------------------------------------------------------------ 9. BADGES DE ESTADO ------------------------------------------------------------ */ .badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700; white-space:nowrap; } .badge.nueva,.badge.confirmada{ background:var(--azul-suave); color:var(--azul); } .badge.preparando { background:var(--ambar-suave); color:var(--ambar); } .badge.lista { background:var(--verde-suave); color:var(--verde); } .badge.entregada { background:var(--gris-suave); color:var(--tinta-suave); } .badge.cancelada { background:var(--rojo-suave); color:var(--rojo); } .badge.pagada,.badge.ok,.badge.configurado{ background:var(--verde-suave); color:var(--verde); } .badge.pendiente { background:var(--ambar-suave); color:var(--ambar); } .badge.off,.badge.inactivo { background:var(--gris-suave); color:var(--tinta-suave); } .badge.canal { background:var(--caramel-suave); color:var(--caramel); } .badge.acento { background:var(--acento-suave); color:var(--acento); } /* Punto de estado (canal ON/OFF, en vivo) */ .punto{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--verde); flex:none; } .punto.off{ background:var(--gris); } .punto.vivo{ background:var(--rojo); animation:tff-parpadeo 1.3s infinite; } /* ------------------------------------------------------------ 10. AVISOS ------------------------------------------------------------ */ .aviso{ display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--radio); background:var(--verde-suave); border:1px solid rgba(22,163,74,.28); color:var(--verde); font-weight:600; font-size:13.5px; margin-bottom:14px; } .aviso.err{ background:var(--rojo-suave); border-color:rgba(220,38,38,.30); color:var(--rojo); } .aviso.warn{ background:var(--ambar-suave); border-color:rgba(217,119,6,.30); color:var(--ambar); } .aviso.info{ background:var(--azul-suave); border-color:rgba(37,99,235,.28); color:var(--azul); } .aviso .icono{ margin-top:1px; } /* ------------------------------------------------------------ 11. MODALES Markup: Se abren con TFF.modal.abrir('modal-x') (clase .abierto). ------------------------------------------------------------ */ .modal-fondo{ position:fixed; inset:0; z-index:100; background:rgba(23,18,18,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:18px; } .modal-fondo.abierto{ display:flex; animation:tff-aparecer .18s ease; } .modal{ background:var(--superficie); border-radius:var(--radio-g); width:100%; max-width:460px; max-height:92vh; overflow:auto; box-shadow:var(--sombra-g); padding:20px; animation:tff-subir .2s ease; } .modal.ancho{ max-width:680px; } .modal-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .modal-cab h3{ font-size:17px; } .modal-pie{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; } .modal-cerrar{ background:var(--superficie-2); border:none; cursor:pointer; width:34px; height:34px; border-radius:50%; color:var(--tinta-suave); display:inline-flex; align-items:center; justify-content:center; font:inherit; } .modal-cerrar:hover{ background:var(--rojo-suave); color:var(--rojo); } body.sin-scroll{ overflow:hidden; } /* ------------------------------------------------------------ 12. ENCABEZADO COMPARTIDO (order + admin) Y MARCA ------------------------------------------------------------ */ .topbar{ background:var(--superficie); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:50; height:var(--h-topbar); } .topbar-in{ max-width:var(--ancho-max); margin:0 auto; height:100%; padding:0 16px; display:flex; align-items:center; gap:14px; } .marca{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--tinta); } .marca img,.marca svg{ height:40px; width:auto; } .marca .t1{ font-weight:800; font-size:15.5px; line-height:1.1; white-space:nowrap; } .marca .t2{ font-size:11.5px; color:var(--tinta-suave); white-space:nowrap; } .topbar .acciones{ margin-left:auto; display:flex; align-items:center; gap:8px; } /* Botón carrito con badge numérico */ .btn-carrito{ position:relative; } .badge-carrito{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:var(--acento); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--superficie); transition:transform .15s ease; } .badge-carrito.vacio{ display:none; } .badge-carrito.pulso{ animation:tff-pop .25s ease; } /* Botón tema (luna/sol): muestra un icono según el tema activo */ [data-accion="tema"] .icono-luna{ display:inline-flex; } [data-accion="tema"] .icono-sol{ display:none; } [data-tema="oscuro"] [data-accion="tema"] .icono-luna, .oscuro [data-accion="tema"] .icono-luna{ display:none; } [data-tema="oscuro"] [data-accion="tema"] .icono-sol, .oscuro [data-accion="tema"] .icono-sol{ display:inline-flex; } /* Reloj (elementos [data-reloj]) */ .reloj{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinta-suave); white-space:nowrap; } /* ------------------------------------------------------------ 13. ORDER — estilo app McDonald's (mobile-first) ------------------------------------------------------------ */ /* Hero de la landing */ .hero{ background:linear-gradient(150deg, var(--espresso) 0%, #47302a 60%, var(--crimson-osc) 130%); color:var(--vanilla); border-radius:var(--radio-g); padding:40px 24px; text-align:center; margin:16px 0; } .hero h1{ font-size:clamp(26px,5.5vw,38px); margin-bottom:8px; } .hero p{ color:var(--mist); opacity:.9; margin-bottom:18px; } .hero .btn{ background:var(--vanilla); color:var(--espresso); } .hero .btn:hover{ background:#fff; } .hero .horario{ margin-top:16px; font-size:13px; opacity:.85; display:flex; align-items:center; justify-content:center; gap:6px; } /* Grid de productos */ .grid-productos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; padding:14px 0 90px; align-items:start; } .tarjeta-producto{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra); cursor:pointer; position:relative; transition:transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; text-decoration:none; color:var(--tinta); } .tarjeta-producto:hover{ transform:translateY(-2px); box-shadow:var(--sombra-g); color:var(--tinta); } .tarjeta-producto .foto{ width:100%; object-fit:cover; background:var(--mist); display:flex; align-items:center; justify-content:center; color:var(--caramel); } .tarjeta-producto img.foto{ aspect-ratio:4/3; } /* foto real de Square */ .tarjeta-producto div.foto{ aspect-ratio:auto; height:92px; } /* sin foto: solo el icono, compacto (evita el espacio vacío grande) */ /* ---- Fotos del menú de order: el VASO COMPLETO ------------------------------- Las fotos de TFF son vasos de pie, altos y con el fondo transparente (~0.59 de ancho por alto). En un recuadro apaisado con object-fit:cover el vaso se rebanaba por arriba y por abajo y el sabor no se veía. Recuadro vertical + contain = se ve el vaso entero, centrado, sobre crema de la marca. Solo en order (el kiosko y el POS mantienen su rejilla compacta de siempre). */ body.front-order .tarjeta-producto .foto{ aspect-ratio:4/5; height:auto; background:linear-gradient(160deg,#FFFFFF 0%,var(--mist) 100%); padding:6px; } body.front-order .tarjeta-producto img.foto{ object-fit:contain; } body.front-order .tarjeta-producto .info{ padding-right:46px; } /* que el + no pise el precio */ [data-tema="oscuro"] body.front-order .tarjeta-producto .foto, .oscuro body.front-order .tarjeta-producto .foto{ background:linear-gradient(160deg,var(--superficie) 0%,var(--superficie-2) 100%); } .oscuro .tarjeta-producto .foto, [data-tema="oscuro"] .tarjeta-producto .foto{ background:var(--superficie-2); } .tarjeta-producto .info{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; } .tarjeta-producto .nombre{ font-weight:700; font-size:14px; line-height:1.25; } .tarjeta-producto .precio{ font-weight:800; color:var(--acento); margin-top:auto; } .tarjeta-producto .btn-mas{ position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%; background:var(--acento); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra); transition:background .15s, transform .1s; } .tarjeta-producto .btn-mas:hover{ background:var(--acento-fuerte); transform:scale(1.08); } .tarjeta-producto.agotado{ opacity:.55; pointer-events:none; } .tarjeta-producto .cinta-agotado{ position:absolute; top:10px; left:10px; background:var(--espresso); color:var(--vanilla); font-size:11px; font-weight:800; padding:4px 10px; border-radius:99px; } /* Encabezado de categoría dentro del menú */ .cat-titulo{ font-size:18px; font-weight:800; margin:22px 0 4px; display:flex; align-items:center; gap:8px; scroll-margin-top:calc(var(--h-topbar) + 62px); } /* Página de producto (detalle) */ .producto-detalle{ max-width:640px; margin:0 auto; padding-bottom:110px; } .producto-detalle .foto-grande{ width:100%; aspect-ratio:4/5; max-height:54vh; object-fit:contain; border-radius:var(--radio-g); box-shadow:var(--sombra); padding:10px; background:linear-gradient(160deg,#FFFFFF 0%,var(--mist) 100%); } [data-tema="oscuro"] .producto-detalle .foto-grande, .oscuro .producto-detalle .foto-grande{ background:linear-gradient(160deg,var(--superficie) 0%,var(--superficie-2) 100%); } /* Tamaño único (un solo vaso): se dice al lado del precio, sin hacer elegir */ .producto-detalle .tam-unico{ display:inline-block; margin-left:8px; padding:3px 10px; border-radius:99px; background:var(--caramel-suave); color:var(--caramel); font-size:12px; font-weight:800; vertical-align:middle; } .producto-detalle h1{ font-size:24px; margin:16px 0 4px; } .producto-detalle .precio-base{ font-size:20px; font-weight:800; color:var(--acento); } .producto-detalle .desc{ color:var(--tinta-suave); margin:8px 0 4px; } /* Grupos de modificadores */ .grupo-mod{ margin-top:18px; } .grupo-mod .grupo-cab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } .grupo-mod .grupo-cab h3{ font-size:15px; } .grupo-mod .req{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; background:var(--acento-suave); color:var(--acento); padding:3px 9px; border-radius:99px; } .opcion-mod{ display:flex; align-items:center; gap:12px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .12s, background .12s; } .opcion-mod:hover{ border-color:var(--caramel); } .opcion-mod:has(input:checked){ border-color:var(--acento); background:var(--acento-suave); } .opcion-mod .nombre{ flex:1; font-weight:600; } .opcion-mod .extra{ font-weight:700; color:var(--tinta-suave); font-size:13px; } /* Control de cantidad − n + */ .cantidad-control{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--linea); border-radius:99px; background:var(--superficie); overflow:hidden; } .cantidad-control button{ width:42px; height:42px; border:none; background:transparent; cursor:pointer; font-size:20px; font-weight:800; color:var(--acento); display:flex; align-items:center; justify-content:center; } .cantidad-control button:hover{ background:var(--acento-suave); } .cantidad-control .num{ min-width:44px; text-align:center; font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; } /* Barra inferior fija del carrito */ .barra-carrito{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--superficie); border-top:1px solid var(--linea); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(42,30,26,.10); } .barra-carrito .btn{ max-width:560px; margin:0 auto; display:flex; width:100%; justify-content:space-between; padding:14px 20px; font-size:16px; border-radius:var(--radio-g); } /* Líneas del carrito / checkout */ .linea-carrito{ display:flex; gap:12px; align-items:flex-start; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); padding:12px 14px; margin-bottom:10px; } .linea-carrito .foto{ width:58px; height:58px; border-radius:var(--radio); flex:none; padding:3px; object-fit:contain; /* el vaso entero, igual que en el menú */ background:linear-gradient(160deg,#FFFFFF 0%,var(--mist) 100%); } [data-tema="oscuro"] .linea-carrito .foto, .oscuro .linea-carrito .foto{ background:var(--superficie-2); } .linea-carrito .det{ flex:1; min-width:0; } .linea-carrito .det .nombre{ font-weight:700; } .linea-carrito .det .mods{ font-size:12.5px; color:var(--tinta-suave); } .linea-carrito .det .nota{ font-size:12.5px; color:var(--caramel); font-style:italic; } .linea-carrito .precio{ font-weight:800; white-space:nowrap; } /* Totales (carrito, checkout, ticket) */ .totales{ margin-top:14px; } .totales .fila-total{ display:flex; justify-content:space-between; padding:4px 0; font-size:14.5px; color:var(--tinta-suave); } .totales .fila-total.grande{ font-size:18px; font-weight:800; color:var(--tinta); border-top:1px solid var(--linea); margin-top:8px; padding-top:10px; } /* Métodos de pago (checkout) */ .metodo-pago{ display:flex; align-items:center; gap:14px; background:var(--superficie); border:2px solid var(--linea); border-radius:var(--radio-g); padding:16px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s; } .metodo-pago:has(input:checked){ border-color:var(--acento); background:var(--acento-suave); } .metodo-pago .icono{ color:var(--acento); } .metodo-pago .det{ flex:1; } .metodo-pago .det .nombre{ font-weight:700; } .metodo-pago .det .desc{ font-size:12.5px; color:var(--tinta-suave); } /* Confirmación de orden */ .confirmacion{ max-width:480px; margin:0 auto; text-align:center; padding:36px 16px; } .confirmacion .sello{ width:76px; height:76px; margin:0 auto 16px; border-radius:50%; background:var(--verde-suave); color:var(--verde); display:flex; align-items:center; justify-content:center; } .confirmacion .numero-orden{ font-size:clamp(56px,18vw,88px); font-weight:800; color:var(--acento); line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; } .confirmacion .estimado{ font-size:15px; color:var(--tinta-suave); margin:10px 0 22px; display:flex; align-items:center; justify-content:center; gap:6px; } /* Pantalla "estamos cerrados" */ .pantalla-cerrada{ max-width:440px; margin:8vh auto; text-align:center; padding:20px; } .pantalla-cerrada .icono-grande{ color:var(--caramel); margin-bottom:14px; display:flex; justify-content:center; } .pantalla-cerrada h1{ font-size:24px; margin-bottom:8px; } .pantalla-cerrada p{ color:var(--tinta-suave); } /* ------------------------------------------------------------ 14. KIOSKO — táctil, todo grande (botones >= 64px) ------------------------------------------------------------ */ body.kiosko{ font-size:18px; overflow-x:hidden; } body.kiosko .btn{ min-height:64px; font-size:19px; padding:16px 28px; border-radius:var(--radio-g); } body.kiosko .chip{ min-height:56px; padding:12px 24px; font-size:17px; } body.kiosko input,body.kiosko select,body.kiosko textarea{ min-height:60px; font-size:19px; } body.kiosko .cantidad-control button{ width:64px; height:64px; font-size:26px; } body.kiosko .cantidad-control .num{ min-width:60px; font-size:22px; } body.kiosko .opcion-mod{ padding:18px; min-height:64px; } body.kiosko .opcion-mod input[type=checkbox],body.kiosko .opcion-mod input[type=radio]{ width:26px; height:26px; } body.kiosko .tarjeta-producto .btn-mas{ width:52px; height:52px; } body.kiosko .grid-productos{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; } /* Pantallas del flujo (SPA): [data-pantalla] las alterna TFF.kiosko */ .kiosko-pantalla{ display:none; min-height:100vh; } .kiosko-pantalla.activa{ display:block; animation:tff-aparecer .2s ease; } /* Pantalla de descanso */ .kiosko-descanso{ position:fixed; inset:0; z-index:90; background:radial-gradient(120% 120% at 50% 0%, #47302a 0%, var(--espresso) 55%, #171212 100%); color:var(--vanilla); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; text-align:center; cursor:pointer; padding:24px; } .kiosko-descanso .logo-latido{ width:min(46vw,340px); animation:tff-latido 2.6s ease-in-out infinite; } .kiosko-descanso h1{ font-size:clamp(30px,6vw,52px); } .kiosko-descanso p{ font-size:clamp(16px,2.6vw,22px); opacity:.85; } .kiosko-descanso .toque{ margin-top:8px; padding:20px 44px; border-radius:99px; background:var(--crimson); color:#fff; font-weight:800; font-size:clamp(18px,3vw,26px); box-shadow:0 10px 40px rgba(171,30,35,.5); animation:tff-flotar 2.6s ease-in-out infinite; } /* Layout kiosko con carrito lateral visible */ .kiosko-main{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; padding:16px; min-height:calc(100vh - var(--h-topbar)); } .kiosko-carrito{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); box-shadow:var(--sombra); padding:16px; position:sticky; top:calc(var(--h-topbar) + 16px); height:fit-content; max-height:calc(100vh - var(--h-topbar) - 32px); display:flex; flex-direction:column; } .kiosko-carrito .lineas{ overflow-y:auto; flex:1; margin:8px 0; } /* Número de orden GIGANTE al final */ .kiosko-numero{ font-size:clamp(110px,26vw,220px); font-weight:800; color:var(--acento); line-height:1; letter-spacing:-4px; font-variant-numeric:tabular-nums; text-align:center; } /* Aviso de auto-reinicio (cuenta regresiva) */ .kiosko-reinicio{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--espresso); color:var(--vanilla); padding:12px 22px; border-radius:99px; font-weight:700; z-index:95; box-shadow:var(--sombra-g); display:flex; align-items:center; gap:8px; } /* ------------------------------------------------------------ 15. POS — estilo Square Restaurants ------------------------------------------------------------ */ body.pos{ overflow:hidden; height:100vh; } body.pos.con-scroll{ overflow:auto; height:auto; } /* Login por PIN */ .pos-login{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:20px; } .pos-login .marca img,.pos-login .marca svg{ height:64px; } .pos-login h1{ font-size:20px; color:var(--tinta-suave); font-weight:700; } /* Puntos del PIN */ .pin-puntos{ display:flex; gap:14px; height:22px; align-items:center; justify-content:center; } .pin-puntos .punto-pin{ width:16px; height:16px; border-radius:50%; border:2px solid var(--linea); background:transparent; transition:background .12s, border-color .12s; } .pin-puntos .punto-pin.lleno{ background:var(--acento); border-color:var(--acento); } .pin-puntos.error .punto-pin{ border-color:var(--rojo); animation:tff-sacudir .3s ease; } /* Teclado PIN (lo genera TFF.pin) */ .teclado-pin{ display:grid; grid-template-columns:repeat(3,86px); gap:12px; } .teclado-pin button{ width:86px; height:72px; border-radius:var(--radio-g); border:1px solid var(--linea); background:var(--superficie); font-size:26px; font-weight:700; color:var(--tinta); cursor:pointer; box-shadow:var(--sombra); transition:background .12s, transform .06s; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } .teclado-pin button:hover{ background:var(--superficie-2); } .teclado-pin button:active{ transform:scale(.95); } .teclado-pin button.tecla-borrar{ color:var(--tinta-suave); } .teclado-pin button.tecla-entrar{ background:var(--verde); border-color:var(--verde); color:#fff; } .teclado-pin button.tecla-entrar:hover{ background:#12813B; } /* Banda superior del POS */ .pos-banda{ height:56px; background:var(--superficie); border-bottom:1px solid var(--linea); display:flex; align-items:center; gap:14px; padding:0 14px; } .pos-banda .empleado{ display:flex; align-items:center; gap:8px; font-weight:700; } .pos-banda .empleado .avatar{ width:34px; height:34px; border-radius:50%; background:var(--acento); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; } .pos-banda .acciones{ margin-left:auto; display:flex; align-items:center; gap:8px; } /* Grid principal 70/30 */ .pos-main{ display:grid; grid-template-columns:minmax(0,7fr) minmax(340px,3fr); height:calc(100vh - 56px); overflow:hidden; } .pos-izq{ display:flex; flex-direction:column; overflow:hidden; background:var(--fondo); } .pos-cats{ display:flex; gap:8px; overflow-x:auto; padding:12px 14px 8px; scrollbar-width:none; flex:none; } .pos-cats::-webkit-scrollbar{ display:none; } .pos-productos{ flex:1; overflow-y:auto; padding:8px 14px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; align-content:start; grid-auto-rows:min-content; align-items:start; } .pos-prod{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio); padding:0; overflow:hidden; cursor:pointer; text-align:left; box-shadow:var(--sombra); transition:transform .1s, border-color .1s; display:flex; flex-direction:column; font:inherit; color:var(--tinta); min-height:0; -webkit-tap-highlight-color:transparent; } .pos-prod:hover{ border-color:var(--acento); transform:translateY(-1px); } .pos-prod:active{ transform:scale(.97); } .pos-prod .foto{ width:100%; height:74px; flex:none; object-fit:cover; background:var(--mist); } .pos-prod .det{ padding:8px 10px; display:flex; flex-direction:column; gap:2px; flex:1; } .pos-prod .nombre{ font-size:12.5px; font-weight:700; line-height:1.2; } .pos-prod .precio{ font-size:12.5px; font-weight:800; color:var(--acento); margin-top:auto; } .pos-prod.agotado{ opacity:.45; pointer-events:none; } /* Ticket (columna derecha) */ .pos-ticket{ background:var(--superficie); border-left:1px solid var(--linea); display:flex; flex-direction:column; overflow:hidden; } .pos-ticket .ticket-cab{ padding:12px 14px; border-bottom:1px solid var(--linea); flex:none; } .pos-ticket .cliente{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; background:var(--superficie-2); border-radius:var(--radio); padding:9px 12px; cursor:pointer; } .pos-ticket .cliente:hover{ background:var(--acento-suave); color:var(--acento); } .ticket-lineas{ flex:1; overflow-y:auto; padding:8px 10px; } .ticket-linea{ display:flex; gap:10px; align-items:flex-start; padding:10px 8px; border-radius:var(--radio); cursor:pointer; transition:background .1s; } .ticket-linea:hover{ background:var(--superficie-2); } .ticket-linea .cant{ min-width:28px; height:28px; padding:0 6px; border-radius:8px; background:var(--acento-suave); color:var(--acento); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; } .ticket-linea .det{ flex:1; min-width:0; } .ticket-linea .det .nombre{ font-weight:700; font-size:13.5px; } .ticket-linea .det .mods{ font-size:11.5px; color:var(--tinta-suave); } .ticket-linea .det .nota{ font-size:11.5px; color:var(--caramel); font-style:italic; } .ticket-linea .precio{ font-weight:800; font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums; } .ticket-linea .linea-quitar{ flex:none; width:24px; height:24px; border-radius:50%; border:none; cursor:pointer; background:var(--gris-suave); color:var(--tinta-suave); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; margin-top:1px; transition:background .12s, color .12s; } .ticket-linea .linea-quitar:hover{ background:var(--rojo-suave); color:var(--rojo); } .ticket-vacio{ text-align:center; color:var(--tinta-suave); padding:40px 14px; } .ticket-vacio .icono{ color:var(--linea); margin-bottom:8px; } .pos-ticket .ticket-pie{ border-top:1px solid var(--linea); padding:12px 14px; flex:none; background:var(--superficie); } .pos-ticket .ticket-pie .totales{ margin:0 0 10px; } .ticket-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .ticket-acciones .btn{ padding:12px 8px; font-size:13px; } .ticket-acciones .btn.cobrar{ grid-column:1 / -1; padding:15px; font-size:17px; } /* Modal de cobro */ .cobro-metodos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .cobro-metodos .btn{ flex-direction:column; gap:6px; padding:16px 10px; font-size:13.5px; } .cobro-total-grande{ text-align:center; font-size:clamp(34px,8vw,44px); font-weight:800; margin:6px 0 14px; font-variant-numeric:tabular-nums; } .cobro-cambio{ display:flex; justify-content:space-between; align-items:center; background:var(--verde-suave); color:var(--verde); border-radius:var(--radio); padding:12px 16px; font-weight:800; font-size:18px; margin-top:10px; font-variant-numeric:tabular-nums; } .cobro-cambio.falta{ background:var(--ambar-suave); color:var(--ambar); } .montos-rapidos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .montos-rapidos .chip{ font-variant-numeric:tabular-nums; } /* Pantalla de éxito tras cobrar */ .pantalla-exito{ position:fixed; inset:0; z-index:110; background:var(--verde); color:#fff; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:20px; } .pantalla-exito.abierta{ display:flex; animation:tff-aparecer .2s ease; } .pantalla-exito .monto{ font-size:clamp(44px,10vw,72px); font-weight:800; font-variant-numeric:tabular-nums; } .pantalla-exito .btn{ background:#fff; color:var(--verde); } /* ------------------------------------------------------------ 16. ADMIN — sidebar estilo Square Dashboard ------------------------------------------------------------ */ .admin-layout{ display:grid; grid-template-columns:var(--ancho-sidebar) minmax(0,1fr); min-height:100vh; } .sidebar{ background:var(--superficie); border-right:1px solid var(--linea); padding:16px 12px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto; } .sidebar .marca{ padding:4px 8px 14px; border-bottom:1px solid var(--linea); margin-bottom:10px; } .sidebar .nav-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radio); color:var(--tinta-suave); font-weight:600; font-size:14px; transition:background .12s, color .12s; text-decoration:none; } .sidebar .nav-item:hover{ background:var(--superficie-2); color:var(--tinta); } .sidebar .nav-item.on{ background:var(--acento-suave); color:var(--acento); font-weight:700; } .sidebar .nav-pie{ margin-top:auto; border-top:1px solid var(--linea); padding-top:10px; } .admin-main{ padding:20px 22px 60px; max-width:1100px; } /* Tarjeta-toggle grande por canal */ .toggle-canal{ display:flex; align-items:center; gap:14px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-g); padding:16px 18px; box-shadow:var(--sombra); margin-bottom:10px; } .toggle-canal .icono{ color:var(--acento); } .toggle-canal .det{ flex:1; min-width:0; } .toggle-canal .det .nombre{ font-weight:800; font-size:15.5px; } .toggle-canal .det .desc{ font-size:12.5px; color:var(--tinta-suave); } /* Tarjetas de integraciones */ .grid-tarjetas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; } .tarjeta-api .tarjeta-cab .icono{ color:var(--acento); } /* Login admin centrado */ .login-caja{ max-width:380px; margin:10vh auto; } .login-caja .marca{ justify-content:center; margin-bottom:18px; } /* ------------------------------------------------------------ 17. RECIBO + IMPRESIÓN ------------------------------------------------------------ */ .recibo{ font-family:"Courier New",ui-monospace,monospace; background:#fff; color:#111; border:1px solid var(--linea); border-radius:var(--radio-g); padding:20px; max-width:360px; margin:0 auto; } .oscuro .recibo, [data-tema="oscuro"] .recibo{ border-color:#4a3b33; } .recibo .centro{ text-align:center; } .recibo .sep{ border-top:1.5px dashed #9a9a9a; margin:10px 0; } .recibo .fila-r{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:2px 0; } .recibo .grande{ font-size:16px; font-weight:800; } .recibo .titulo{ font-size:15px; font-weight:800; letter-spacing:1px; } @media print{ @page{ margin:6mm; } body{ background:#fff !important; color:#000 !important; } body *{ visibility:hidden; } .recibo,.recibo *,.imprimible,.imprimible *{ visibility:visible; } .recibo,.imprimible{ position:absolute; left:0; top:0; width:100%; border:none !important; box-shadow:none !important; border-radius:0 !important; max-width:none; } .no-imprimir{ display:none !important; } } /* ------------------------------------------------------------ 18. RESPONSIVE ------------------------------------------------------------ */ @media (max-width:1000px){ .pos-main{ grid-template-columns:minmax(0,3fr) minmax(300px,2fr); } .kiosko-main{ grid-template-columns:1fr; } .kiosko-carrito{ position:static; max-height:none; } } @media (max-width:820px){ /* Admin: el sidebar pasa a barra superior horizontal */ .admin-layout{ grid-template-columns:1fr; } .sidebar{ position:sticky; top:0; z-index:50; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:8px 10px; border-right:none; border-bottom:1px solid var(--linea); } .sidebar .marca{ border:none; margin:0; padding:0 8px 0 0; } .sidebar .marca .t1,.sidebar .marca .t2{ display:none; } .sidebar .nav-item{ white-space:nowrap; padding:8px 10px; font-size:13px; } .sidebar .nav-pie{ margin:0; border:none; padding:0; } .admin-main{ padding:14px 12px 50px; } /* POS en pantalla angosta: columnas apiladas */ body.pos{ overflow:auto; height:auto; } .pos-main{ grid-template-columns:1fr; height:auto; overflow:visible; } .pos-izq{ overflow:visible; } .pos-productos{ overflow:visible; } .pos-ticket{ border-left:none; border-top:1px solid var(--linea); } .ticket-lineas{ max-height:40vh; } } @media (max-width:560px){ .cont{ padding:12px 12px 80px; } .grid-productos{ grid-template-columns:repeat(2,1fr); gap:10px; } .marca .t2{ display:none; } .fila-stats{ grid-template-columns:repeat(2,1fr); } .teclado-pin{ grid-template-columns:repeat(3,minmax(72px,86px)); gap:10px; } .teclado-pin button{ width:auto; } .modal{ padding:16px; } .cobro-metodos{ grid-template-columns:1fr 1fr; } body.kiosko .grid-productos{ grid-template-columns:repeat(2,1fr); } } /* ------------------------------------------------------------ 19. ANIMACIONES Y ACCESIBILIDAD ------------------------------------------------------------ */ @keyframes tff-aparecer{ from{ opacity:0; } to{ opacity:1; } } @keyframes tff-subir{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @keyframes tff-pop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.35); } 100%{ transform:scale(1); } } @keyframes tff-latido{ 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.05); } 24%{ transform:scale(1); } 36%{ transform:scale(1.04); } 48%{ transform:scale(1); } } @keyframes tff-flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } @keyframes tff-parpadeo{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } } @keyframes tff-sacudir{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } } :focus-visible{ outline:2px solid var(--acento); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============================================================ 20. ALINEACIÓN — clases reales de core/diseno.php (secciones que el HTML usa y faltaban en las reglas de arriba) ============================================================ */ /* ---- Marca (logo + textos) en todas las topbars ---- */ .logo-img{ display:block; width:40px; height:40px; border-radius:50%; } .marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta); } .marca-txt{ display:flex; flex-direction:column; line-height:1.15; } .marca-txt .t1{ font-weight:800; font-size:15px; color:var(--tinta); } .marca-txt .t2{ font-size:11.5px; color:var(--tinta-suave); } /* ---- Topbar variantes + subnav (order) ---- */ .topbar-in{ display:flex; align-items:center; gap:14px; max-width:var(--ancho-max); margin:0 auto; padding:0 18px; height:var(--h-topbar); } .topbar-in.centrada{ justify-content:center; } .topbar .acciones{ margin-left:auto; display:flex; align-items:center; gap:10px; } .subnav{ background:var(--superficie); border-bottom:1px solid var(--linea); } .subnav, .subnav a{ font-size:14px; } .subnav{ display:flex; gap:4px; align-items:center; max-width:var(--ancho-max); margin:0 auto; padding:6px 14px; overflow-x:auto; } .subnav a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 14px; border-radius:999px; color:var(--tinta); text-decoration:none; font-weight:600; } .subnav a:hover{ background:var(--superficie-2); } .subnav a.on{ background:var(--acento-suave); color:var(--acento); } .buscador-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--tinta-suave); pointer-events:none; } .btn-carrito{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; color:var(--tinta); text-decoration:none; border:1px solid var(--linea); background:var(--superficie); } .btn-carrito:hover{ background:var(--superficie-2); } .btn-carrito.on{ border-color:var(--acento); color:var(--acento); } .btn-carrito .badge{ position:absolute; top:-5px; right:-5px; background:var(--acento); color:#fff; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; padding:0 4px; } /* ---- Ligas de acción (POS / admin pie) ---- */ .btn-liga{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radio-ch); color:var(--tinta); text-decoration:none; font-weight:600; font-size:14px; } .btn-liga:hover{ background:var(--superficie-2); } .btn-liga.on{ background:var(--acento-suave); color:var(--acento); } .btn-salir{ color:var(--rojo); } .btn-salir:hover{ background:var(--rojo-suave); } .pos-quien,.pos-reloj{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--tinta); font-weight:600; } .pos-reloj{ color:var(--tinta-suave); font-variant-numeric:tabular-nums; } .tag-gerente{ background:var(--ambar-suave); color:var(--ambar); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; } .quien{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--tinta-suave); padding:6px 8px; } /* ---- Layout ADMIN (shell + sidebar reales) ---- */ .admin-shell{ display:grid; grid-template-columns:var(--ancho-sidebar) minmax(0,1fr); min-height:100vh; background:var(--fondo); } .admin-shell .sidebar{ grid-column:1; } .admin-main{ grid-column:2; min-width:0; display:flex; flex-direction:column; } .sidebar-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; } .sidebar-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radio); color:var(--tinta); text-decoration:none; font-weight:600; font-size:14px; } .sidebar-nav a:hover{ background:var(--superficie-2); } .sidebar-nav a.on{ background:var(--acento-suave); color:var(--acento); font-weight:700; } .sidebar-pie{ margin-top:auto; border-top:1px solid var(--linea); padding-top:10px; display:flex; flex-direction:column; gap:4px; } .topbar-admin{ position:sticky; top:0; z-index:20; background:var(--superficie); border-bottom:1px solid var(--linea); } .topbar-admin .topbar-in{ max-width:none; } .topbar-admin .t1{ font-weight:700; font-size:15px; } .btn-hamb{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radio-ch); border:1px solid var(--linea); background:var(--superficie); color:var(--tinta); cursor:pointer; } /* ---- Pantalla vacía amable ---- */ .vacia{ text-align:center; padding:56px 24px; max-width:560px; margin:40px auto; } .vacia-ico{ color:var(--tinta-suave); margin-bottom:12px; display:flex; justify-content:center; } .vacia h1{ font-size:20px; margin-bottom:6px; } .vacia p{ color:var(--tinta-suave); } /* ---- Responsive del admin real ---- */ @media (max-width: 920px){ .admin-shell{ grid-template-columns:1fr; } .admin-shell .sidebar{ position:fixed; inset:0 auto 0 0; width:264px; z-index:60; transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--sombra-g); height:100vh; } .admin-shell .sidebar.abierta{ transform:none; } .admin-main{ grid-column:1; } .btn-hamb{ display:inline-flex; } } /* ------------------------------------------------------------ 21. LOGO HORIZONTAL OFICIAL (marca TFF: símbolo + texto) ------------------------------------------------------------ */ /* Base: en los headers (order/kiosko/pos/admin) */ .logo-h{ height:34px; width:auto; display:block; } .marca .logo-h{ height:34px; } /* vence a .marca img (40px) */ /* Etiqueta contextual junto al logo (POS, · Kiosco) */ .marca-sub,.topbar-kiosko .t1{ font-size:14px; font-weight:700; color:var(--tinta-suave); white-space:nowrap; } /* Admin: sidebar en columna (logo arriba + subtítulo) */ .marca-admin{ flex-direction:column; align-items:flex-start; gap:6px; } .marca-admin .logo-h{ height:38px; } .marca-admin .t2{ font-size:11.5px; color:var(--tinta-suave); } /* Login (pos + admin): logo grande y centrado */ .marca-col{ flex-direction:column; gap:10px; } .pos-login .marca .logo-h,.login-caja .marca .logo-h{ height:72px; } /* Pantalla de descanso del kiosco: fondo SIEMPRE oscuro → logo invertido */ .logo-latido-h{ width:min(64vw,470px); height:auto; } .kiosko-descanso .logo-latido-h{ filter:invert(1) hue-rotate(180deg); } /* MODO OSCURO: el logo es negro; se invierte para que se lea, conservando el rojo */ [data-tema="oscuro"] .logo-h,.oscuro .logo-h{ filter:invert(1) hue-rotate(180deg); } /* ------------------------------------------------------------ 22. ESPERA DE ATH MÓVIL (checkout REST: push + sondeo) ------------------------------------------------------------ */ .athm-espera{ text-align:center; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:10px; } .athm-espera p{ margin:0; } .spinner{ width:40px; height:40px; border-radius:50%; border:3.5px solid var(--acento-suave); border-top-color:var(--acento); animation:tff-girar .8s linear infinite; } @keyframes tff-girar{ to{ transform:rotate(360deg); } } /* QR de pago (kiosco + POS): siempre sobre blanco para que la cámara lo lea */ .ath-qr{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:var(--radio-g); padding:14px; box-shadow:var(--sombra); margin:0 auto; } .ath-qr img,.ath-qr canvas{ display:block; } /* ------------------------------------------------------------ 23. APP MÓVIL (admin) — banners del hero, orden y vista previa ------------------------------------------------------------ */ /* Fila de un banner en la lista (una tarjeta interior por banner) */ .banner-fila{ border:1px solid var(--linea); border-radius:var(--radio); padding:12px 14px; margin-bottom:12px; background:var(--superficie); } .banner-fila.inactivo{ opacity:.55; } .banner-thumb{ width:112px; height:56px; border-radius:var(--radio-ch); object-fit:cover; background:var(--mist); flex:none; border:1px solid var(--linea); } .banner-thumb-vacia{ display:inline-flex; align-items:center; justify-content:center; color:var(--caramel); } /* Vista previa del hero: carrusel horizontal con snap (igual sentido que la app) */ .app-hero-prev{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .app-hero-slide{ position:relative; flex:0 0 280px; height:140px; border-radius:var(--radio-g); overflow:hidden; scroll-snap-align:start; background:linear-gradient(120deg,var(--espresso),var(--crimson-osc)); } .app-hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .app-hero-txt{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.68)); } .app-hero-txt strong{ display:block; font-size:14px; line-height:1.25; } .app-hero-txt span{ display:block; font-size:12px; opacity:.92; } /* Cinta de la promoción del día (mock de cómo la pinta la app) */ .app-promo-cinta{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--radio-ch); background:var(--caramel-suave); color:var(--tinta); font-size:13.5px; font-weight:600; border:1px dashed var(--caramel); } /* Multi-select de destacados: cómodo también en pantalla táctil */ .destacados-select{ width:100%; min-height:220px; } .destacados-select optgroup{ font-weight:700; } /* ------------------------------------------------------------ 24. APP MÓVIL v2 (admin) — colores del tema + políticas Reusa vars/clases existentes; solo añade lo específico. ------------------------------------------------------------ */ /* Fila color + hex (selector nativo junto al código) */ .app-color-fila{ display:flex; align-items:center; gap:8px; } .app-color-fila input[type=color]{ width:46px; height:38px; flex:none; padding:2px; cursor:pointer; border:1px solid var(--linea); border-radius:var(--radio-ch); background:var(--superficie); } .app-hex{ text-transform:uppercase; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.5px; } /* Vista previa del tema (mock de la app con los colores elegidos) */ .app-tema-prev{ border:1px solid var(--linea); border-radius:var(--radio-g); overflow:hidden; } .app-tema-barra{ padding:12px 14px; font-weight:700; font-size:15px; } .app-tema-cuerpo{ padding:16px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .app-tema-cuerpo p{ margin:0; font-weight:600; flex:1 1 auto; } .app-tema-btn{ border:none; border-radius:999px; padding:9px 18px; font-weight:700; cursor:default; } .app-tema-chip{ border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; } /* Editor de políticas (un textarea por política) */ .app-pol-grupo{ margin-bottom:16px; } .app-pol-lista textarea{ width:100%; min-height:150px; resize:vertical; line-height:1.5; font-family:inherit; font-size:14px; } /* ============================================================ Botón de tema (luna / sol) — está en todos los encabezados ============================================================ */ .btn-tema{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--linea); border-radius:999px; background:transparent; color:inherit; cursor:pointer; transition:background .15s ease, transform .15s ease; } .btn-tema:hover{ background:rgba(0,0,0,.06); } .btn-tema:active{ transform:scale(.94); } /* De día se ve la luna (para irse a oscuro); de noche, el sol. */ .btn-tema .ico-sol{ display:none; } [data-tema="oscuro"] .btn-tema .ico-luna{ display:none; } [data-tema="oscuro"] .btn-tema .ico-sol{ display:inline-flex; } [data-tema="oscuro"] .btn-tema:hover{ background:rgba(255,255,255,.10); }