/* ============================================================
Versión 5.0.0: ajustes y rediseños de esta tanda. Se carga último
(después de inicio.css) así pisa lo viejo sin tocar los archivos de antes.
============================================================ */
/* ---- Link de reservas en el menú lateral de celular: el popover se abre hacia arriba (abajo quedaba cortado) ---- */
.mas-footer-movil .sidebar-link-reservas-popover.arriba{ top:auto; bottom: calc(100% + 8px); }
/* Popover "Tu link de reservas" 5.0.1: encabezado con ícono, el link entero en una caja de ancho completo
(antes un input aplastado al lado de un botón gigante) y abajo Copiar + Compartir lado a lado. */
#sidebarLinkReservasPopover{ padding:14px; border-radius:18px; }
#sidebarLinkReservasPopover .slr-cab{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#sidebarLinkReservasPopover .slr-ico{
width:36px; height:36px; border-radius:11px; flex-shrink:0; display:grid; place-items:center;
color: var(--accent); background: var(--accent-soft);
}
#sidebarLinkReservasPopover .slr-ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#sidebarLinkReservasPopover .slr-cab-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
#sidebarLinkReservasPopover .slr-cab-txt b{ font-size:0.92rem; font-weight:700; color: var(--text); }
#sidebarLinkReservasPopover .slr-cab-txt small{ font-size:0.74rem; color: var(--text-dim); line-height:1.35; }
#sidebarLinkReservasPopover .sidebar-link-reservas-popover-fila{ display:block; }
#sidebarLinkReservasPopover .sidebar-link-reservas-popover-fila input{
display:block; width:100%; height:42px; min-height:0; margin:0; padding:0 12px;
border-radius:12px; border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
background: var(--bg); color: var(--text); font-size:0.8rem; font-weight:600;
text-overflow:ellipsis; user-select:all; -webkit-user-select:all; cursor:text;
}
#sidebarLinkReservasPopover .slr-acciones{ display:flex; gap:8px; margin-top:10px; }
#sidebarLinkReservasPopover .slr-acciones button{
flex:1 1 0; min-width:0; width:auto; height:40px; min-height:0; margin:0; padding:0 10px;
border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
font-size:0.84rem; font-weight:700; white-space:nowrap;
}
#sidebarLinkReservasPopover .slr-acciones svg{ width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#sidebarLinkReservasPopover.open{ animation: v5Aparecer .18s ease both; }
/* ---- Header en celular: el nombre de la app ya no se corta ("Turnos&Cobr...").
Se saca la versión al lado del nombre (sigue en Más y en el pie), los botones redondos se achican un poco
y el título escala con el ancho de la pantalla. ---- */
@media (max-width: 859px){
header h1{ letter-spacing: -0.01em; font-size: clamp(1.02rem, 4.7vw, 1.2rem); overflow:visible; text-overflow:clip; }
header h1 .header-version{ display:none; }
.header-brand{ gap:6px; flex-shrink:0; }
.header-top-row{ gap:6px; }
.hamburguesa-btn{ width:28px; }
.header-actions{ gap:6px; flex-shrink:1; min-width:0; }
.notas-btn{ width:34px; height:34px; }
.notas-btn svg{ width:17px; height:17px; }
}
@media (max-width: 350px){
.header-actions{ gap:4px; }
.notas-btn{ width:30px; height:30px; }
.notas-btn svg{ width:16px; height:16px; }
}
/* ---- Config › Reservas online, más liviana: dos grupos con título chico, link alineado a la izquierda,
un solo acordeón abierto a la vez, logo e íconos en una fila compacta, y menos texto de ayuda. ---- */
.cfg-reservas{ gap:10px; }
.cfg-grupo-titulo{ margin: 12px 4px -2px; font-size:0.78rem; font-weight:600; color: var(--text-dim); }
.cfg-link-card{ text-align:left; padding:16px; }
.cfg-link-label{ text-transform:none; letter-spacing:0; font-size:0.78rem; font-weight:500; }
.cfg-link-url{ margin:4px 0 12px; font-size:0.98rem; font-weight:600; letter-spacing:-0.01em; word-break:break-all; }
.cfg-link-acciones{ grid-template-columns: 1.4fr 1fr 1fr; }
.cfg-link-acciones .btn-small{ min-height:38px; }
.cfg-link-editar > summary{ text-align:left; padding:6px 0 0; font-weight:600; }
.cfg-fila{ min-height:52px; }
.cfg-fila-titulo{ font-weight:600; }
.cfg-fila-valor{ font-weight:500; max-width:44%; overflow:hidden; text-overflow:ellipsis; }
.cfg-acordeon[open]{ background: color-mix(in srgb, var(--bg-panel-2) 45%, transparent); }
.cfg-acordeon-cuerpo{ gap:12px; padding-bottom:16px; }
.cfg-reservas .config-hint{ font-size:0.8rem; margin:0; }
.cfg-reservas .config-toggle-sub{ font-size:0.78rem; }
.cfg-reservas .logo-picker{ flex-direction:row; align-items:center; text-align:left; gap:12px; }
.cfg-reservas .logo-picker-preview{ width:56px; height:56px; border-width:1.5px; }
.cfg-reservas .logo-picker-preview svg{ width:24px; height:24px; }
.cfg-reservas .logo-icono-grid{ grid-template-columns: repeat(7, 1fr); gap:6px; }
.cfg-reservas .logo-icono-opt{ border-radius:10px; min-width:0; width:100%; padding:0; }
.cfg-reservas .logo-icono-opt svg{ width:18px; height:18px; }
@media (max-width: 380px){ .cfg-reservas .logo-icono-grid{ grid-template-columns: repeat(5, 1fr); } }
/* ---- Modo oscuro 5.0: negro de verdad (antes gris azulado) y dorado en vez de naranja.
Mismos nombres de variable que styles.css, así que se aplica a toda la app sin tocar nada más.
El modo claro (html[data-theme="light"]) tiene más especificidad y sigue con lo suyo, salvo el dorado. ---- */
:root{
--bg: #050505;
--bg-panel: #0f0f10;
--bg-panel-2: #18181a;
--line: #262628;
--text: #f3f1ec;
--text-dim: #9d9a94;
--accent: #d6ad5c;
--accent-soft: #3a3019;
--accent-rgb: 214,173,92;
--pendiente: #e2b84f;
--serv-1: #d6ad5c;
--ok-soft: #142217;
--warn-soft: #2a1611;
--info-soft: #131c22;
--fiado-soft: #2c1317;
}
html[data-theme="light"]{
--accent: #85600c;
--accent-soft: #f4e6c3;
--accent-rgb: 133,96,12;
--accent-grafico: #c79b3c;
--accent-vivido: #c99d3f;
--serv-1: #c99d3f;
}
/* ---- 6.1 Estadísticas › Resumen: monto completo, una barra fina "te quedó / gastos" y de dónde vino el dinero con barritas ---- */
#tab-stats .res-plata{
background:
radial-gradient(120% 90% at 100% 0%, rgba(var(--ok-rgb), .07), transparent 60%),
var(--bg-panel);
}
#tab-stats .res-plata-head{ margin-bottom:22px; gap:6px; }
#tab-stats .res-plata-valor{ display:flex; align-items:baseline; gap:2px; color: var(--text); font-weight:750; overflow-wrap:anywhere; }
#tab-stats .res-plata-valor.positivo{ color: var(--ok); }
#tab-stats .res-plata-valor.negativo{ color: var(--danger); }
#tab-stats .res-moneda{ font-size:0.55em; font-weight:650; opacity:.7; align-self:flex-start; margin-top:0.22em; margin-right:2px; }
#tab-stats .res-plata-sub{ font-size:0.82rem; }
#tab-stats .res-chip{
display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius:999px;
font-size:0.78rem; font-weight:650; font-variant-numeric: tabular-nums;
}
#tab-stats .res-chip.ok{ color: var(--ok); background: rgba(var(--ok-rgb), .12); }
#tab-stats .res-chip.mal{ color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
#tab-stats .res-flujo{ display:flex; flex-direction:column; gap:10px; }
#tab-stats .res-flujo-barra{ display:flex; gap:3px; height:12px; width:100%; }
#tab-stats .res-seg{ display:block; flex: 1 1 0; min-width:6px; height:100%; border-radius:999px; }
#tab-stats .res-seg.queda, #tab-stats .res-dot.queda{ background: var(--ok); }
#tab-stats .res-seg.gasto, #tab-stats .res-dot.gasto{ background: var(--danger); }
#tab-stats .res-seg.falta, #tab-stats .res-dot.falta{ background: color-mix(in srgb, var(--danger) 45%, transparent); }
#tab-stats .res-flujo-datos{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#tab-stats .res-flujo-dato{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color: var(--text-dim); }
#tab-stats .res-flujo-dato b{ font-weight:700; font-variant-numeric: tabular-nums; }
#tab-stats .res-flujo-dato b.ok{ color: var(--ok); }
#tab-stats .res-flujo-dato b.mal{ color: var(--danger); }
#tab-stats .res-flujo-dato em{ font-style:normal; font-size:0.74rem; font-weight:600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#tab-stats .res-flujo-dato .res-dot{ border-radius:50%; width:8px; height:8px; }
#tab-stats .res-flujo-dato.der{ margin-left:auto; }
#tab-stats .res-flujo-vacio{ padding: 6px 0 2px; font-size:0.86rem; color: var(--text-dim); }
#tab-stats .res-origen{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
#tab-stats .res-origen-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:0.78rem; font-weight:650; color: var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
#tab-stats .res-origen-head b{ font-size:0.86rem; color: var(--text); text-transform:none; letter-spacing:0; font-variant-numeric: tabular-nums; }
#tab-stats .res-origen .res-ley-fila{ flex-wrap:wrap; gap:8px; padding:0; border:0; font-size:0.88rem; }
#tab-stats .res-origen .res-ley-fila span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tab-stats .res-ley-barra{ flex-basis:100%; height:5px; border-radius:999px; background: var(--bg-panel-2); overflow:hidden; }
#tab-stats .res-ley-barra i{ display:block; height:100%; width:0; border-radius:999px; transition: width .35s ease; }
#tab-stats .res-ley-barra i.turnos{ background: var(--ok); }
#tab-stats .res-ley-barra i.ventas{ background: var(--info); }
#tab-stats .res-ley-barra i.manual{ background: var(--accent-vivido); }
#tab-stats .est-valor-gasto{ color: var(--danger); }
#tab-stats .res-pct{ font-style:normal; font-size:0.74rem; font-weight:600; color: var(--text-dim); background: var(--bg-panel-2); border-radius:999px; padding:2px 7px; font-variant-numeric: tabular-nums; }
#tab-stats .res-pct:empty{ display:none; }
/* ---- 5.1: ingresos siempre en verde y gastos en rojo (antes los totales quedaban en blanco) ---- */
#inicioIngresosHoyValor,
#inicioIngresosHoyValor .ini-moneda{ color: var(--ok); }
#tab-stats #ingresoTotalPeriodoValor{ color: var(--ok); }
#tab-stats #gastoTotalPeriodoValor{ color: var(--danger); }
#tab-stats #incomeDetail .income-entry-amount{ color: var(--ok); }
#tab-stats #wrapGastoDetail #gastoDetail .income-entry-amount{ color: var(--danger) !important; }
/* ---- 5.1: % del punto donde está parado el mouse/dedo, dentro del cartelito del gráfico ---- */
.stat-chart-tooltip-pct{ font-size:0.7rem; font-weight:700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.stat-chart-tooltip-pct:empty{ display:none; }
.stat-chart-tooltip-pct.sube{ color: var(--ok); }
.stat-chart-tooltip-pct.baja{ color: var(--danger); }
.gpc-row-pct{ margin-left:auto; margin-right:8px; font-size:0.74rem; font-weight:600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.gpc-row-top{ display:flex; align-items:baseline; }
.pg-unidades{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.pg-pct{ font-size:0.7rem; font-weight:600; color: var(--text-dim); margin-top:2px; }
.v5-pct{ display:inline-block; margin-left:8px; font-size:0.72rem; font-weight:600; color: var(--text-dim); background: var(--bg-panel-2); border-radius:999px; padding:2px 7px; vertical-align:middle; font-variant-numeric: tabular-nums; }
.v5-pct:empty{ display:none; }
#ingresoNetoTurnosValor + .v5-pct, #ingresoNetoVentasValor + .v5-pct,
#ingresoDesgloseEfectivoValor + .v5-pct, #ingresoDesgloseTransferenciaValor + .v5-pct{ display:table; margin:6px 0 0; }
/* ---- Login / crear cuenta modernizado: brillo dorado arriba, logo grande centrado,
el formulario en una tarjeta, pestañas tipo interruptor y campos y botón más grandes.
Antes era solo para celular y en compu quedaba el formulario viejo pegado arriba a la izquierda. ---- */
@media all{
.login-pantalla{
background:
radial-gradient(120% 55% at 50% -8%, rgba(var(--accent-rgb), 0.22), transparent 62%),
var(--bg);
}
.login-lado-form{ padding: calc(var(--safe-top, 0px) + 34px) 18px calc(var(--safe-bottom, 0px) + 24px); }
.login-marca{ flex-direction:column; gap:12px; text-align:center; animation: v5Aparecer .5s ease both; }
.login-marca-icono{
width:76px; height:76px; border-radius:50%;
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 14px 40px rgba(var(--accent-rgb), .28);
}
.login-marca-nombre{ font-size:1.05rem; letter-spacing:-0.01em; }
.login-cuerpo{
max-width:440px; margin: 24px auto 0;
background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
border:1px solid var(--line); border-radius:24px;
padding: 24px 20px 22px;
box-shadow: 0 24px 60px rgba(0,0,0,calc(.45 * var(--shadow-strength)));
animation: v5Aparecer .5s .06s ease both;
}
.login-titulo{ font-size:1.45rem; text-align:center; letter-spacing:-0.02em; }
.login-bajada{ text-align:center; font-size:0.88rem; margin-bottom:20px; }
.login-tabs{
gap:4px; border:0; padding:4px; margin-bottom:20px;
background: var(--bg-panel-2); border-radius:14px;
}
.login-tab{
flex:1; padding:10px 0; margin:0; border:0; border-radius:10px; text-align:center;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.login-tab.active{ background: var(--bg); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,calc(.3 * var(--shadow-strength))); }
.login-form{ gap:16px; }
.login-field label{ font-size:0.8rem; font-weight:500; color: var(--text-dim); }
.login-input-wrap input, .login-input-wrap select{
min-height:52px; border-radius:14px; background: var(--bg); padding: 0 16px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input-wrap input:focus, .login-input-wrap select:focus{ box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.login-submit-btn{
min-height:54px; border-radius:14px; font-size:1rem; letter-spacing:.01em;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-vivido) 88%, #fff) 0%, var(--accent-vivido) 100%);
box-shadow: 0 10px 26px rgba(var(--accent-rgb), .28);
transition: transform .12s ease, filter .15s ease;
}
.login-submit-btn:active{ transform: scale(.98); }
.login-link-mail{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:500; padding:10px; text-align:center; }
.login-msg{ border-radius:12px; border-left-width:0; }
}
@keyframes v5Aparecer{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width: 859px){
body:has(#pantallaLogin:not(.oculto)){
background:
radial-gradient(120% 420px at 50% -60px, rgba(var(--accent-rgb), 0.22), transparent 70%),
var(--bg);
background-attachment: scroll;
}
.login-pantalla{ background: transparent; }
}
html[data-theme="light"] .login-tab.active{ background: var(--bg-panel); }
/* Login 6.0: detalles comunes a celular y compu. */
.login-link-mail svg{ width:17px; height:17px; flex:0 0 auto; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.login-toggle-pass .login-ojo-tachado{ display:none; }
.login-toggle-pass.activo .login-ojo-abierto{ display:none; }
.login-toggle-pass.activo .login-ojo-tachado{ display:block; }
.login-toggle-pass:focus-visible, .login-tab:focus-visible, .login-link-mail:focus-visible, .login-forgot-btn:focus-visible{
outline:2px solid var(--accent-vivido); outline-offset:2px;
}
.login-msg-error, .login-msg-info{ animation: v5Aparecer .25s ease both; }
.login-pass-reqs li.ok::before{ content:''; width:9px; height:5px; border-radius:0; background:none; border-left:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
#loginOlvidoSection .login-titulo, #loginRevisaSection .login-titulo{ text-align:center; }
#loginOlvidoSection .login-bajada, #loginRevisaSection .login-bajada{ text-align:center; }
.login-back-btn{ min-height:32px; }
/* Compu: el formulario en tarjeta, centrado en su mitad, con el logo arriba; la presentación queda a la derecha. */
@media (min-width: 960px){
.login-lado-form{
flex: 0 0 min(600px, 50%); justify-content:center; padding: 40px 48px;
background: radial-gradient(90% 50% at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 65%);
}
.login-marca-icono{ width:68px; height:68px; }
.login-cuerpo{ margin: 22px auto 0; max-width:420px; padding: 28px 28px 24px; }
.login-lado-muestra{ background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg)); }
}
/* ---- Turnos › Semana tipo Google Calendar: tira de días que se desliza de a uno (snap), 3 días a la vista en
celular y 7 en compu. El ancho de cada día lo calcula renderSemana() en --sem-col-w. ---- */
.semana-grid-scroll{
scroll-snap-type: x mandatory;
scroll-padding-left: var(--sem-gutter-w, 46px);
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.semana-grid-scroll.sin-snap, .semana-grid-scroll.arrastrando{ scroll-snap-type: none; }
.semana-grid-scroll.arrastrando{ cursor: grabbing; user-select:none; -webkit-user-select:none; }
.semana-grid-scroll .semana-grid{ width:max-content !important; min-width:0 !important; }
.semana-grid-scroll .semana-dias-cont{ flex:none !important; }
.semana-grid-scroll .semana-dia-col{
width: var(--sem-col-w, 112px) !important; flex: 0 0 var(--sem-col-w, 112px) !important; min-width:0 !important;
scroll-snap-align: start;
}
.semana-grid-scroll .semana-dia-col:last-child{ border-right:1px solid var(--line); }
/* El lunes marca el arranque de cada semana con una línea un poco más fuerte. */
.semana-dia-col[data-lunes]{ border-left: 1px solid color-mix(in srgb, var(--text-dim) 35%, transparent); }
#agendaGrid.v5-entra-der{ animation: v5EntraDer .28s ease; }
#agendaGrid.v5-entra-izq{ animation: v5EntraIzq .28s ease; }
@keyframes v5EntraDer{ from{ transform: translateX(28px); opacity:.3; } to{ transform:none; opacity:1; } }
@keyframes v5EntraIzq{ from{ transform: translateX(-28px); opacity:.3; } to{ transform:none; opacity:1; } }
/* ---- Ventas 5.0: categorías a la vista arriba, cada categoría es su propia tarjeta y las subcategorías
son paneles dentro de la tarjeta. --cat-color lo pone el JS con el mismo color que usa el servicio/producto. ---- */
.v5-ventas-cats{ margin: 0 0 14px; }
.v5-ventas-cats .ventas-categoria-tabs{
display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding: 2px 0; margin:0;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.v5-ventas-cats .ventas-categoria-tabs::-webkit-scrollbar{ display:none; }
.v5-ventas-cats .ventas-categoria-tabs:empty{ display:none; }
.v5-cat-chip.filtro-chip{
flex: 0 0 auto; display:inline-flex; align-items:center; gap:8px; height:38px; margin:0;
padding: 0 14px 0 12px; border-radius:999px; border:1px solid var(--line);
background: var(--bg-panel); color: var(--text-dim); font-size:0.86rem; font-weight:600; white-space:nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.v5-cat-chip.filtro-chip:active{ transform: scale(.97); }
.v5-cat-chip b{ font-weight:600; font-size:0.74rem; opacity:.6; font-variant-numeric: tabular-nums; }
.v5-cat-dot{ width:9px; height:9px; border-radius:50%; background: var(--cat-color); flex-shrink:0; }
.v5-cat-chip.filtro-chip:hover{ color: var(--text); background: var(--bg-panel-2); }
.v5-cat-chip.filtro-chip.active{
color: var(--text); border-color: color-mix(in srgb, var(--cat-color, var(--text)) 70%, transparent);
background: color-mix(in srgb, var(--cat-color, var(--text)) 16%, var(--bg-panel));
}
.v5-cat-chip.filtro-chip.active[data-cat="todos"]{ background: var(--text); color: var(--bg); border-color: var(--text); }
.v5-ventas-cats .ventas-subcategoria-tabs{
display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin: 10px 0 0; padding: 0 0 0 4px;
}
.v5-ventas-cats .ventas-subcategoria-tabs::-webkit-scrollbar{ display:none; }
.v5-ventas-cats .filtro-chip-sub{
flex:0 0 auto; height:30px; padding: 0 12px; border-radius:999px; font-size:0.78rem; font-weight:600;
border:1px dashed var(--line); background: transparent; color: var(--text-dim); white-space:nowrap;
}
.v5-ventas-cats .filtro-chip-sub b{ font-weight:600; opacity:.6; margin-left:3px; }
.v5-ventas-cats .filtro-chip-sub.active{ border-style:solid; border-color: var(--accent-vivido, var(--accent)); color: var(--accent); background: var(--accent-soft); }
#tab-ventas #ventasList{ background:none; border:0; border-radius:0; overflow:visible; }
#tab-ventas #ventasList > .empty-msg{ background: var(--bg-panel); border:1px dashed var(--line); border-radius:16px; }
/* Categorías 5.0.1: ya no parecen un producto. La categoría es un encabezado de sección (ícono de carpeta, nombre y
cantidad en una pastilla) arriba de una tarjeta con sus productos; la subcategoría es un separador liviano
dentro de esa tarjeta, sin caja propia, con un punto del color de la categoría. */
#tab-ventas #ventasList > .categoria-grupo{ margin: 0 0 18px; background:none; border:0; overflow:visible; }
#tab-ventas #ventasList .categoria-header,
#tab-ventas #ventasList > .categoria-grupo > .categoria-header{
display:flex; align-items:center; gap:10px; width:100%; margin:0; padding: 4px 4px 10px; border:0 !important;
border-radius:12px; background: transparent !important; text-align:left; min-height:0;
}
#tab-ventas #ventasList .categoria-header:hover{ background: transparent !important; }
#tab-ventas #ventasList .categoria-header:hover .categoria-nombre{ color: var(--accent); }
.v5-cat-ico{ display:grid; place-items:center; flex-shrink:0; color: var(--cat-color); }
.v5-cat-ico svg{ width:20px; height:20px; fill: color-mix(in srgb, var(--cat-color) 22%, transparent); stroke: currentColor; stroke-width:1.8; stroke-linejoin:round; }
.v5-cat-txt{ display:flex; align-items:baseline; gap:8px; min-width:0; flex:1; }
#tab-ventas #ventasList .v5-cat-txt .categoria-nombre{
flex:0 1 auto; font-size:1.08rem; font-weight:750; letter-spacing:-0.015em; color: var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition: color .15s ease;
}
.v5-cat-txt small{ font-size:0.74rem; color: var(--text-dim); font-weight:500; white-space:nowrap; }
.v5-cat-cant{
flex-shrink:0; min-width:26px; height:22px; padding: 0 8px; border-radius:999px; display:grid; place-items:center;
font-size:0.74rem; font-weight:700; font-variant-numeric: tabular-nums;
color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 14%, transparent);
}
#tab-ventas #ventasList .categoria-header .categoria-count{ display:none; }
#tab-ventas #ventasList .categoria-chevron{
margin-left:2px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
background: transparent; color: var(--text-dim); transition: transform .2s ease;
}
#tab-ventas #ventasList .categoria-chevron svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; }
#tab-ventas #ventasList .categoria-grupo.colapsado > .categoria-header .categoria-chevron{ transform: rotate(-90deg); }
#tab-ventas #ventasList > .categoria-grupo.colapsado > .categoria-header{ padding-bottom:4px; }
/* Los productos de la categoría van en una tarjeta. */
#tab-ventas #ventasList > .categoria-grupo > .categoria-items{
background: var(--bg-panel); border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
#tab-ventas #ventasList > .categoria-grupo > .categoria-items:empty{ display:none; }
/* Subcategoría: separador dentro de la tarjeta (no una tarjeta adentro de otra). */
#tab-ventas #ventasList .categoria-items .categoria-subgrupos{ border:0; margin:0; padding:0; }
#tab-ventas #ventasList .categoria-subgrupos > .categoria-grupo{
margin:0; border:0; border-radius:0; overflow:visible; background: transparent;
border-top:1px solid var(--line);
}
#tab-ventas #ventasList > .categoria-grupo > .categoria-items > .categoria-subgrupos:first-child > .categoria-grupo:first-child{ border-top:0; }
#tab-ventas #ventasList .categoria-subgrupos .categoria-header{
padding: 12px 12px 8px 16px !important; gap:8px; border-radius:0;
background: color-mix(in srgb, var(--bg-panel-2) 50%, transparent) !important;
}
#tab-ventas #ventasList .categoria-subgrupos .v5-cat-ico{ width:8px; height:8px; border-radius:50%; background: var(--cat-color); }
#tab-ventas #ventasList .categoria-subgrupos .v5-cat-ico svg{ display:none; }
#tab-ventas #ventasList .categoria-subgrupos .v5-cat-txt .categoria-nombre{
font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim);
}
#tab-ventas #ventasList .categoria-subgrupos .v5-cat-cant{ height:18px; min-width:20px; padding:0 6px; font-size:0.68rem; color: var(--text-dim); background: var(--bg-panel-2); }
#tab-ventas #ventasList .categoria-subgrupos .categoria-chevron{ width:22px; height:22px; }
#tab-ventas #ventasList .categoria-subgrupos .categoria-chevron svg{ width:14px; height:14px; }
/* Sub-subcategorías: un poco más de sangría para que se note el nivel. */
#tab-ventas #ventasList .categoria-subgrupos .categoria-subgrupos .categoria-header{ padding-left:28px !important; }
/* Filas de producto: separadores finos, avatar más redondo, precio en dorado. */
#tab-ventas #ventasList .categoria-items > .producto-card{ border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); background:transparent; }
#tab-ventas #ventasList > .categoria-grupo > .categoria-items > .producto-card:first-child{ border-top:0; }
#tab-ventas .producto-fila-icono{ border-radius:12px !important; }
#tab-ventas .producto-fila-precio{ color: var(--accent); font-weight:700; }
/* Encabezado de tabla en compu: suelto arriba de las tarjetas. */
@container ventaslista (min-width: 500px){
#tab-ventas #ventasList > .ventas-tabla-head{ background:transparent; border:0; padding: 0 0 8px 14px; }
}
@container ventaslista (min-width: 620px){
#tab-ventas #ventasList .categoria-subgrupos .producto-fila-tabla .producto-fila-top{ padding-left:10px; }
}
/* ---- Ventas › Más info de un producto ---- */
.v5-info-box{ position:relative; padding-top:22px; max-width:460px; }
.v5-info-cerrar{
position:absolute; top:12px; right:12px; width:34px; height:34px; min-height:0; padding:0; border-radius:50%;
border:0; background: var(--bg-panel-2); color: var(--text-dim); display:grid; place-items:center;
}
.v5-info-cerrar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.v5-info-cab{ display:flex; gap:14px; align-items:center; padding-right:40px; margin-bottom:16px; text-align:left; }
.v5-info-avatar{
width:58px; height:58px; border-radius:16px; flex-shrink:0; display:grid; place-items:center; overflow:hidden;
font-weight:800; font-size:1.1rem; color: var(--tile-color);
background: color-mix(in srgb, var(--tile-color) 18%, transparent);
}
.v5-info-avatar img{ width:100%; height:100%; object-fit:cover; }
.v5-info-cab-txt{ min-width:0; }
.v5-info-cab-txt small{ font-size:0.74rem; color: var(--text-dim); font-weight:600; }
.v5-info-cab .modal-title{ margin:2px 0 6px; text-align:left; font-size:1.18rem; line-height:1.2; }
.v5-info-cab-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-weight:700; color: var(--accent); }
.v5-info-cab-meta .estado-pill{ font-size:0.74rem; }
.v5-info-cab-meta .estado-pill span{ display:inline; }
.v5-info-hero{
display:flex; justify-content:space-between; align-items:flex-start; gap:10px; text-align:left;
padding: 16px; border-radius:16px; margin-bottom:10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-panel-2)), var(--bg-panel-2));
border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.v5-info-hero > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.v5-info-hero-lbl{ font-size:0.76rem; font-weight:600; color: var(--text-dim); }
.v5-info-hero strong{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.v5-info-hero strong.negativo{ color: var(--danger); }
.v5-info-hero-sub{ font-size:0.76rem; color: var(--text-dim); }
.v5-info-hero .v5-pct{ flex-shrink:0; }
.v5-info-nums{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:14px; }
.v5-info-nums > div{
background: var(--bg-panel-2); border-radius:12px; padding: 10px 6px; display:flex; flex-direction:column; gap:3px; align-items:center; min-width:0;
}
.v5-info-nums b{ font-size:1rem; font-weight:800; font-variant-numeric: tabular-nums; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v5-info-nums span{ font-size:0.66rem; color: var(--text-dim); text-align:center; line-height:1.2; }
.v5-info-bloque{ text-align:left; margin-bottom:14px; }
.v5-info-bloque-tit{ font-size:0.74rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.v5-info-barras{ display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; height:110px; align-items:end; }
.v5-info-barra{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; }
.v5-info-barra em{ font-style:normal; font-size:0.7rem; font-weight:700; color: var(--text-dim); min-height:12px; }
.v5-info-barra i{ display:block; width:100%; max-width:30px; border-radius:7px 7px 3px 3px; background: color-mix(in srgb, var(--accent) 45%, var(--bg-panel-2)); }
.v5-info-barra.actual i{ background: var(--accent); }
.v5-info-barra.actual em{ color: var(--accent); }
.v5-info-barra span{ font-size:0.7rem; color: var(--text-dim); text-transform:capitalize; }
.v5-info-ultimas{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.v5-info-ultimas:empty{ display:none; }
.v5-info-venta{ display:flex; align-items:center; gap:10px; padding: 10px 12px; font-size:0.84rem; }
.v5-info-venta + .v5-info-venta{ border-top:1px solid var(--line); }
.v5-info-venta-fecha{ color: var(--text-dim); font-size:0.76rem; width:52px; flex-shrink:0; }
.v5-info-venta-cli{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v5-info-venta b{ font-variant-numeric: tabular-nums; }
.v5-info-acciones{ display:grid !important; grid-template-columns: 1fr 1fr; gap:8px; }
.v5-info-acciones #btnInfoProductoCerrar{ grid-column: 1 / -1; display:none; }
.v5-info-acciones button{ width:100%; margin:0; }
.v5-info-hero .v5-pct{ margin:0; color: var(--accent); background: var(--accent-soft); font-size:0.78rem; padding: 4px 10px; }
/* ---- Notas 5.0: manija para ordenar arrastrando y selección más clara ---- */
.nota-acciones{ display:flex; align-items:center; gap:2px; }
.nota-drag{
width:32px; height:40px; min-height:0; padding:0; border:0; border-radius:10px; background:transparent;
color: var(--text-dim); opacity:.55; display:grid; place-items:center; cursor:grab;
touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.nota-drag svg{ width:18px; height:18px; fill: currentColor; stroke:none; }
.nota-drag:hover{ opacity:1; background: var(--bg-panel-2); }
.nota-drag:active{ transform:none; cursor:grabbing; }
.notas-grupo-items.ordenando .nota-item{ transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.notas-grupo-items.ordenando .nota-item.arrastrando{
transition:none; position:relative; z-index:5; cursor:grabbing;
box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1.5px var(--accent);
background: var(--bg-panel-2);
}
.notas-grupo-items.ordenando .nota-item.arrastrando .nota-drag{ opacity:1; color: var(--accent); }
/* Selección: círculo dorado con tilde en vez del checkbox cuadrado del sistema. */
.nota-select-checkbox{
-webkit-appearance:none; appearance:none; width:24px !important; height:24px !important; min-width:24px; min-height:0 !important; max-height:24px; padding:0; aspect-ratio:1; align-self:center; border-radius:50%;
border:2px solid color-mix(in srgb, var(--text-dim) 60%, transparent); background: transparent; margin: 0 6px 0 0 !important;
transition: background .15s ease, border-color .15s ease, transform .15s ease; flex-shrink:0;
}
.nota-select-checkbox:checked{
border-color: var(--accent); transform: scale(1.06);
background: var(--accent) url("data:image/svg+xml;utf8,") center/15px no-repeat;
}
.notas-page.seleccionando .nota-item{ align-items:center; }
.nota-item.seleccionada,
.notas-page.seleccionando .nota-item.seleccionada{
background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel)) !important;
border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
.notas-seleccion-bar{ gap:6px; }
.notas-seleccion-bar .notas-sel-btn:disabled{ opacity:.35; }
.nota-item > .nota-acciones{ flex-direction:row; align-self:center; }
/* ---- Alertas 5.0: confirmaciones con ícono según lo que se confirma, botón con la acción, fondo difuminado ---- */
/* El desenfoque va SOLO en el modal abierto. Antes lo tenían las ~24 ventanas ocultas (opacity 0, siempre a pantalla
completa) y en Android el navegador se quedaba sin memoria de video: aparecían rectángulos negros tapando la app.
visibility:hidden además saca del dibujado a las ocultas (el delay deja terminar el fade al cerrar). */
.modal-overlay{ visibility:hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.modal-overlay.show{ visibility:visible; transition: opacity .2s ease, visibility 0s; -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.v5-confirm .modal-box{ text-align:center; padding-top:26px; }
.v5-confirm .modal-icon{
width:60px; height:60px; margin: 0 auto 14px; border-radius:20px; position:relative;
background: var(--accent-soft); color: var(--accent);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 7%, transparent);
}
.v5-confirm .modal-icon svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v5-confirm[data-tipo="borrar"] .modal-icon,
.v5-confirm[data-tipo="cancelar"] .modal-icon{
background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 7%, transparent);
}
.v5-confirm[data-tipo="aviso"] .modal-icon{
background: var(--warn-soft); color: var(--warn);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--warn) 7%, transparent);
}
.v5-confirm.show .modal-icon{ animation: v5IconoPop .42s cubic-bezier(.2,1.4,.4,1) .05s both; }
@keyframes v5IconoPop{ from{ transform: scale(.4) rotate(-12deg); opacity:0; } to{ transform:none; opacity:1; } }
.v5-confirm .modal-title{ font-size:1.18rem; font-weight:750; margin: 0 0 6px; }
.v5-confirm .modal-msg{ color: var(--text-dim); font-size:0.92rem; line-height:1.45; margin: 0 auto 20px; max-width:340px; }
.v5-confirm .modal-msg strong{ color: var(--text); }
.v5-confirm .modal-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.v5-confirm .modal-actions button{ width:100%; margin:0 !important; min-height:48px; border-radius:14px; font-weight:700; }
.v5-confirm .btn-peligro{ background: var(--danger) !important; color:#fff !important; border-color: var(--danger) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 30%, transparent); }
.v5-confirm .btn-peligro:hover{ filter: brightness(1.08); }
@media (min-width: 860px){
.v5-confirm{ align-items:center; }
.v5-confirm .modal-box{ max-width:400px; border-radius:22px; }
}
@media (prefers-reduced-motion: reduce){ .v5-confirm.show .modal-icon{ animation:none; } }
/* Toast con "Deshacer": una barrita muestra cuánto tiempo queda para tocarlo. */
#toast{ overflow:hidden; }
#toast.con-accion::after{
content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
background: var(--accent); transform-origin:left; opacity:.8;
}
#toast.con-accion.show::after{ animation: v5ToastTiempo 4s linear forwards; }
@keyframes v5ToastTiempo{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
/* ---- Filtros 5.0 (Turnos, Ventas, Clientes): fondo sólido, opciones como botones grandes con tilde
y, en celular, hoja que sube desde abajo con el resto oscurecido. ---- */
.filtro-popover{ background: var(--bg-panel) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.filtro-popover .notas-filtros{ display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px !important; }
.filtro-popover .notas-filtros .filtro-chip,
.filtro-popover .filtro-chip{
display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin:0;
min-height:44px; padding: 0 12px !important; border-radius:12px !important;
background: var(--bg-panel-2) !important; border:1px solid transparent !important;
color: var(--text) !important; font-size:0.86rem !important; font-weight:600; text-align:left;
}
.filtro-popover .filtro-chip::after{
content:''; width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-left:auto;
border:2px solid color-mix(in srgb, var(--text-dim) 50%, transparent);
transition: background .15s ease, border-color .15s ease;
}
.filtro-popover .filtro-chip.active{
background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
}
.filtro-popover .filtro-chip.active::after{
border-color: var(--accent);
background: var(--accent) url("data:image/svg+xml;utf8,") center/11px no-repeat;
}
.filtro-popover .ventas-tab-count{ margin-left:2px; opacity:.55; font-weight:600; }
.filtro-popover-titulo{ font-size:0.72rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; }
.filtro-popover-mes{ min-height:46px; border-radius:12px !important; }
.filtro-popover-limpiar{ min-height:44px; border-radius:12px !important; margin-top:14px !important; }
.filtro-btn.con-filtro{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
@media (max-width: 859.98px){
.filtro-popover.open{
position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
width:auto !important; max-height:82vh; z-index:260;
border-radius:24px 24px 0 0 !important; border-bottom:0 !important;
padding: 6px 18px calc(18px + env(safe-area-inset-bottom)) !important;
box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 -10px 40px rgba(0,0,0,.35) !important;
animation: v5HojaSube .26s cubic-bezier(.2,.9,.3,1) !important;
}
.filtro-popover.open .filtro-popover-header{ position:relative; padding-top:22px !important; border-bottom:0 !important; font-size:1.05rem !important; }
.filtro-popover.open .filtro-popover-header::before{
content:''; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px;
border-radius:4px; background: color-mix(in srgb, var(--text-dim) 45%, transparent);
}
.filtro-popover.open .filtro-popover-cerrar{ background: var(--bg-panel-2); border-radius:50%; width:34px; height:34px; }
}
@keyframes v5HojaSube{ from{ transform: translateY(100%); } to{ transform:none; } }
/* ---- Mover plata (efectivo ⇄ transferencia) 5.0 ---- */
.v5-mov{ max-width:440px; text-align:left; }
.v5-mov-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.v5-mov-cab .modal-title{ margin:0; text-align:left; font-size:1.3rem; }
.v5-mov-sub{ margin:4px 0 0; font-size:0.84rem; color: var(--text-dim); }
.v5-mov-cab .v5-info-cerrar{ position:static; flex-shrink:0; }
.v5-mov-pila{ position:relative; display:flex; flex-direction:column; gap:6px; }
.v5-mov-lado{
--mcol: var(--ok);
border:1px solid var(--line); border-radius:18px; padding:14px; background: var(--bg-panel-2);
transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.v5-mov-lado[data-metodo="transferencia"]{ --mcol: var(--info); }
.v5-mov-lado:first-child{ background: linear-gradient(160deg, color-mix(in srgb, var(--mcol) 10%, var(--bg-panel-2)), var(--bg-panel-2)); }
.v5-mov-lado-top{ display:flex; align-items:center; gap:10px; }
.v5-mov-ico{
width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
color: var(--mcol); background: color-mix(in srgb, var(--mcol) 16%, transparent);
}
.v5-mov-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.v5-mov-lado-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.v5-mov-lado-txt small{ font-size:0.7rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.v5-mov-lado-txt b{ font-size:1rem; }
.v5-mov-saldo{ font-size:0.8rem; color: var(--text-dim); font-weight:600; text-align:right; font-variant-numeric: tabular-nums; }
.v5-mov-monto{ display:flex; align-items:baseline; gap:4px; margin: 14px 0 10px; cursor:text; }
.v5-mov-monto span{ font-size:1.8rem; font-weight:700; color: var(--text-dim); }
.v5-mov-monto input{
flex:1; min-width:0; border:0 !important; background:transparent !important; box-shadow:none !important; outline:none;
padding:0 !important; min-height:0 !important; height:auto;
font-size:2.4rem !important; font-weight:800; letter-spacing:-0.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
.v5-mov-monto input::placeholder{ color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
.v5-mov-chips{ display:flex !important; gap:6px; margin:0 !important; }
.v5-mov-chips .chip-monto{
flex:1; min-height:34px; border-radius:999px; border:1px solid var(--line); background: var(--bg-panel);
color: var(--text); font-weight:700; font-size:0.8rem; padding:0;
}
.v5-mov-chips .chip-monto:disabled{ opacity:.4; }
.v5-mov-swap{
position:relative; align-self:center; margin:-25px 0; z-index:2;
width:44px; height:44px; min-height:0; padding:0; border-radius:50%;
background: var(--accent); color: var(--bg); border: 4px solid var(--bg-panel);
display:grid; place-items:center; box-shadow: 0 6px 16px rgba(0,0,0,.35);
transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.v5-mov-swap svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.v5-mov-swap:active{ transform: scale(.92); }
.v5-mov-pila.girando .v5-mov-swap{ transform: rotate(180deg); }
.v5-mov-pila.girando .v5-mov-lado:first-child{ animation: v5MovBaja .4s ease; }
.v5-mov-pila.girando .v5-mov-destino{ animation: v5MovSube .4s ease; }
@keyframes v5MovBaja{ 0%{ transform:none; } 45%{ transform: translateY(10px) scale(.98); opacity:.6; } 100%{ transform:none; } }
@keyframes v5MovSube{ 0%{ transform:none; } 45%{ transform: translateY(-10px) scale(.98); opacity:.6; } 100%{ transform:none; } }
.v5-mov-preview{ margin: 12px 2px 10px; font-size:0.84rem; color: var(--text-dim); min-height:1.2em; }
.v5-mov-preview b{ color: var(--text); }
.v5-mov-preview.error{ color: var(--danger); }
.v5-mov-nota{ width:100%; margin-bottom:10px; }
.v5-mov-btn{ width:100%; min-height:52px; border-radius:14px; font-size:1rem; margin:0; }
.v5-mov-btn:disabled{ opacity:.45; }
.v5-mov-hist{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.v5-mov-hist summary{ cursor:pointer; font-size:0.84rem; font-weight:600; color: var(--text-dim); list-style:none; padding:4px 0; }
.v5-mov-hist summary::-webkit-details-marker{ display:none; }
.v5-mov-hist summary::after{ content:'›'; float:right; transition: transform .2s; }
.v5-mov-hist[open] summary::after{ transform: rotate(90deg); }
.v5-mov-hist #intercambiosList{ margin-top:8px; }
@media (prefers-reduced-motion: reduce){ .v5-mov-pila.girando *{ animation:none !important; } }
.v5-mov-lado:first-child{ padding-bottom:26px; } .v5-mov-destino{ padding-top:22px; }
/* ============================================================
5.0.1 — Barra lateral de compu rediseñada: perfil como tarjeta arriba, contador de turnos de hoy
en "Turnos", secciones con título (Principal / Gestión), ítem activo con barrita dorada y brillo suave,
ajustes al pie separados por una línea y el link de reservas como tarjeta con punto "en línea".
En celular los elementos nuevos (.sb-*) no se muestran.
============================================================ */
.sb-seccion, .sb-badge{ display:none; }
@media (min-width: 860px){
nav.tabs{
padding: 14px 12px 14px !important; gap: 2px;
background:
radial-gradient(140% 220px at 0% 0%, rgba(var(--accent-rgb), .10), transparent 70%),
var(--bg-panel);
overflow-y: auto; scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar{ display:none; }
/* La sidebar es una columna de alto fijo: sin esto las tarjetas se aplastaban en pantallas bajas (ahora scrollea). */
nav.tabs > *{ flex-shrink:0; }
/* Perfil: tarjeta con avatar dorado, nombre y "Ver perfil" debajo. */
nav.tabs .sidebar-perfil-footer{
order:-2; display:grid !important; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
column-gap: 11px; row-gap: 1px; align-items:center;
margin: 0 0 10px; padding: 10px; border-radius: 14px;
border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-panel-2) 60%, transparent);
transition: border-color .15s ease, background .15s ease;
}
nav.tabs .sidebar-perfil-footer:hover{ background: var(--bg-panel-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
nav.tabs .sidebar-perfil-avatar{
grid-row: 1 / 3; width:38px; height:38px; border-radius:12px; font-size:0.8rem; font-weight:800;
color: #1a1406; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
box-shadow: 0 4px 14px rgba(var(--accent-rgb), .28);
}
nav.tabs .sidebar-perfil-nombre{ grid-column:2; grid-row:1; align-self:end; font-size:0.92rem; font-weight:700; color: var(--text); }
nav.tabs .sidebar-perfil-ver{ display:block !important; grid-column:2; grid-row:2; align-self:start; font-size:0.72rem; font-weight:500; color: var(--text-dim); text-align:left; }
nav.tabs .sidebar-perfil-chevron{ grid-column:3; grid-row: 1 / 3; transition: transform .15s ease; }
nav.tabs .sidebar-perfil-footer:hover .sidebar-perfil-chevron{ transform: translateX(2px); stroke: var(--accent); }
/* Contador de turnos que quedan hoy, al lado de "Turnos". */
nav.tabs .sb-badge{
display:inline-grid; place-items:center; margin-left:auto; min-width:20px; height:20px; padding: 0 6px;
border-radius:999px; font-size:0.7rem; font-weight:700; font-variant-numeric: tabular-nums;
color: var(--accent); background: var(--accent-soft);
}
nav.tabs .sb-badge[hidden]{ display:none; }
@keyframes sbVivo{ 0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 50%{ box-shadow: 0 0 0 5px transparent; } }
/* Títulos de sección. */
.sb-seccion{
display:block; margin: 4px 10px 6px; font-size:0.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color: color-mix(in srgb, var(--text-dim) 75%, transparent);
}
.sidebar-mas-lista .sb-seccion{ margin-top: 14px; }
/* Ítems: alto parejo, ícono en una cajita que se ilumina, barrita dorada a la izquierda en el activo. */
nav.tabs .tab-btn,
nav.tabs[class] .tab-btn[data-tab="inicio"],
nav.tabs[class] .tab-btn[data-tab="historial"],
nav.tabs[class] .tab-btn[data-tab="ventas"],
.sidebar-mas-lista .mas-lista .mas-lista-item{
position:relative; height:40px; min-height:40px; padding: 0 10px 0 6px; gap:9px; border-radius:11px;
font-size:0.88rem; font-weight:550; transition: background .15s ease, color .15s ease;
}
nav.tabs .tab-btn svg,
nav.tabs[class] .tab-btn[data-tab] svg{ box-sizing:content-box; width:17px; height:17px; padding:6px; margin:-6px 0; border-radius:9px; stroke-width:1.9; transition: background .15s ease, transform .2s ease; }
.sidebar-mas-lista .mas-lista .mas-lista-icon{ width:29px; height:29px; display:grid; place-items:center; border-radius:9px; transition: background .15s ease; }
.sidebar-mas-lista .mas-lista .mas-lista-icon svg{ width:17px; height:17px; stroke-width:1.9; transition: transform .2s ease; }
nav.tabs .tab-btn:hover svg,
.sidebar-mas-lista .mas-lista .mas-lista-item:not(:disabled):hover .mas-lista-icon svg{ transform: scale(1.08); }
nav.tabs .tab-btn.active,
nav.tabs[class] .tab-btn.active[data-tab],
body:has(#tab-stats.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masEstadisticasBtn,
body:has(#tab-servicios.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masServiciosBtn,
body:has(#modalClientesOverlay.show) #clientesBtn,
body:has(#masConfiguracionOverlay.show) #masConfiguracionBtn,
body:has(#masRespaldoOverlay.show) #masRespaldoBtn,
body:has(#masAyudaSoporteOverlay.show) #masAyudaSoporteBtn{
background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .03) 85%) !important;
color: var(--text) !important; font-weight:700 !important;
}
nav.tabs .tab-btn.active::before,
body:has(#tab-stats.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masEstadisticasBtn::before,
body:has(#tab-servicios.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masServiciosBtn::before,
body:has(#modalClientesOverlay.show) #clientesBtn::before,
body:has(#masConfiguracionOverlay.show) #masConfiguracionBtn::before,
body:has(#masRespaldoOverlay.show) #masRespaldoBtn::before,
body:has(#masAyudaSoporteOverlay.show) #masAyudaSoporteBtn::before{
content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius: 0 3px 3px 0;
background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .6);
}
nav.tabs .tab-btn.active svg{ background: rgba(var(--accent-rgb), .16); }
body:has(#tab-stats.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masEstadisticasBtn .mas-lista-icon,
body:has(#tab-servicios.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masServiciosBtn .mas-lista-icon,
body:has(#modalClientesOverlay.show) #clientesBtn .mas-lista-icon,
body:has(#masConfiguracionOverlay.show) #masConfiguracionBtn .mas-lista-icon,
body:has(#masRespaldoOverlay.show) #masRespaldoBtn .mas-lista-icon,
body:has(#masAyudaSoporteOverlay.show) #masAyudaSoporteBtn .mas-lista-icon{ background: rgba(var(--accent-rgb), .16); }
/* Con una pantalla de la lista abierta encima, la pestaña de fondo deja de verse activa (también la barrita). */
body:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show) nav.tabs .tab-btn.active{
background: transparent !important; color: var(--text-dim) !important; font-weight:550 !important;
}
body:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show) nav.tabs .tab-btn.active::before{ display:none; }
body:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show) nav.tabs .tab-btn.active svg{ background: transparent; }
/* "Pronto": pastilla dorada tenue. */
.sidebar-mas-lista .mas-lista .mas-lista-badge{
border: 1px solid rgba(var(--accent-rgb), .3) !important; background: rgba(var(--accent-rgb), .08) !important;
color: var(--accent) !important; font-weight:600 !important; border-radius:999px !important; padding: 2px 8px !important;
}
/* Ajustes al pie, separados con una línea. */
.sidebar-mas-lista #masConfiguracionBtn{ margin-top:auto; }
/* Si no sobra alto, el margin auto queda en 0: este margen asegura aire para la línea divisoria. */
.sidebar-mas-lista .mas-lista-item-proximamente{ margin-bottom:18px; }
.sidebar-mas-lista #masConfiguracionBtn::after{
content:''; position:absolute; left:4px; right:4px; top:-9px; height:1px; background: var(--line);
}
/* Link de reservas: tarjeta con globo, punto "en línea" y el link. */
nav.tabs .sidebar-link-reservas{
margin-top: 18px; padding: 11px; border: 1px solid var(--line) !important;
border-radius: 14px; background: color-mix(in srgb, var(--bg-panel-2) 55%, transparent);
}
nav.tabs .sidebar-link-reservas-label{
display:flex !important; align-items:center; gap:7px; margin: 0 2px 9px !important;
font-size:0.76rem !important; font-weight:650 !important; color: var(--text) !important;
}
nav.tabs .sidebar-link-reservas-label::before{
content:''; width:17px; height:17px; flex-shrink:0; background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
nav.tabs .sidebar-link-reservas-label{ white-space:nowrap; overflow:hidden; }
/* Punto verde "en línea": la página está publicada y se puede compartir. */
nav.tabs .sidebar-link-reservas-label::after{
content:''; margin-left:auto; width:7px; height:7px; border-radius:50%; flex-shrink:0; background: var(--ok);
animation: sbVivo 2s ease-in-out infinite;
}
nav.tabs .sidebar-link-reservas-wrap{ border-radius: 10px; background: var(--bg); border-color: var(--line); }
nav.tabs .sidebar-link-reservas-texto{ font-size: 0.76rem; padding: 9px 10px; color: var(--text-dim); }
nav.tabs .sidebar-link-reservas-texto:hover{ color: var(--accent); background: transparent; }
nav.tabs .sidebar-link-reservas-abrir:hover{ color: var(--accent); }
}
/* Logo del negocio en el avatar del perfil (sidebar de compu y "Más" en celular): la imagen llena el cuadrado. */
.sidebar-perfil-avatar.con-logo{ padding:0; overflow:hidden; background: var(--bg-panel-2) !important; box-shadow: 0 0 0 1px var(--line) !important; }
.sidebar-perfil-avatar.con-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ============================================================
5.0.1 — Ficha del cliente modernizada: encabezado con brillo del color del cliente, contacto como
pastillas con nombre, "Facturado total" grande con barra turnos/productos, listas más limpias y
acciones con ícono (Nuevo turno grande, el resto en grilla, Borrar como texto rojo al pie).
============================================================ */
#clienteDetalleOverlay .cliente-detalle-box{
--cli-color: var(--accent);
padding-top: 0; overflow-x: hidden;
}
#clienteDetalleOverlay .cliente-detalle-header{
position: relative; margin: 0 -22px 16px; padding: 30px 22px 18px; gap: 4px;
background:
radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--cli-color) 24%, transparent), transparent 70%);
border-bottom: 1px solid var(--line);
}
#clienteDetalleOverlay .cliente-detalle-avatar{
width: 72px; height: 72px; border-radius: 22px; font-size: 1.45rem; font-weight: 800; margin-bottom: 8px;
color: var(--cli-color); background: color-mix(in srgb, var(--cli-color) 18%, var(--bg-panel));
box-shadow: 0 0 0 4px var(--bg-panel), 0 0 0 5px color-mix(in srgb, var(--cli-color) 45%, transparent), 0 12px 30px color-mix(in srgb, var(--cli-color) 25%, transparent);
}
#clienteDetalleOverlay .cliente-detalle-nombre{ font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
#clienteDetalleOverlay .cliente-detalle-meta{ font-size: 0.82rem; }
#clienteDetalleOverlay .cliente-detalle-contacto{ margin-top: 10px; gap: 8px; }
#clienteDetalleOverlay .cliente-detalle-contacto .v5-cli-contacto{
width: auto; height: 36px; padding: 0 14px 0 11px; gap: 7px; border-radius: 999px;
font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center;
}
#clienteDetalleOverlay .cliente-detalle-contacto .v5-cli-contacto span{ display: inline; }
#clienteDetalleOverlay .cliente-detalle-contacto .v5-cli-contacto svg{ width: 16px; height: 16px; }
#clienteDetalleOverlay .cliente-detalle-cerrar{ z-index: 2; top: 12px; right: 12px; background: color-mix(in srgb, var(--bg-panel) 70%, transparent); }
/* Números */
#clienteDetalleOverlay .cliente-detalle-stats{ grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
#clienteDetalleOverlay .v5-cli-total{
grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; text-align: left;
padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 12%, var(--bg-panel-2)), var(--bg-panel-2) 65%);
}
#clienteDetalleOverlay .v5-cli-total-lbl{ font-size: 0.74rem; font-weight: 600; color: var(--text-dim); }
#clienteDetalleOverlay .v5-cli-total strong{ font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
#clienteDetalleOverlay .v5-cli-total-sub{ font-size: 0.76rem; color: var(--text-dim); }
#clienteDetalleOverlay .v5-cli-split{ display: flex; gap: 3px; height: 7px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: var(--bg-panel); }
#clienteDetalleOverlay .v5-cli-split i{ display: block; height: 100%; border-radius: 6px; }
#clienteDetalleOverlay .v5-cli-split i[style*="width:0%"]{ display: none; }
#clienteDetalleOverlay i.t{ background: var(--ok); }
#clienteDetalleOverlay i.p{ background: var(--info); }
#clienteDetalleOverlay .v5-cli-split-ley{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 6px; }
#clienteDetalleOverlay .v5-cli-split-ley span{ display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#clienteDetalleOverlay .v5-cli-split-ley span i{ width: 8px; height: 8px; border-radius: 50%; }
#clienteDetalleOverlay .v5-cli-split-ley em{ font-style: normal; font-weight: 700; color: var(--text); }
#clienteDetalleOverlay .v5-cli-mini{
display: flex; align-items: baseline; gap: 7px; padding: 11px 13px; border-radius: 14px;
background: var(--bg-panel-2); border: 1px solid var(--line); min-width: 0;
}
#clienteDetalleOverlay .v5-cli-mini b{ font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#clienteDetalleOverlay .v5-cli-mini span{ font-size: 0.74rem; color: var(--text-dim); line-height: 1.2; }
/* Listas (fiado, reservados, comprados, devueltos) */
#clienteDetalleOverlay .cliente-detalle-seccion h4{ font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; margin: 0 2px 8px; }
#clienteDetalleOverlay .cliente-detalle-productos{ gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-panel-2); }
#clienteDetalleOverlay .cliente-detalle-producto-row{
border: 0; border-radius: 0; background: transparent; padding: 11px 13px; font-size: 0.86rem; font-weight: 600;
}
#clienteDetalleOverlay .cliente-detalle-producto-row + .cliente-detalle-producto-row{ border-top: 1px solid var(--line); }
#clienteDetalleOverlay .cliente-detalle-producto-row .cant{ font-weight: 500; font-variant-numeric: tabular-nums; }
/* Acciones */
#clienteDetalleOverlay .cliente-detalle-acciones{ gap: 8px; margin-top: 4px; }
#clienteDetalleOverlay .cliente-detalle-accion svg{ width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#clienteDetalleOverlay .cliente-detalle-accion.primary{
min-height: 50px; border-radius: 14px; border: 0; font-size: 0.95rem;
background: var(--accent-vivido, var(--accent)); color: #1a1406;
box-shadow: 0 8px 22px rgba(var(--accent-rgb), .25);
}
#clienteDetalleOverlay .v5-cli-acc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#clienteDetalleOverlay .v5-cli-acc-grid .cliente-detalle-accion{
justify-content: flex-start; min-height: 46px; padding: 0 12px; border-radius: 12px; font-size: 0.82rem; font-weight: 650;
transition: border-color .15s ease, background .15s ease;
}
#clienteDetalleOverlay .v5-cli-acc-grid .cliente-detalle-accion svg{ color: var(--accent); }
#clienteDetalleOverlay .v5-cli-acc-grid .cliente-detalle-accion:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
#clienteDetalleOverlay .cliente-detalle-accion.warn{
background: transparent; border-color: transparent; color: var(--danger); font-size: 0.82rem; font-weight: 600; padding: 10px; margin-top: 2px;
}
#clienteDetalleOverlay .cliente-detalle-accion.warn:hover{ background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (max-width: 600px){
#clienteDetalleOverlay .cliente-detalle-header{ margin: 0 -18px 16px; padding: 30px 18px 18px; }
}
/* ---- Íconos dibujados en lugar de emojis (cada sistema los pintaba distinto y desentonaban con el dorado). ---- */
.modal-icon > svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.huecos-empty-icon{ color: var(--text-dim); line-height:0; }
.huecos-empty-icon svg{ width:30px; height:30px; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.agenda-dia-bloqueado-icono{ color:#e07a7a; line-height:0; }
.agenda-dia-bloqueado-icono svg{ width:28px; height:28px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; }
.reserva-pend-nexo-icono{ line-height:0; }
.reserva-pend-nexo-icono svg{ width:12px; height:12px; fill:none; stroke: currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ico-inline{ width:14px; height:14px; margin-right:6px; vertical-align:-2px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* ---- Config › Reservas online › Categorías del catálogo y Descuentos por cantidad (6.0): de tarjetas grandes
apiladas a una lista con filas compactas, como los ajustes del celular. Una sola caja, separadores finos,
el selector de productos como control segmentado chico y las subcategorías indentadas debajo de su padre. ---- */
#configCategoriasOnlineOverlay .config-seccion-body,
#configDescuentosCantidadOverlay .config-seccion-body{ flex-direction:column; flex-wrap:nowrap; max-width:680px; gap:12px; }
#configCategoriasOnlineOverlay .config-seccion-body > .panel,
#configDescuentosCantidadOverlay .config-seccion-body > .panel{ flex:none; max-width:none; width:100%; }
#configCategoriasOnlineOverlay .config-hint,
#configDescuentosCantidadOverlay .config-hint{ margin:0 2px; }
#configCategoriasOnlineOverlay .notas-page-header,
#configDescuentosCantidadOverlay .notas-page-header{ max-width:680px; }
.dcant-panel{ padding:6px; border-radius:18px; overflow:hidden; }
/* Categorías: igual que Ventas. La categoría es un encabezado de sección (carpeta de su color) y sus
subcategorías son filas dentro de una tarjeta debajo, con un punto del color y el nombre en versalitas. */
#configCategoriasOnlineOverlay .config-seccion-body > .cof-panel{ background:none; border:0; padding:0; overflow:visible; box-shadow:none; }
.cof-lista{ display:flex; flex-direction:column; gap:18px; }
.cof-cab, .cof-sub{
display:grid; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-areas: "ico txt modo sw";
align-items:center; column-gap:12px; row-gap:8px;
}
.cof-cab{ padding:4px 4px 10px; }
.cof-grupo:not(:has(.cof-subs)) .cof-cab{ padding-bottom:4px; }
.cof-cab .v5-cat-ico{ grid-area:ico; }
.cof-txt{ grid-area:txt; min-width:0; }
.cof-nombre-fila{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.cof-cab .cof-nombre{ font-size:1.08rem; font-weight:750; letter-spacing:-0.015em; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cof-nombre-fila small{ font-size:0.74rem; color: var(--text-dim); font-weight:500; white-space:nowrap; }
.cof-estado{ margin-top:2px; font-size:0.74rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cof-estado .cof-on{ color: var(--accent); font-weight:600; }
.cof-switch{ grid-area:sw; }
.cof-subs{ background: var(--bg-panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cof-sub{
padding:12px 12px 12px calc(16px + var(--nivel, 0) * 18px);
background: color-mix(in srgb, var(--bg-panel-2) 50%, transparent); transition: opacity .15s ease;
}
.cof-sub + .cof-sub{ border-top:1px solid var(--line); }
.cof-punto{ grid-area:ico; width:8px; height:8px; border-radius:50%; background: var(--cat-color); }
.cof-sub .cof-nombre{
font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cof-sub.cof-activa .cof-nombre{ color: var(--text); }
.cof-deshabilitada{ opacity:.45; }
#catOnlineLista .cat-online-modo{
grid-area:modo; display:inline-flex; gap:2px; margin:0; padding:3px;
border:1px solid var(--line); border-top:1px solid var(--line); border-radius:10px; background: var(--bg);
}
#catOnlineLista .cat-online-modo-btn{
padding:5px 10px; border-radius:7px; border:0; background:transparent; min-height:0; height:auto; width:auto;
font-size:0.72rem; font-weight:600; color: var(--text-dim); line-height:1.2; white-space:nowrap; cursor:pointer;
}
#catOnlineLista .cat-online-modo-btn.active{ background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
#catOnlineLista .cat-online-modo-btn:not(.active):not(:disabled):hover{ color: var(--text); }
@media (max-width: 560px){
.cof-cab, .cof-sub{ grid-template-areas: "ico txt sw" ". modo modo"; grid-template-columns: auto minmax(0,1fr) auto; }
.cof-sub{ padding-left: calc(14px + var(--nivel, 0) * 14px); }
#catOnlineLista .cat-online-modo{ justify-self:start; }
}
#catOnlineContador{
margin-left:auto; padding:4px 10px; border-radius:999px; font-size:0.74rem; font-weight:700;
color: var(--accent); background: var(--accent-soft);
}
/* Descuentos por cantidad */
#dcantLista{ display:flex; flex-direction:column; }
.dcant-fila{
display:grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items:center; column-gap:12px;
padding:10px 8px 10px 10px; border-radius:12px; transition: background .15s ease;
}
.dcant-fila:hover{ background: var(--bg-panel-2); }
.dcant-ficha{
width:58px; height:40px; padding:0 4px; border-radius:11px; display:grid; place-items:center;
font-size:0.86rem; font-weight:800; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; white-space:nowrap;
color: var(--accent); background: var(--accent-soft);
border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dcant-txt{
all:unset; box-sizing:border-box; min-width:0; display:flex; flex-direction:column; gap:3px; cursor:pointer; padding:2px 0;
}
.dcant-txt:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.dcant-nombre{ display:flex; align-items:center; gap:7px; min-width:0; font-size:0.92rem; font-weight:650; color: var(--text); letter-spacing:-0.01em; }
.dcant-nombre{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcant-tipo{
flex-shrink:0; padding:2px 7px; border-radius:999px; font-size:0.66rem; font-weight:650; letter-spacing:0.01em;
color: var(--text-dim); background: var(--bg-panel-2); border:1px solid var(--line);
}
.dcant-tipo-pausa{ color: var(--text); }
.dcant-resumen{ font-size:0.76rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcant-icono-btn{
width:34px; height:34px; min-height:0; padding:0; margin:0; border-radius:10px; display:grid; place-items:center;
border:1px solid transparent; background:transparent; color: var(--text-dim); cursor:pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dcant-icono-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dcant-icono-btn:hover{ color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.dcant-pausada .dcant-ficha{ color: var(--text-dim); background: var(--bg-panel-2); border-color: var(--line); }
.dcant-pausada .dcant-nombre, .dcant-pausada .dcant-resumen{ opacity:.6; }
.dcant-nueva-btn{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; min-height:0; margin:6px 0 0; padding:0 14px;
border-radius:12px; border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent);
font-size:0.88rem; font-weight:700; cursor:pointer; transition: background .15s ease, border-color .15s ease;
}
#dcantLista:empty + .dcant-vacio + .dcant-nueva-btn{ margin-top:0; }
.dcant-nueva-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.dcant-nueva-btn:hover{ background: var(--accent-soft); border-style:solid; }
.dcant-vacio{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 16px 22px; text-align:center; }
.dcant-vacio-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:6px; color: var(--accent); background: var(--accent-soft); }
.dcant-vacio-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dcant-vacio b{ font-size:0.92rem; color: var(--text); }
.dcant-vacio small{ font-size:0.78rem; color: var(--text-dim); }
@media (max-width: 420px){
.dcant-fila{ column-gap:10px; }
.dcant-ficha{ width:50px; height:36px; font-size:0.8rem; }
.dcant-resumen{ white-space:normal; line-height:1.3; }
.dcant-tipo{ display:none; }
.dcant-tipo-pausa{ display:inline; }
}
/* ======================= 6.0 ======================= */
/* ---- 6.0 Stock: tres colores que no se confunden (verde / ámbar / rojo), con fondo suave y forma distinta
del punto (lleno, medio, anillo) para quien no distingue bien los colores. Texto ≥4.5:1 en los dos modos. ---- */
:root{
--stock-ok: #4cc38a; --stock-ok-soft: rgba(76,195,138,.14);
--stock-bajo: #f5b83d; --stock-bajo-punto: #f5b83d; --stock-bajo-soft: rgba(245,184,61,.15);
--stock-sin: #ff6b6b; --stock-sin-soft: rgba(255,107,107,.15);
}
html[data-theme="light"]{
--stock-ok: #12733a; --stock-ok-soft: #dcf3e5;
--stock-bajo: #8f5200; --stock-bajo-punto: #f59e0b; --stock-bajo-soft: #fff0cc;
--stock-sin: #b91c1c; --stock-sin-soft: #fde0e0;
}
.estado-pill{ background: var(--stock-ok-soft); color: var(--stock-ok); }
.estado-pill-bajo{ background: var(--stock-bajo-soft); color: var(--stock-bajo); }
.estado-pill-bajo i{ background: var(--stock-bajo-punto); }
.estado-pill-sin{ background: var(--stock-sin-soft); color: var(--stock-sin); }
#tab-ventas .estado-pill{ padding: 4px 9px 4px 8px; border-radius:999px; background: var(--stock-ok-soft); font-weight:600; }
#tab-ventas .estado-pill-bajo{ background: var(--stock-bajo-soft); }
#tab-ventas .estado-pill-sin{ background: var(--stock-sin-soft); }
.estado-pill-bajo i{ background: linear-gradient(90deg, var(--stock-bajo-punto) 50%, transparent 50%) !important; box-shadow: inset 0 0 0 1.5px var(--stock-bajo-punto); }
.estado-pill-sin i{ background: transparent !important; box-shadow: inset 0 0 0 1.8px var(--stock-sin); }
.producto-fila-stock.stock-sin{ color: var(--stock-sin); }
.producto-fila-stock.stock-bajo-txt{ color: var(--stock-bajo); }
.badge.sin-stock{ background: var(--stock-sin-soft); color: var(--stock-sin); border:0; }
.badge.stock-bajo{ background: var(--stock-bajo-soft); color: var(--stock-bajo); border:0; }
/* Chips del filtro con el mismo punto de color que la lista. */
.filtro-chip[data-estado-stock="en-stock"]::before,
.filtro-chip[data-estado-stock="stock-bajo"]::before,
.filtro-chip[data-estado-stock="sin-stock"]::before{
content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:1px;
}
.filtro-chip[data-estado-stock="en-stock"]::before{ background: var(--stock-ok); }
.filtro-chip[data-estado-stock="stock-bajo"]::before{ background: linear-gradient(90deg, var(--stock-bajo-punto) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--stock-bajo-punto); }
.filtro-chip[data-estado-stock="sin-stock"]::before{ box-shadow: inset 0 0 0 1.8px var(--stock-sin); }
.filtro-chip.active[data-estado-stock]::before{ filter: brightness(.55); }
/* ---- 6.0 Tu plan: ítem siempre visible en "Más"/sidebar y su pantalla ---- */
.mas-plan-badge{
flex-shrink:0; font-size:0.68rem; font-weight:700; padding: 3px 9px; border-radius:999px;
color: var(--accent); background: var(--accent-soft); letter-spacing:.01em;
}
.mas-plan-badge.mejorar{ color:#201400; background: var(--accent-vivido); }
.mas-lista-plan .mas-lista-icon{ color: var(--accent); }
.sidebar-mas-lista .mas-plan-badge{ font-size:0.6rem; padding: 2px 7px; }
.plan-hero{
padding: 20px 18px; border-radius:16px; margin-bottom:16px; border:1px solid var(--line);
background: radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), .16), transparent 60%), var(--bg-panel);
}
.plan-hero-eyebrow{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--accent); }
.plan-hero h3{ margin: 6px 0 4px; font-size:1.25rem; color: var(--text); }
.plan-hero p{ margin:0; color: var(--text-dim); font-size:0.9rem; line-height:1.45; }
.plan-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px){ .plan-cols{ grid-template-columns: 1fr; } }
.plan-col{ border:1px solid var(--line); border-radius:16px; padding:16px; background: var(--bg-panel); }
.plan-col.pro{ border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset; }
.plan-col-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.plan-col-head b{ font-size:1.05rem; color: var(--text); }
.plan-col-head span{ font-weight:700; color: var(--text); }
.plan-col-head small{ font-weight:500; color: var(--text-dim); margin-left:2px; }
.plan-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:0.86rem; color: var(--text); }
.plan-lista li{ display:flex; gap:8px; align-items:flex-start; line-height:1.35; }
.plan-lista li.no{ color: var(--text-dim); }
.plan-check{ width:18px; height:18px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:0.7rem; font-weight:800;
background: var(--stock-ok-soft); color: var(--stock-ok); }
.plan-lista li.no .plan-check{ background: var(--bg-panel-2); color: var(--text-dim); }
.plan-pack-titulo{ margin: 14px 0 8px; font-size:0.78rem; font-weight:700; color: var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.plan-nota{ margin: 12px 0 0; font-size:0.78rem; color: var(--text-dim); line-height:1.45; }
.plan-cta{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.plan-cta button{ width:100%; margin:0; }
/* ---- 6.0 Primeros pasos (Inicio) ---- */
.pp{
background: var(--bg-panel); border:1px solid var(--line); border-radius:18px; padding: 16px 16px 12px;
background-image: radial-gradient(90% 120% at 100% 0%, rgba(var(--accent-rgb), .10), transparent 60%);
}
.pp[hidden]{ display:none !important; }
@media (max-width: 859px){ .pp{ order:0; } }
.pp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pp-head h2{ margin:0; font-size:1rem; font-weight:700; color: var(--text); text-transform:none; letter-spacing:-.01em; }
.pp-head p{ margin: 3px 0 0; font-size:0.78rem; color: var(--text-dim); }
.pp-head-acc{ display:flex; gap:4px; }
.pp-icono-btn{
width:32px; height:32px; min-height:0; padding:0; margin:0; border-radius:10px; border:0; background:transparent;
color: var(--text-dim); display:grid; place-items:center; cursor:pointer; font-size:0.9rem; box-shadow:none;
}
.pp-icono-btn:hover{ background: var(--bg-panel-2); color: var(--text); }
.pp-icono-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.pp-barra{ height:6px; border-radius:999px; background: var(--bg-panel-2); margin: 12px 0 8px; overflow:hidden; }
.pp-barra i{ display:block; height:100%; border-radius:inherit; background: var(--accent-vivido); transition: width .4s ease; }
.pp-lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:4px 10px; }
@media (max-width: 640px){ .pp-lista{ grid-template-columns: 1fr; } }
.pp-lista button{
all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding: 8px 6px; border-radius:10px; cursor:pointer;
}
.pp-lista button:hover{ background: var(--bg-panel-2); }
.pp-lista button:focus-visible{ outline:2px solid var(--accent); }
.pp-lista li.ok button{ cursor:default; }
.pp-lista li.ok button:hover{ background:transparent; }
.pp-check{
width:22px; height:22px; flex-shrink:0; border-radius:50%; border: 2px solid var(--line); display:grid; place-items:center;
}
.pp-lista li.siguiente .pp-check{ border-color: var(--accent); }
.pp-lista li.ok .pp-check{ background: var(--stock-ok); border-color: var(--stock-ok); }
.pp-check svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.pp-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pp-txt b{ font-size:0.86rem; font-weight:600; color: var(--text); }
.pp-txt small{ font-size:0.74rem; color: var(--text-dim); }
.pp-lista li.ok .pp-txt b{ color: var(--text-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
.pp-ir{ width:16px; height:16px; fill:none; stroke: var(--text-dim); stroke-width:2; flex-shrink:0; }
.pp-pie{ margin: 8px 6px 2px; font-size:0.76rem; color: var(--text-dim); }
.pp-premio p{ margin: 10px 0; font-size:0.88rem; color: var(--text); line-height:1.45; }
.pp-premio .btn-small{ margin:0; }
.pp-mini{ padding:0; }
.pp-mini-btn{
all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:12px; padding: 10px 14px; cursor:pointer; border-radius:18px;
}
.pp-mini-btn > svg{ width:18px; height:18px; fill:none; stroke: var(--text-dim); stroke-width:2; margin-left:auto; flex-shrink:0; }
.pp-mini-txt{ display:flex; flex-direction:column; min-width:0; }
.pp-mini-txt b{ font-size:0.88rem; color: var(--text); }
.pp-mini-txt small{ font-size:0.74rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-anillo{
--pp: 0; width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
background: conic-gradient(var(--accent-vivido) calc(var(--pp) * 1%), var(--bg-panel-2) 0);
}
.pp-anillo span{ width:32px; height:32px; border-radius:50%; background: var(--bg-panel); display:grid; place-items:center; font-size:0.7rem; font-weight:700; color: var(--text); }
/* ---- 6.0 Notas: resumen que filtra, buscador, filtros por estado y prioridad ---- */
.notas-resumen{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin: 0 0 14px; min-height:0; flex-shrink:0; }
.notas-buscar-row, .notas-filtros-row, .notas-prio-filtros{ flex-shrink:0; }
.notas-resumen:empty{ display:none; }
.notas-stat{
all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding: 10px 12px;
border-radius:14px; border:1px solid var(--line); background: var(--bg-panel); transition: border-color .15s ease, background .15s ease;
}
.notas-stat b{ font-size:1.15rem; font-weight:700; color: var(--text); font-variant-numeric: tabular-nums; }
.notas-stat span{ font-size:0.72rem; color: var(--text-dim); }
.notas-stat:hover{ border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.notas-stat.active{ border-color: var(--accent-vivido); background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel)); }
.notas-stat.hoy b{ color: var(--accent); }
.notas-stat.vencidas b{ color: var(--stock-sin); }
.notas-stat:focus-visible{ outline:2px solid var(--accent); }
@media (max-width: 420px){ .notas-stat{ padding: 8px 9px; } .notas-stat b{ font-size:1rem; } }
.notas-buscar-row{ display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.notas-buscar{
flex:1; display:flex; align-items:center; gap:8px; height:42px; padding: 0 12px; border-radius:12px;
border:1px solid var(--line); background: var(--bg-panel-2);
}
.notas-buscar:focus-within{ border-color: var(--accent-vivido); }
.notas-buscar svg{ width:17px; height:17px; fill:none; stroke: var(--text-dim); stroke-width:2; flex-shrink:0; }
.notas-buscar input{ all:unset; flex:1; min-width:0; font-size:0.9rem; color: var(--text); }
.notas-buscar input::placeholder{ color: var(--text-dim); }
.notas-filtros-row{ margin-bottom:8px; }
.notas-filtros-row .notas-filtros{
overflow-x:auto; scrollbar-width:none; background:transparent; border:0; padding:0; gap:6px; flex-wrap:nowrap;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
}
.notas-filtros-row .notas-filtros::-webkit-scrollbar{ display:none; }
.notas-filtros-row .notas-filtros .filtro-chip{
flex: 0 0 auto; white-space:nowrap; border-radius:999px; padding: 7px 13px; font-size:0.8rem;
border:1px solid var(--line); background: var(--bg-panel);
}
.notas-filtros-row .notas-filtros .filtro-chip.active{ background: var(--accent-vivido); border-color: transparent; color:#201400; }
.notas-cnt{ margin-left:4px; font-size:0.72rem; opacity:.7; font-variant-numeric: tabular-nums; }
.notas-cnt:empty{ display:none; }
.notas-prio-filtros{ display:flex; align-items:center; gap:6px; margin: 0 0 14px; flex-wrap:wrap; }
.notas-prio-filtros-label{ font-size:0.74rem; color: var(--text-dim); margin-right:2px; }
.notas-prio-filtros .prio-chip{ padding: 5px 10px; font-size:0.74rem; opacity:.75; }
.notas-prio-filtros .prio-chip.active{ opacity:1; box-shadow: 0 0 0 1.5px currentColor inset; }
.notas-page.seleccionando .notas-buscar-row,
.notas-page.seleccionando .notas-prio-filtros{ display:none; }
.notas-empty .btn-small{ margin-top:12px; }
.notas-add-form{ border-radius:16px; }
.nota-item{ border-radius:14px; }
/* Formulario de nota compacto: prioridad, fecha y "Agregar" aparecen al escribir. */
.notas-add-form:not(:focus-within):has(textarea:placeholder-shown){ padding:10px; gap:0; }
.notas-add-form:not(:focus-within):has(textarea:placeholder-shown) .notas-add-opciones,
.notas-add-form:not(:focus-within):has(textarea:placeholder-shown) #btnAddNota{ display:none; }
/* ---- 6.1 Ayuda y soporte (rehecho): buscador grande, temas con ícono, preguntas y contacto al costado en computadora ---- */
#masAyudaSoporteOverlay .notas-page{ max-width:1080px; }
.ayc{ display:flex; flex-direction:column; gap:22px; padding-bottom:28px; }
.ayc-hero{
display:flex; flex-direction:column; gap:6px; padding: 22px 20px 20px; border-radius:20px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), .16), transparent 60%),
var(--bg-panel);
border:1px solid var(--line);
}
.ayc-hero h3{ margin:0; font-size:1.35rem; font-weight:750; letter-spacing:-0.02em; color: var(--text); text-transform:none; }
.ayc-hero p{ margin:0 0 10px; font-size:0.88rem; color: var(--text-dim); }
.ayc-buscar{
display:flex; align-items:center; gap:10px; padding: 0 16px; height:50px; border-radius:14px; cursor:text;
background: var(--bg); border:1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease;
}
.ayc-buscar:focus-within{ border-color: var(--accent-vivido); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.ayc-buscar svg{ width:19px; height:19px; fill:none; stroke: var(--text-dim); stroke-width:2; flex-shrink:0; }
.ayc-buscar input{ all:unset; flex:1; min-width:0; font-size:0.95rem; color: var(--text); }
.ayc-buscar input::placeholder{ color: var(--text-dim); opacity:.8; }
.ayc-cols{ display:flex; flex-direction:column; gap:22px; }
.ayc-main, .ayc-side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
@media (min-width: 900px){
.ayc-cols{ display:grid; grid-template-columns: minmax(0, 1fr) 340px; align-items:start; gap:24px; }
.ayc-side{ position:sticky; top:12px; }
}
.ayc-temas{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
@media (min-width: 600px){ .ayc-temas{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ayc-tema{
all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; min-width:0;
padding: 12px; border-radius:14px; background: var(--bg-panel); border:1px solid var(--line);
transition: border-color .15s ease, background .15s ease;
}
.ayc-tema:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ayc-tema.active{ border-color: var(--accent-vivido); background: color-mix(in srgb, var(--accent-vivido) 10%, var(--bg-panel)); }
.ayc-tema:focus-visible{ outline: 2px solid var(--accent); outline-offset:2px; }
.ayc-tema-ico{ width:36px; height:36px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; background: var(--bg-panel-2); color: var(--accent); }
.ayc-tema.active .ayc-tema-ico{ background: var(--accent-vivido); color:#201400; }
.ayc-tema-ico svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ayc-tema-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ayc-tema-txt b{ font-size:0.86rem; font-weight:650; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ayc-tema-txt small{ font-size:0.74rem; color: var(--text-dim); }
.ayc-subtitulo{ margin: 10px 2px 0; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ayc-lista{ display:flex; flex-direction:column; gap:8px; }
.ayc-art{ border-radius:14px; background: var(--bg-panel); border:1px solid var(--line); overflow:hidden; transition: border-color .15s ease; }
.ayc-art[open]{ border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ayc-art summary{
list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding: 14px 16px; font-size:0.92rem; font-weight:600; color: var(--text); line-height:1.35;
}
.ayc-art summary::-webkit-details-marker{ display:none; }
.ayc-art summary svg{ width:18px; height:18px; fill:none; stroke: var(--text-dim); stroke-width:2; flex-shrink:0; transition: transform .2s ease; }
.ayc-art[open] summary svg{ transform: rotate(180deg); }
.ayc-art-cuerpo{ padding: 0 16px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ayc-art-cuerpo p{ margin:0; font-size:0.88rem; line-height:1.55; color: var(--text-dim); }
.ayc-art-ir{
all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding: 8px 12px; border-radius:999px;
font-size:0.82rem; font-weight:650; color: var(--accent); background: rgba(var(--accent-rgb), .1);
}
.ayc-art-ir svg{ width:15px; height:15px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ayc-ver-todas{ all:unset; cursor:pointer; align-self:center; padding: 10px 16px; font-size:0.86rem; font-weight:650; color: var(--accent); }
.ayc-vacio{ display:flex; flex-direction:column; gap:4px; padding: 26px 16px; text-align:center; font-size:0.88rem; color: var(--text-dim); border-radius:14px; border:1px dashed var(--line); }
.ayc-vacio b{ color: var(--text); }
.ayc-card{ display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:18px; background: var(--bg-panel); border:1px solid var(--line); }
.ayc-card h4{ margin:0; font-size:0.98rem; font-weight:700; color: var(--text); text-transform:none; letter-spacing:0; }
.ayc-card-head{ display:flex; gap:12px; align-items:flex-start; }
.ayc-card-head p{ margin:2px 0 0; font-size:0.8rem; color: var(--text-dim); line-height:1.4; }
.ayc-card-ico{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.ayc-card-ico svg{ width:19px; height:19px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ayc-tipos{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:6px; }
.ayc-tipo{
all:unset; box-sizing:border-box; cursor:pointer; text-align:center; padding: 9px 8px; border-radius:10px;
font-size:0.8rem; font-weight:600; color: var(--text-dim); background: var(--bg-panel-2); border:1px solid transparent;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ayc-tipo.active{ color: var(--text); border-color: var(--accent-vivido); background: color-mix(in srgb, var(--accent-vivido) 12%, var(--bg-panel-2)); }
.ayc-tipo:focus-visible{ outline: 2px solid var(--accent); outline-offset:2px; }
.ayc-contacto #ayudaSoporteTexto{ margin:0; min-height:110px; }
.ayc-diag{ display:flex; align-items:center; gap:8px; font-size:0.78rem; color: var(--text-dim); cursor:pointer; }
.ayc-diag input{ width:auto; margin:0; accent-color: var(--accent-vivido); }
.ayc-enviar{ margin:0; width:100%; }
.ayuda-enviados:empty{ display:none; }
.ayuda-enviados h5{ margin: 4px 0 2px; font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-dim); }
.ayuda-enviado{ display:grid; grid-template-columns: auto 1fr auto; gap:8px; align-items:center; padding: 8px 0; border-top:1px solid var(--line); }
.ayuda-enviado p{ margin:0; font-size:0.8rem; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ayuda-enviado time{ font-size:0.72rem; color: var(--text-dim); }
.ayuda-enviado-tipo{ font-size:0.68rem; font-weight:700; padding: 2px 8px; border-radius:999px; background: var(--accent-soft); color: var(--accent); }
.ayc-herr{ gap:4px; }
.ayc-herr h4{ margin-bottom:6px; }
.ayc-herr-fila{
all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding: 10px 8px; margin: 0 -8px; border-radius:12px;
}
.ayc-herr-fila:hover{ background: var(--bg-panel-2); }
.ayc-herr-fila:focus-visible{ outline: 2px solid var(--accent); outline-offset:0; }
.ayc-herr-ico{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; background: var(--bg-panel-2); color: var(--text); }
.ayc-herr-ico svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ayc-herr-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ayc-herr-txt b{ font-size:0.86rem; font-weight:650; color: var(--text); }
.ayc-herr-txt small{ font-size:0.76rem; color: var(--text-dim); line-height:1.35; }
/* 6.1: los cuadros de texto que crecen solos lo hacen con CSS (sin JS en cada tecla, ver ajustarAlturaNotaInput). */
#fNotaTexto, #ayudaSoporteTexto, #cfgReservasMensajeAprobacion{ field-sizing: content; overflow-y:auto; }
/* ---- 6.0 Servicios: tarjeta con ícono o foto en vez de iniciales ---- */
.servicio-card{ gap:12px; padding:10px 12px 10px 10px; }
.servicio-visual{
width:48px; height:48px; min-height:auto; padding:0; flex-shrink:0; border:0; border-radius:12px; overflow:hidden; cursor:pointer;
display:flex; align-items:center; justify-content:center; color:#fff;
background: linear-gradient(140deg, var(--serv-color, var(--accent-vivido)), color-mix(in srgb, var(--serv-color, var(--accent-vivido)) 62%, #000));
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.servicio-visual svg{ width:24px; height:24px; stroke: currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.servicio-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.servicio-card .servicio-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
.servicio-precio{ font-weight:700; color: var(--accent); font-size:0.95rem; white-space:nowrap; flex-shrink:0; }
.servicio-card-acciones{ display:flex; gap:6px; flex-shrink:0; }
@media (max-width: 480px){
.servicio-card{ gap:10px; }
.servicio-visual{ width:44px; height:44px; }
.servicio-card-acciones{ gap:4px; }
.servicio-card-acciones .servicio-icon-btn{ width:32px; height:32px; }
/* En celular editar es tocar la imagen o el lápiz; el lápiz se oculta para dar aire al nombre. */
.servicio-card-acciones .servicio-icon-btn.editar{ display:none; }
}
/* Formulario: vista previa + grilla de íconos */
.servicio-imagen-fila{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.servicio-imagen-preview{
width:64px; height:64px; border-radius:16px; overflow:hidden; flex-shrink:0; color:#fff;
display:flex; align-items:center; justify-content:center;
background: linear-gradient(140deg, var(--serv-color, var(--accent-vivido)), color-mix(in srgb, var(--serv-color, var(--accent-vivido)) 62%, #000));
}
.servicio-imagen-preview svg{ width:30px; height:30px; stroke: currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.servicio-imagen-preview img{ width:100%; height:100%; object-fit:cover; }
.servicio-imagen-acc{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.servicio-imagen-acc small{ width:100%; color: var(--text-dim); font-size:0.74rem; }
.servicio-iconos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap:6px; }
.servicio-icono-op{
height:40px; min-height:auto; padding:0; border-radius:10px; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim);
display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.servicio-icono-op svg{ width:20px; height:20px; stroke: currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.servicio-icono-op:hover{ color: var(--text); }
.servicio-icono-op.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }
/* ---- 6.0 Gráficos: comparar dos puntos (dos dedos o arrastrando con el mouse) ---- */
.stat-chart-banda{ position:absolute; top:0; height:var(--alto-grafico, 120px); pointer-events:none; opacity:0; transition: opacity .1s ease; }
.stat-chart-banda.activo{ opacity:0.1; }
.stat-chart-inner{ user-select:none; -webkit-user-select:none; }
/* ---- 6.0 Turnos recurrentes ---- */
.rep{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.rep[hidden], .rep-opciones[hidden]{ display:none; }
.rep-opciones{ display:flex; flex-direction:column; gap:12px; padding: 12px 14px; border:1px solid var(--line); border-radius:12px; }
.rep-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.rep-etq{ width:84px; flex-shrink:0; font-size:0.8rem; color: var(--text-dim); }
.rep-dias{ display:flex; gap:6px; flex-wrap:wrap; }
.rep-dias button{
width:36px; height:36px; min-height:auto; padding:0; border-radius:50%; font-size:0.82rem; font-weight:700;
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); cursor:pointer;
}
.rep-dias button.active{ background: var(--accent-vivido); border-color: var(--accent-vivido); color: #201400; }
.rep-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.rep-chips button{
min-height:auto; height:32px; padding: 0 12px; border-radius:999px; font-size:0.8rem; font-weight:600;
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); cursor:pointer; white-space:nowrap;
}
.rep-chips button.active{ background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); }
.rep-fin-valor{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color: var(--text-dim); }
.rep-cantidad{ display:inline-flex; align-items:center; gap:8px; }
.rep-cantidad[hidden], #fRepetirHasta[hidden]{ display:none !important; }
.fm .rep-cantidad input{ width:72px !important; height:36px !important; min-height:36px !important; text-align:center; }
.fm #fRepetirHasta{ height:36px !important; min-height:36px !important; width:auto !important; }
.rep-preview{ margin:0; font-size:0.8rem; color: var(--text-dim); }
.rep-preview strong{ color: var(--text); }
@media (max-width: 480px){ .rep-etq{ width:100%; } }
.rep-choques{ text-align:left; margin: 8px 0; padding-left: 18px; font-size:0.85rem; }
.marca-serie{ width:12px; height:12px; margin-left:4px; vertical-align:-1px; stroke: currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0.6; flex-shrink:0; }
/* ---- 6.0 Equipo ---- */
.eq{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
.eq-bloque{ background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.eq-bloque h3{ margin:0; font-size:1rem; }
.eq-head{ display:flex; align-items:center; justify-content:space-between; }
.eq-cuenta{ font-size:0.76rem; color: var(--text-dim); }
.eq-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.eq-lista > li + li{ border-top:1px solid var(--line); }
.eq-miembro, .eq-negocio{
width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:auto; margin:0;
background:none; border:0; border-radius:0; color: var(--text); text-align:left; cursor:pointer; font: inherit;
}
.eq-miembro:disabled{ cursor:default; opacity:1; }
.eq-miembro:not(:disabled):hover, .eq-negocio:hover{ background: color-mix(in srgb, var(--bg-panel-2) 60%, transparent); }
.eq-avatar{ width:36px; height:36px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; background: var(--accent-soft); color: var(--accent); }
.eq-miembro-info, .eq-negocio-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.eq-miembro-info strong, .eq-negocio-info strong{ font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eq-miembro-info small, .eq-negocio-info small{ font-size:0.76rem; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eq-estado{ font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background: var(--bg-panel-2); color: var(--text-dim); flex-shrink:0; }
.eq-estado.activo{ background: var(--stock-ok-soft, rgba(76,195,138,.15)); color: var(--stock-ok, var(--ok)); }
.eq-negocios{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.eq-negocio + .eq-negocio{ border-top:1px solid var(--line); }
.eq-negocio.active{ background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.eq-cambiar{ font-size:0.8rem; font-weight:700; color: var(--accent); }
.eq-plan{ border-color: var(--accent-vivido); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 70%, var(--bg-panel)), var(--bg-panel)); }
.eq-plan p{ margin:0; font-size:0.88rem; color: var(--text-dim); line-height:1.45; }
.eq-plan .eq-precio{ color: var(--text); font-weight:600; }
.eq-sub{ font-size:0.8rem; color: var(--text-dim); margin-top:4px; }
.eq-email{ margin:-4px 0 0; font-size:0.8rem; color: var(--text-dim); }
.eq-acciones{ display:flex; gap:8px; }
.eq-acciones > *{ flex:1; margin:0; }
.eq-peligro{ display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--line); }
.eq-quitar{ color: var(--warn, #e05f5f) !important; }
.eq-aviso{ margin:0; padding:12px 14px; border-radius:12px; background: var(--warn-soft, rgba(224,95,95,.12)); color: var(--text); font-size:0.88rem; }
.mas-equipo-negocio{ margin-left:auto; font-size:0.72rem; color: var(--text-dim); max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mas-equipo-negocio[hidden]{ display:none; }
/* Lo que el rol no puede usar no se muestra (el servidor igual lo rechaza). */
body.eq-sin-ventas .tab-btn[data-tab="ventas"], body.eq-sin-ventas #btnAccionVenta,
body.eq-sin-finanzas #masEstadisticasBtn, body.eq-sin-finanzas #headerEstadisticasBtn, body.eq-sin-finanzas #inicioIngresosChart,
body.eq-sin-finanzas .ini-hero-top, body.eq-sin-finanzas .ini-stat:has(#inicioGananciaHoyValor), body.eq-sin-finanzas #btnAccionGasto,
body.eq-sin-servicios #serviciosList .servicio-card-acciones, body.eq-sin-servicios #btnAgregarServicio,
body.eq-sin-config #masConfiguracionBtn, body.eq-sin-config #sidebarLinkReservas,
body.eq-sin-clientes #clientesBtn,
body.eq-ajeno #masPlanBtn, body.eq-ajeno #masRespaldoBtn, body.eq-ajeno #primerosPasos{ display:none !important; }
body.eq-sin-finanzas .ini-stats{ grid-template-columns: 1fr 1fr; }
body.eq-sin-finanzas .ini-hero{ padding-top:0; }
/* ---- 6.0 Idioma ---- */
.idioma-sel .modal-box{ max-width:360px; text-align:left; }
.idioma-lista{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin: 12px 0 14px; }
.idioma-op{ display:flex; align-items:center; justify-content:space-between; min-height:auto; margin:0; padding:14px 16px; background:none; border:0; border-radius:0; color: var(--text); font: inherit; font-weight:600; cursor:pointer; text-align:left; }
.idioma-op + .idioma-op{ border-top:1px solid var(--line); }
.idioma-op:hover{ background: color-mix(in srgb, var(--bg-panel-2) 60%, transparent); }
.idioma-op.active{ color: var(--accent); }
.idioma-op svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* ============================================================
6.2 — Resaltado al llegar desde Ayuda ("Mostrarme dónde") o desde Equipo a Tu plan.
Mismo amarillo que el turno resaltado de la agenda.
============================================================ */
@keyframes ayudaResaltadoPulso{
0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-vivido) 0%, transparent); }
20%, 60%{ box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent-vivido), 0 0 28px color-mix(in srgb, var(--accent-vivido) 45%, transparent); }
40%, 80%{ box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--accent-vivido) 55%, transparent); }
}
.ayuda-resaltado{ animation: ayudaResaltadoPulso 2.4s ease-in-out 1; }
/* ============================================================
6.2 — Configuración agrupada por tema. En computadora los grupos
van en columnas y la pantalla usa más ancho.
============================================================ */
.cfg-hub{ display:flex; flex-direction:column; gap:18px; }
.cfg-grupo{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.cfg-grupo-titulo{ margin:0 4px; font-size:0.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--text-dim); }
.cfg-grupo-lista{ display:flex; flex-direction:column; background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cfg-grupo-lista .config-hub-card{ width:100%; margin:0; }
.config-hub-icon-idioma{ background: var(--bg-panel-2); color: var(--accent); }
#masIdiomaActual{ color: var(--text-dim); }
@media (min-width: 860px){
#masConfiguracionOverlay .notas-page{ max-width: 1180px; padding-left: 28px; padding-right: 28px; }
#masConfiguracionOverlay .config-seccion-body{ display:block; }
.cfg-hub{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; align-items:start; }
}
@media (min-width: 1280px){
.cfg-hub{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ============================================================
6.2 — Equipo: arreglo de layout. .config-seccion-body en computadora es flex con wrap y cada hijo
flex-basis 100%; en columna eso hacía que cada bloque ocupe todo el alto y se fuera a otra columna.
============================================================ */
.config-seccion-body.eq{ flex-direction:column; flex-wrap:nowrap; max-width:720px; }
.config-seccion-body.eq > *{ flex:none; }
.eq-plan{ position:relative; gap:10px; padding:20px; }
.eq-plan h3{ font-size:1.15rem; }
.eq-plan-tag{ align-self:flex-start; font-size:0.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--accent); }
.eq-roles-demo{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
.eq-roles-demo li{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background: color-mix(in srgb, var(--bg-panel-2) 70%, transparent); border:1px solid var(--line); }
.eq-roles-demo b{ font-size:0.86rem; color: var(--text); }
.eq-roles-demo span{ font-size:0.76rem; color: var(--text-dim); line-height:1.3; }
@media (max-width: 520px){ .eq-roles-demo{ grid-template-columns: 1fr; } }
.eq-plan-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:4px; }
.eq-plan-pie .eq-precio{ margin:0; font-size:0.86rem; color: var(--text-dim); }
.eq-plan-pie .eq-precio strong{ font-size:1.05rem; color: var(--text); }
.eq-plan-pie .eq-precio small{ display:block; font-size:0.74rem; }
.eq-plan-pie button{ margin:0; width:auto; padding-left:20px; padding-right:20px; }
@media (max-width: 520px){ .eq-plan-pie button{ width:100%; } }
/* ---- Tu plan: tres columnas (Gratis / Pro / Equipo) ---- */
#masPlanOverlay .notas-page{ max-width: 1100px; }
@media (min-width: 900px){ .plan-cols{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-col{ position:relative; display:flex; flex-direction:column; }
.plan-col-tag{ position:absolute; top:-10px; right:14px; font-size:0.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background: var(--accent); color: var(--bg); }
.plan-col.equipo .plan-nota{ flex:1; }
.plan-col-btn{ margin-top:14px !important; width:100%; }
/* ============================================================
6.2 — Formulario de turno más liviano. Contacto y notas plegados
hasta que hagan falta; en computadora, dos columnas (quién y qué /
cuándo) para no tener que scrollear una lista larga.
============================================================ */
#turnoProfesionalSec[hidden]{ display:none !important; }
.fm-plegado-btn{
align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
min-height:auto; height:auto; padding:6px 10px 6px 8px; margin:-4px 0 0 -8px; border:0; border-radius:8px;
background:none; color: var(--accent); font-size:0.84rem; font-weight:600; cursor:pointer;
}
.fm-plegado-btn:hover{ background: var(--fm-hover); }
.fm-plegado-btn svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; }
#panelTurnoForm:not(.tf-contacto-abierto) #tfContactoRow{ display:none; }
#panelTurnoForm.tf-contacto-abierto #tfContactoToggle{ display:none; }
#panelTurnoForm:not(.tf-notas-abierto) #tfNotasCampo{ display:none; }
#panelTurnoForm.tf-notas-abierto #tfNotasToggle{ display:none; }
/* Notas plegadas: es solo un link, no necesita el aire ni la raya de una sección entera. */
#panelTurnoForm:not(.tf-notas-abierto) .fm-sec-notas{ border-top:0; margin-top:6px; padding-top:6px; }
/* Títulos de sección más suaves y repetición integrada a la sección, sin caja propia. */
#panelTurnoForm .fm-sec-title{ font-size:0.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--text-dim); }
#panelTurnoForm .rep-opciones{ background: color-mix(in srgb, var(--bg-panel-2) 45%, transparent); border-color: transparent; }
/* Repetir: control segmentado, − / + y atajos. */
.rep-seg{ display:inline-flex; padding:3px; border-radius:10px; background: var(--bg-panel-2); border:1px solid var(--line); }
.rep-seg button{ min-height:auto; height:30px; padding:0 12px; border:0; border-radius:8px; background:none; color: var(--text-dim); font-size:0.8rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.rep-seg button.active{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.rep-fin-fila{ margin-top:-4px; }
.rep-fin-valor{ flex-wrap:wrap; }
.rep-step{ width:34px; height:34px; min-height:auto; padding:0; border-radius:50%; border:1px solid var(--line); background: var(--bg-panel-2); color: var(--text); font-size:1.05rem; font-weight:700; cursor:pointer; }
.rep-step:hover{ border-color: var(--fm-line-fuerte); }
.fm .rep-cantidad input{ width:56px !important; -moz-appearance:textfield; }
.fm .rep-cantidad input::-webkit-outer-spin-button, .fm .rep-cantidad input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rep-hasta[hidden]{ display:none !important; }
.rep-fecha-btn{ display:inline-flex; align-items:center; gap:8px; min-height:auto; height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background: var(--fm-input); color: var(--text); font-size:0.86rem; font-weight:600; cursor:pointer; }
.rep-fecha-btn:hover{ border-color: var(--fm-line-fuerte); }
.rep-fecha-btn svg{ width:16px; height:16px; fill:none; stroke: var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rep-atajos{ display:flex; gap:6px; flex-wrap:wrap; }
.rep-atajos button{ min-height:auto; height:28px; padding:0 10px; border-radius:999px; border:1px dashed var(--line); background:none; color: var(--text-dim); font-size:0.76rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.rep-atajos button:hover{ color: var(--text); border-style:solid; }
.rep-atajos button.active{ border-style:solid; border-color: var(--accent-vivido); color: var(--accent); background: var(--accent-soft); }
.rep-fechas{ display:flex; flex-wrap:wrap; gap:6px; }
.rep-fechas:empty{ display:none; }
.rep-fecha-pill{ font-size:0.74rem; font-weight:600; padding:4px 9px; border-radius:999px; background: var(--bg-panel); border:1px solid var(--line); color: var(--text); text-transform:capitalize; }
.rep-fecha-pill.mas{ color: var(--text-dim); text-transform:none; }
@media (min-width: 900px){
#modalEditarTurnoOverlay .cliente-detalle-box{ max-width: 900px; }
#panelTurnoForm .fm-body{
display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
column-gap: 0; align-items:start;
}
#panelTurnoForm .fm-sec{ margin-top:0; border-top:0; padding-top:22px; }
#panelTurnoForm .fm-sec-cliente{ grid-column:1; grid-row:1; padding-right:28px; }
#panelTurnoForm .fm-sec-servicios{ grid-column:1; grid-row:2 / span 3; padding-right:28px; }
#panelTurnoForm .fm-sec-cuando{ grid-column:2; grid-row:1 / span 2; }
#panelTurnoForm #turnoProfesionalSec{ grid-column:2; grid-row:3; }
#panelTurnoForm .fm-sec-notas{ grid-column:2; grid-row:4; }
#panelTurnoForm :is(.fm-sec-cuando, #turnoProfesionalSec, .fm-sec-notas){ padding-left:28px; border-left:1px solid var(--line); align-self:stretch; }
#panelTurnoForm .fm-sec-servicios{ align-self:stretch; }
#panelTurnoForm .fm-sec-servicios .fm-sec-head + *{ margin-top:2px; }
}
/* ============================================================
6.2 — Accesos rápidos de Inicio sin cuadraditos de color.
============================================================ */
.ini-acciones{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.ini-accion .ini-accion-ico{ width:34px; height:34px; border-radius:50%; background:none; border:1.5px solid color-mix(in srgb, var(--text) 22%, transparent); color: var(--text); transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.ini-accion .ini-accion-ico svg{ width:17px; height:17px; stroke-width:2.1; }
.ini-accion-principal{ background: var(--accent-vivido); border-color: var(--accent-vivido); color: #1d1300; }
.ini-accion-principal .ini-accion-ico{ border-color: rgba(29,19,0,.28); color: #1d1300; }
.ini-accion-principal .ini-accion-hint{ color: rgba(29,19,0,.66); }
.ini-accion-principal:hover{ background: color-mix(in srgb, var(--accent-vivido) 88%, #fff); border-color: var(--accent-vivido); }
.ini-accion-entra:hover{ border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.ini-accion-entra:hover .ini-accion-ico{ border-color: var(--ok); color: var(--ok); transform: translate(-1px, 1px); }
.ini-accion-sale:hover{ border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.ini-accion-sale:hover .ini-accion-ico{ border-color: var(--warn); color: var(--warn); transform: translate(1px, -1px); }
@media (max-width: 560px){ .ini-acciones{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---- Servicios: anillo de duración en vez del ícono sobre degradé ---- */
.servicio-card:not(.con-foto) .servicio-visual{
position:relative; background:none; box-shadow:none; border-radius:50%; color: var(--text);
}
.servicio-visual .sv-dial{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.sv-dial .sv-track{ fill:none; stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width:3; }
.sv-dial.libre .sv-track{ stroke-dasharray: 3 4; }
.sv-dial .sv-arc{ fill:none; stroke: var(--serv-color, var(--accent-vivido)); stroke-width:3; stroke-linecap:round; }
.sv-dial-txt{ position:relative; display:flex; align-items:baseline; gap:1px; font-size:0.82rem; font-weight:750; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.sv-dial-txt small{ font-size:0.58rem; font-weight:600; color: var(--text-dim); }
.servicio-card:not(.con-foto) .servicio-visual > svg:not(.sv-dial){ position:relative; width:20px; height:20px; color: var(--serv-color, var(--text)); }
/* ============================================================
6.2 — Login en computadora: panel derecho rehecho.
============================================================ */
@media (min-width: 960px){
.login-lado-muestra{ position:relative; overflow:hidden; background: var(--bg); }
.lm-fondo{
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(60% 50% at 85% 10%, rgba(var(--accent-rgb), 0.16), transparent 70%),
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.lm-contenido{ position:relative; max-width:560px; width:100%; }
.lm-eyebrow{ margin:0 0 18px; font-size:0.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); }
.lm-titulo{ font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height:1.02; letter-spacing:-0.035em; font-weight:800; margin:0 0 16px; color: var(--text); }
.lm-titulo span{ color: var(--text-dim); }
.lm-bajada{ font-size:1.02rem; max-width:420px; margin:0 0 34px; }
.lm-grafico{ position:relative; height:170px; margin: 0 0 34px; border-bottom:1px solid var(--line); }
.lm-grafico svg{ width:100%; height:100%; display:block; overflow:visible; }
.lm-base{ stroke: var(--text-dim); stroke-width:1; stroke-dasharray:4 5; opacity:.55; vector-effect: non-scaling-stroke; }
.lm-area{ fill: url(#lmGrad); opacity:0; animation: lmAparecer .9s ease 1.3s forwards; }
.lm-linea{ fill:none; stroke: var(--accent-vivido); stroke-width:2.4; stroke-linecap:round; vector-effect: non-scaling-stroke;
stroke-dasharray:1; stroke-dashoffset:1; animation: lmDibujar 1.8s cubic-bezier(.6,.05,.25,1) .2s forwards; }
.lm-punto{ position:absolute; right:-5px; top: calc(26 / 170 * 100% - 5px); width:10px; height:10px; border-radius:50%;
background: var(--accent-vivido); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); opacity:0;
animation: lmAparecer .3s ease 1.9s forwards, lmLatido 2.2s ease-out 2.2s infinite; }
.lm-grafico-etq{ position:absolute; left:0; bottom:10px; font-size:0.74rem; color: var(--text-dim); }
@keyframes lmDibujar{ to{ stroke-dashoffset:0; } }
@keyframes lmAparecer{ to{ opacity:1; } }
@keyframes lmLatido{ 0%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); } 100%{ box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
.lm-pilares{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:22px; }
.lm-pilares li{ display:flex; flex-direction:column; gap:4px; padding-top:14px; border-top:1px solid var(--line); font-size:0.84rem; line-height:1.45; color: var(--text-dim); }
.lm-num{ font-size:0.72rem; font-weight:700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing:.06em; margin-bottom:4px; }
.lm-pilares b{ font-size:0.95rem; font-weight:650; color: var(--text); }
.lm-rubros{ margin:0; font-size:0.78rem; color: var(--text-dim); opacity:.8; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce){
.lm-linea{ animation:none; stroke-dashoffset:0; }
.lm-area, .lm-punto{ animation:none; opacity:1; }
}
@media (max-width: 480px){
#repetirCada{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width:100%; }
.rep-fin-fila .rep-etq{ display:none; }
}
/* ---- Mercado Pago (mercadopago.js) ---- */
.reserva-pend-sena{ display:inline-block; margin-top:6px; padding:3px 8px; border-radius:6px; font-size:0.76rem; font-weight:700; }
.reserva-pend-sena.pagada{ background: var(--ok-soft); color: var(--ok); }
.reserva-pend-sena.pendiente{ background: var(--bg-panel-2); color: var(--text-dim); }
.reserva-pend-sena.devuelta{ background: var(--warn-soft); color: var(--warn); }
#cfgMpConectarBtn{ margin: 10px 0 4px; }
.plan-pago-campo{ display:flex; flex-direction:column; gap:4px; margin-top:12px; font-size:0.8rem; color: var(--text-dim); }
.plan-pago-campo input{ width:100%; }
.plan-suscripcion{ padding:12px 14px; border-radius:12px; background: var(--ok-soft); color: var(--text); font-size:0.86rem; line-height:1.4; }
/* ============================================================
6.2 — Ventana de pago del plan (abrirCheckoutPlan en v6.js)
============================================================ */
.ck-overlay{ align-items:center; justify-content:center; padding:16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .18s ease; }
.ck-overlay:not(.show){ opacity:0; }
.ck-box{
position:relative; width:100%; max-width:440px; max-height: calc(100dvh - 32px); overflow-y:auto;
background: var(--bg-panel); border:1px solid var(--line); border-radius:22px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
animation: ckEntrar .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes ckEntrar{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.ck-cerrar{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; min-height:auto; padding:0; border-radius:50%; border:0; background: color-mix(in srgb, var(--bg) 50%, transparent); color: var(--text-dim); cursor:pointer; display:grid; place-items:center; }
.ck-cerrar:hover{ color: var(--text); background: var(--bg-panel-2); }
.ck-cerrar svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; }
.ck-cuerpo{ display:flex; flex-direction:column; }
.ck-cargando{ display:flex; align-items:center; justify-content:center; gap:10px; padding:64px 24px; color: var(--text-dim); font-size:0.9rem; }
.ck-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color: var(--accent-vivido); animation: ckGirar .8s linear infinite; }
@keyframes ckGirar{ to{ transform: rotate(360deg); } }
.ck-error{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 24px 28px; text-align:center; }
.ck-error span{ color: var(--text-dim); font-size:0.88rem; margin-bottom:10px; }
.ck-head{ padding:28px 24px 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), .22), transparent 60%); border-bottom:1px solid var(--line); }
.ck-head.equipo{ background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--serv-2, #6aa8ff) 26%, transparent), transparent 60%); }
.ck-chip{ display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background: var(--accent-vivido); color:#1d1300; }
.ck-head h3{ margin:14px 0 6px; font-size:1.45rem; line-height:1.15; letter-spacing:-0.02em; color: var(--text); }
.ck-head p{ margin:0; font-size:0.9rem; line-height:1.45; color: var(--text-dim); }
.ck-personas{ margin:18px 24px 0; padding:16px; border:1px solid var(--line); border-radius:16px; display:grid; grid-template-columns: 1fr auto; gap:12px 14px; align-items:center; }
.ck-personas-txt{ display:flex; flex-direction:column; gap:3px; }
.ck-personas-txt b{ font-size:0.95rem; color: var(--text); }
.ck-personas-txt span{ font-size:0.78rem; color: var(--text-dim); }
.ck-stepper{ display:flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background: var(--bg-panel-2); border:1px solid var(--line); }
.ck-stepper button{ width:34px; height:34px; min-height:auto; padding:0; border-radius:50%; border:0; background: var(--bg-panel); color: var(--text); font-size:1.15rem; font-weight:700; cursor:pointer; }
.ck-stepper button:disabled{ opacity:.35; cursor:default; }
.ck-stepper output{ min-width:30px; text-align:center; font-size:1.1rem; font-weight:800; font-variant-numeric: tabular-nums; color: var(--text); }
.ck-avatares{ grid-column: 1 / -1; display:flex; align-items:center; }
.ck-avatares span{ width:26px; height:26px; border-radius:50%; margin-left:-6px; border:2px solid var(--bg-panel); background: linear-gradient(140deg, var(--accent-vivido), color-mix(in srgb, var(--accent-vivido) 55%, #000)); }
.ck-avatares span:first-child{ margin-left:0; }
.ck-avatares span.extra{ background: var(--bg-panel-2); border-color: var(--bg-panel); box-shadow: inset 0 0 0 1.5px var(--accent-vivido); }
.ck-avatares em{ margin-left:8px; font-style:normal; font-size:0.78rem; font-weight:700; color: var(--text-dim); }
.ck-beneficios{ list-style:none; margin:0; padding:18px 24px 4px; display:flex; flex-direction:column; gap:9px; }
.ck-beneficios li{ display:flex; gap:10px; align-items:flex-start; font-size:0.88rem; color: var(--text); line-height:1.35; }
.ck-beneficios svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; fill:none; stroke: var(--ok); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ck-resumen{ margin:16px 24px 0; padding:16px 0 0; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:8px; }
.ck-linea{ display:flex; justify-content:space-between; gap:12px; font-size:0.86rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ck-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:4px; }
.ck-total span{ font-size:0.95rem; font-weight:650; color: var(--text); }
.ck-total strong{ font-size:1.75rem; font-weight:800; letter-spacing:-0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ck-total small{ font-size:0.8rem; font-weight:600; color: var(--text-dim); }
.ck-equiv{ margin:0; font-size:0.74rem; color: var(--text-dim); }
.ck-pagar{
margin:20px 24px 0; height:52px; min-height:auto; border:0; border-radius:14px; cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:10px;
background: var(--accent-vivido); color:#1d1300; font-size:0.98rem; font-weight:750;
transition: transform .12s ease, filter .15s ease;
}
.ck-pagar:hover{ filter: brightness(1.06); }
.ck-pagar:active{ transform: scale(.985); }
.ck-pagar svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition: transform .15s ease; }
.ck-pagar:hover svg{ transform: translateX(3px); }
.ck-pagar.cargando{ opacity:.75; cursor:progress; }
.ck-seguro{ display:flex; gap:8px; align-items:flex-start; margin:12px 24px 22px; font-size:0.74rem; line-height:1.45; color: var(--text-dim); }
.ck-seguro svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 520px){
.ck-overlay{ align-items:flex-end; padding:0; }
.ck-box{ max-width:none; border-radius:22px 22px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
}
/* ============================================================
6.2 — Configuración en grilla pareja (reemplaza los grupos de distinto alto).
Las reglas viejas de .config-hub-card llevan !important, por eso acá también.
============================================================ */
.cfg-hub-bajada{ margin:0 2px 16px; font-size:0.88rem; color: var(--text-dim); }
.cfg-grilla{ display:grid !important; grid-template-columns: 1fr; gap:10px; }
.cfg-grilla .cfg-tile{
display:flex !important; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
min-height:0 !important; padding:16px !important; margin:0;
background: var(--bg-panel) !important; border:1px solid var(--line) !important; border-radius:18px !important;
cursor:pointer; position:relative; overflow:hidden;
transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.cfg-grilla .cfg-tile::after{
content:''; position:absolute; inset:auto -40% -60% auto; width:70%; aspect-ratio:1; border-radius:50%;
background: radial-gradient(circle, rgba(var(--accent-rgb), .14), transparent 70%); opacity:0; transition: opacity .25s ease; pointer-events:none;
}
.cfg-grilla .cfg-tile:hover{ border-color: color-mix(in srgb, var(--accent-vivido) 45%, var(--line)) !important; background: var(--bg-panel) !important; transform: translateY(-2px); }
.cfg-grilla .cfg-tile:hover::after{ opacity:1; }
.cfg-tile-top{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:10px; }
.cfg-tile-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background: var(--bg-panel-2); color: var(--accent); border:1px solid var(--line); }
.cfg-tile-ico svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cfg-tile-flecha{ width:18px; height:18px; fill:none; stroke: var(--text-dim); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.6; transition: transform .18s ease, opacity .18s ease, stroke .18s ease; }
.cfg-grilla .cfg-tile:hover .cfg-tile-flecha{ opacity:1; stroke: var(--accent); transform: translate(2px, -2px); }
.cfg-tile-titulo{ font-size:1rem; font-weight:700; color: var(--text); }
.cfg-tile-desc{ font-size:0.8rem; line-height:1.4; color: var(--text-dim); }
.cfg-tile-estado{
margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; max-width:100%;
font-size:0.78rem; font-weight:600; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cfg-tile-estado::before{ content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; background: var(--text-dim); opacity:.5; }
.cfg-tile-estado.on{ color: var(--text); }
.cfg-tile-estado.on::before{ background: var(--ok); opacity:1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
@media (min-width: 640px){
.cfg-grilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap:14px; }
.cfg-grilla .cfg-tile{ padding:20px !important; }
}
@media (min-width: 1100px){
.cfg-grilla{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- Ventana de pago: forma de pago, tarjeta, meses y cierre (abrirCheckoutPlan en v6.js) ---- */
.ck-seccion{ margin:22px 24px 0; }
.ck-label{ margin:0 0 10px; font-size:0.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.ck-opciones{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background: var(--bg-panel); }
.ck-opcion{
display:flex; align-items:center; gap:14px; width:100%; min-height:auto; margin:0; padding:14px 16px;
border:0; border-radius:0; background:transparent; color: var(--text); text-align:left; cursor:pointer; font: inherit;
transition: background .15s ease;
}
.ck-op + .ck-op{ border-top:1px solid var(--line); }
.ck-op{ transition: background .2s ease; }
.ck-op.abierto{ background: color-mix(in srgb, var(--accent-vivido) 5%, var(--bg-panel)); }
.ck-opcion:hover{ background: color-mix(in srgb, var(--bg-panel-2) 55%, transparent); }
.ck-opcion.activo{ background: transparent; }
.ck-op-ico{ width:40px; height:40px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); transition: color .15s ease, border-color .15s ease; }
.ck-op-ico svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ck-opcion.activo .ck-op-ico{ color: var(--accent); border-color: color-mix(in srgb, var(--accent-vivido) 45%, var(--line)); }
.ck-op-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ck-op-txt b{ font-size:0.92rem; font-weight:650; color: var(--text); }
.ck-op-txt span{ font-size:0.78rem; color: var(--text-dim); }
.ck-op-radio{ width:20px; height:20px; flex-shrink:0; border-radius:50%; border:2px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease; }
.ck-opcion.activo .ck-op-radio{ border-color: var(--accent-vivido); box-shadow: inset 0 0 0 4px var(--bg-panel), inset 0 0 0 10px var(--accent-vivido); }
/* Período: Mensual / Anual (el anual con el % de ahorro) */
.ck-periodo{ display:grid; grid-template-columns: 1fr 1fr; gap:4px; padding:4px; border-radius:16px; background: var(--bg-panel-2); border:1px solid var(--line); }
.ck-per{ min-height:auto; margin:0; padding:10px 8px; border:0; border-radius:12px; background:transparent; color: var(--text-dim); font: inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.ck-per b{ display:inline-flex; align-items:center; gap:6px; font-size:0.92rem; font-weight:700; color: var(--text-dim); }
.ck-per span{ font-size:0.74rem; font-variant-numeric: tabular-nums; }
.ck-per.activo{ background: var(--bg-panel); box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 1px var(--line); }
.ck-per.activo b{ color: var(--text); }
.ck-ahorro{ font-style:normal; font-size:0.68rem; font-weight:800; padding:2px 6px; border-radius:999px; background: var(--ok-soft); color: var(--ok); }
.ck-linea-ahorro{ color: var(--ok); }
/* Logos dentro de las opciones */
.ck-op-marcas{ display:flex !important; gap:4px; margin-top:4px; }
.ck-marca-mini{ display:block; width:28px; height:18px; border-radius:3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.ck-marca-mini svg{ display:block; width:100%; height:100%; }
.ck-op-ico-mp{ background:#fff; border-color: transparent; }
.ck-op-ico-mp svg{ width:30px; height:auto; stroke:none; }
.ck-opcion.activo .ck-op-ico-mp{ border-color: var(--accent-vivido); }
.ck-op-ico-tarjeta{ background:#fff; border-color: transparent; }
.ck-op-ico-tarjeta svg{ width:31px; height:auto; stroke:none; filter: drop-shadow(0 1.5px 1.5px rgba(17,19,29,.28)); }
.ck-opcion.activo .ck-op-ico-tarjeta{ border-color: var(--accent-vivido); }
/* El formulario de la forma de pago elegida se despliega justo debajo de ella (antes aparecía al fondo, lejos). */
.ck-desplegable{ display:grid; grid-template-rows: 0fr; opacity:0; transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.ck-op.abierto .ck-desplegable{ grid-template-rows: 1fr; opacity:1; }
.ck-desplegable-in{ min-height:0; overflow:hidden; }
.ck-op.abierto .ck-desplegable-in{ padding: 0 16px 16px; }
.ck-mp-pasos{ margin:0; padding:12px 14px 12px 34px; border-radius:12px; background: var(--bg-panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; font-size:0.8rem; line-height:1.45; color: var(--text-dim); }
.ck-mp-pasos li::marker{ color: var(--accent); font-weight:700; }
.ck-mp-pasos b{ color: var(--text); font-weight:650; }
.ck-ayuda{ margin:0; font-size:0.8rem; line-height:1.5; color: var(--text-dim); }
/* Tarjeta */
.ck-tarjeta{ display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px dashed var(--line); }
.ck-tarjeta[hidden]{ display:none; }
.ck-campo{ position:relative; display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
.ck-campo-label{ font-size:0.76rem; font-weight:600; color: var(--text-dim); }
.ck-input{
box-sizing:border-box; width:100%; height:46px; min-height:46px; margin:0; padding:0 14px;
display:flex; align-items:center;
background: var(--bg-panel); color: var(--text); border:1px solid var(--line); border-radius:12px;
font: inherit; font-size:15px; outline:none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ck-input::placeholder{ color: var(--text-dim); opacity:.8; }
.ck-input:focus, .ck-input:focus-within, .ck-input.foco{ border-color: var(--accent-vivido); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-vivido) 22%, transparent); }
.ck-input.invalido{ border-color: var(--warn); }
.ck-input-seguro iframe{ width:100% !important; height:22px !important; border:0; }
.ck-input-numero{ padding-right:132px; }
/* Marcas aceptadas a la derecha del número; al detectar la tarjeta queda una sola, más grande. */
.ck-marcas{ position:absolute; right:10px; bottom:11px; display:flex; gap:4px; pointer-events:none; }
.ck-marca{ display:block; width:36px; height:24px; border-radius:4px; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.25); opacity:.55; transition: opacity .2s ease, transform .2s ease; }
.ck-marca svg{ display:block; width:100%; height:100%; }
.ck-marcas.con-marca .ck-marca{ opacity:1; animation: ckMarca .25s cubic-bezier(.2,.8,.2,1); }
@keyframes ckMarca{ from{ opacity:0; transform: scale(.8); } to{ opacity:1; transform:none; } }
.ck-tipo-tarjeta{ font-style:normal; color: var(--text); font-weight:650; }
.ck-cargando-campo{ display:block; width:45%; height:10px; border-radius:6px; background: linear-gradient(90deg, var(--bg-panel-2), color-mix(in srgb, var(--bg-panel-2) 40%, var(--line)), var(--bg-panel-2)); background-size:200% 100%; animation: ckShimmer 1.2s linear infinite; }
@keyframes ckShimmer{ to{ background-position:-200% 0; } }
.ck-dos{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.ck-doc{ display:grid; grid-template-columns: 96px 1fr; gap:8px; }
.ck-doc select.ck-input{ padding:0 10px; cursor:pointer; }
/* Aviso cuando la tarjeta no carga */
.ck-aviso{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; border:1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--bg-panel)); }
.ck-aviso[hidden]{ display:none; }
.ck-aviso-ico{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:0.8rem; font-weight:800; color: var(--bg); background: var(--warn); }
.ck-aviso b{ display:block; font-size:0.88rem; color: var(--text); }
.ck-aviso > div > span{ display:block; margin-top:2px; font-size:0.8rem; line-height:1.45; color: var(--text-dim); }
.ck-aviso-acciones{ display:flex; gap:16px; margin-top:10px; }
.ck-link{ min-height:auto; margin:0; padding:0; border:0; background:none; color: var(--accent); font: inherit; font-size:0.82rem; font-weight:650; cursor:pointer; }
.ck-link:hover{ text-decoration:underline; }
/* Cierre: total de hoy, botón y sello */
.ck-cierre{ margin:20px 0 0; padding:18px 24px 22px; border-top:1px solid var(--line); background: color-mix(in srgb, var(--bg-panel-2) 35%, var(--bg-panel)); position:sticky; bottom:0; }
.ck-hoy{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ck-hoy span{ font-size:0.9rem; font-weight:600; color: var(--text); }
.ck-hoy strong{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ck-renov{ display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:9px 10px 9px 9px; border-radius:12px; background: var(--bg-panel); border:1px solid var(--line); }
.ck-renov-ico{ width:28px; height:28px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); transition: color .2s ease, background .2s ease; }
.ck-renov-ico svg{ width:15px; height:15px; fill:none; stroke: currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ck-renov.unico .ck-renov-ico{ color: var(--accent); background: color-mix(in srgb, var(--accent-vivido) 14%, transparent); }
.ck-renov.unico .ck-renov-ico svg{ transform: rotate(-180deg); }
.ck-renov-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ck-renov-txt b{ font-size:0.8rem; font-weight:650; color: var(--text); }
.ck-renov-txt span{ font-size:0.72rem; line-height:1.35; color: var(--text-dim); }
.ck-renov-cambiar{ flex-shrink:0; min-height:auto; margin:0; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: var(--bg-panel-2); color: var(--text); font: inherit; font-size:0.72rem; font-weight:650; cursor:pointer; white-space:nowrap; transition: border-color .15s ease, color .15s ease; }
.ck-renov-cambiar:hover{ border-color: color-mix(in srgb, var(--accent-vivido) 55%, var(--line)); color: var(--accent); }
.ck-error-linea{ margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:0.82rem; line-height:1.4; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ck-error-linea[hidden]{ display:none; }
.ck-cierre .ck-pagar{ width:100%; margin:14px 0 0; }
.ck-pagar svg, .ck-pagar:hover svg{ transform:none; width:17px; height:17px; }
.ck-procesa{ display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0; font-size:0.72rem; line-height:1.4; color: var(--text-dim); text-align:center; }
.ck-procesa svg{ width:13px; height:13px; flex-shrink:0; margin-top:1px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ck-procesa b{ color: var(--text); font-weight:650; }
@media (max-width: 380px){
.ck-seccion, .ck-panel{ margin-left:16px; margin-right:16px; }
.ck-cierre{ padding-left:16px; padding-right:16px; }
}
.plan-nota-pago{ text-align:center; }
.plan-nota-pago b{ color: var(--ok); font-weight:700; }
/* ============================================================
6.2 — Turnos › Semana en celular: los 7 días a la vista
renderSemana() pone .sem-compacta cuando cada día queda angosto (< 84 px). La columna de horas se afina, el
encabezado muestra día, número y cantidad en mínimo, y cada turno es una franja con el nombre cortado.
Deslizar salta de lunes a lunes (solo los lunes "enganchan").
============================================================ */
.semana-grid-scroll.sem-compacta .semana-dia-col{ scroll-snap-align: none; }
.semana-grid-scroll.sem-compacta .semana-dia-col[data-lunes]{ scroll-snap-align: start; scroll-snap-stop: always; }
.sem-compacta .semana-hora-gutter{ width:30px; }
.sem-compacta .semana-hora-label{ right:4px; font-size:0.58rem; letter-spacing:-0.02em; }
.sem-compacta .semana-hora-gutter-track{ margin-top:50px; }
.sem-compacta .semana-dia-header-cell{ height:50px; padding: 5px 0 4px; }
.sem-compacta .semana-dia-header-nombre{ font-size:0.6rem; color: var(--text-dim); }
.sem-compacta .semana-dia-header-num{ font-size:0.9rem; line-height:1.35; }
.sem-compacta .semana-dia-header-cell.hoy .semana-dia-header-num{ width:22px; height:22px; font-size:0.8rem; }
.sem-compacta .semana-dia-header-cant{ font-size:0.58rem; line-height:1; }
.sem-compacta .semana-dia-header-cant b{ font-weight:700; color: var(--text); }
.sem-compacta .semana-dia-header-cant i{ display:none; }
.semana-dia-header-cant b{ font-weight:inherit; }
.semana-dia-header-cant i{ font-style:normal; }
.sem-compacta .agenda-block.semana-block{ border-radius:5px; padding: 2px 2px 2px 5px; }
.sem-compacta .semana-block .agenda-block-hora{ display:none; }
.semana-hora-label i{ font-style:normal; }
.sem-compacta .semana-hora-label i{ display:none; }
.sem-nombre-corto{ display:none; }
.sem-compacta .semana-block .agenda-block-cliente{ display:none; }
.sem-compacta .semana-block .sem-nombre-corto{
display:block; font-size:0.6rem; font-weight:700; line-height:1.2; letter-spacing:-0.01em;
white-space:nowrap; overflow:hidden; text-overflow:clip; color: var(--text);
}
.sem-compacta .semana-block .agenda-block-inner{ min-width:0; overflow:hidden; }
.sem-compacta .semana-block > .cobro-pill, .sem-compacta .agenda-block-sin-cobrar{ display:none; }
.sem-compacta .semana-bloqueo-band, .sem-compacta .semana-dia-bloqueado span{ font-size:0.55rem; }
.sem-compacta .semana-dia-bloqueado span{ writing-mode: vertical-rl; transform: rotate(180deg); }
/* ---- 6.2 — Gasto: "Pagado con" en dos botones ---- */
.est-label-txt{ font-size:0.8rem; font-weight:500; color: var(--text-dim); }
.gasto-metodo-seg{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.gasto-metodo-seg button{
display:flex; align-items:center; justify-content:center; gap:8px; height:44px; min-height:0; margin:0; padding:0 10px;
border-radius:10px; border:1px solid var(--line); background: var(--est-input-bg, var(--bg-panel)); color: var(--text-dim);
font: inherit; font-size:0.9rem; font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.gasto-metodo-seg svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.gasto-metodo-seg button.active{
color: var(--text); border-color: var(--accent-vivido, var(--accent));
background: color-mix(in srgb, var(--accent-vivido, var(--accent)) 14%, var(--est-input-bg, var(--bg-panel)));
}
.gasto-metodo-seg button.active svg{ color: var(--accent); }
/* ---- 6.2 — Deslizar entre pestañas (v6.js): el navegador se queda con el scroll vertical y nos deja el horizontal. ---- */
@media (max-width: 859px){
.tab-content{ touch-action: pan-y pinch-zoom; }
.tab-content.tab-deslizando, .tab-content.tab-entra{ will-change: transform; }
body:has(.tab-content.tab-deslizando){ overflow-x:hidden; }
}
/* ---- 6.2 — Listas que siguen más abajo (indicarScrollRestante en v6.js) ---- */
.scroll-indicado{
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--text) 38%, transparent) transparent;
}
.scroll-indicado::-webkit-scrollbar{ width:5px; }
.scroll-indicado::-webkit-scrollbar-track{ background: transparent; margin: 8px 0; }
.scroll-indicado::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--text) 38%, transparent); border-radius:99px; }
.scroll-indicado.hay-mas-abajo::after{
content:''; position: sticky; bottom: -6px; display:block; height:34px; margin-top:-34px; pointer-events:none; z-index:2;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6ad5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center 14px / 18px no-repeat,
linear-gradient(to bottom, transparent, var(--scroll-fondo, var(--bg-panel-2)) 70%);
}
.action-menu.scroll-indicado{ --scroll-fondo: var(--bg-panel-2); }
.sel-lista.scroll-indicado{ --scroll-fondo: var(--bg-panel); }
/* El menú de acciones era un 5% transparente y se veía lo de atrás a través. */
.action-menu{ background: color-mix(in srgb, var(--bg-panel-2) 96%, var(--text) 4%); }
/* ---- 6.2 — Detalle de un movimiento (Estadísticas) ---- */
#balanceDetail [data-mov], #incomeDetail [data-mov], #gastoDetail [data-mov]{ cursor:pointer; }
#balanceDetail [data-mov]:active, #incomeDetail [data-mov]:active, #gastoDetail [data-mov]:active{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.mov-box{ padding: 28px 22px 22px; }
.mov-cabeza{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.mov-icono{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:6px; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.mov-cabeza.gasto .mov-icono{ color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.mov-cabeza.turno .mov-icono{ color: var(--accent); background: color-mix(in srgb, var(--accent-vivido, var(--accent)) 15%, transparent); }
.mov-icono svg{ width:22px; height:22px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mov-etiqueta{ font-size:0.72rem; font-weight:650; letter-spacing:0.04em; text-transform:uppercase; color: var(--text-dim); }
.mov-titulo{ margin:0; font-size:1.05rem; font-weight:750; line-height:1.3; color: var(--text); }
.mov-monto{ margin-top:4px; font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.mov-monto.pos{ color: var(--ok); }
.mov-monto.neg{ color: var(--warn); }
.mov-cuando{ font-size:0.82rem; color: var(--text-dim); }
.mov-filas{ margin:14px 0 0; display:flex; flex-direction:column; }
.mov-filas > div{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.mov-filas > div:last-child{ border-bottom:0; }
.mov-filas dt{ font-size:0.84rem; color: var(--text-dim); flex-shrink:0; }
.mov-filas dd{ margin:0; font-size:0.86rem; font-weight:600; color: var(--text); text-align:right; min-width:0; overflow-wrap:anywhere; }
.mov-nota{ margin:10px 0 0; padding:10px 12px; border-radius:10px; background: var(--bg-panel-2); font-size:0.84rem; line-height:1.45; color: var(--text); white-space:pre-wrap; }
.mov-acciones{ display:flex; gap:8px; margin-top:16px; }
.mov-acciones button{ flex:1; margin:0; }
/* ============================================================
6.2 — Configuración en el celular: las 6 opciones a la vista sin scrollear.
Grilla de 2 columnas con tarjetas cortas: ícono con su color, nombre y cómo está ahora. La descripción larga y la
flecha quedan para la tablet/computadora (allá no cambia nada).
============================================================ */
#configHubGrid .cfg-tile:nth-child(1){ --tile-c: #e0a84a; }
#configHubGrid .cfg-tile:nth-child(2){ --tile-c: #6aa6ff; }
#configHubGrid .cfg-tile:nth-child(3){ --tile-c: #4fc58a; }
#configHubGrid .cfg-tile:nth-child(4){ --tile-c: #b48cff; }
#configHubGrid .cfg-tile:nth-child(5){ --tile-c: #3fc4c4; }
#configHubGrid .cfg-tile:nth-child(6){ --tile-c: #ff7fa8; }
@media (max-width: 639px){
#masConfiguracionOverlay .cfg-hub-bajada{ margin:0 2px 12px; font-size:0.8rem; }
#configHubGrid.cfg-grilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap:10px; }
#configHubGrid .cfg-tile{ padding:14px 14px 13px !important; border-radius:20px !important; gap:2px; min-height:122px !important; }
#configHubGrid .cfg-tile-top{ margin-bottom:12px; }
#configHubGrid .cfg-tile-ico{
width:42px; height:42px; border-radius:14px; border:0;
color: var(--tile-c); background: color-mix(in srgb, var(--tile-c) 15%, var(--bg-panel-2));
}
#configHubGrid .cfg-tile-ico svg{ width:21px; height:21px; }
#configHubGrid .cfg-tile-flecha{ width:16px; height:16px; opacity:.4; }
#configHubGrid .cfg-tile-titulo{ font-size:0.95rem; }
#configHubGrid .cfg-tile-desc{ display:none; }
#configHubGrid .cfg-tile-estado{ padding-top:4px; font-size:0.74rem; font-weight:550; }
#configHubGrid .cfg-tile::after{ background: radial-gradient(circle, color-mix(in srgb, var(--tile-c) 22%, transparent), transparent 70%); opacity:.55; inset:auto -45% -70% auto; }
#configHubGrid .cfg-tile:active{ transform: scale(.97); }
}
/* Celulares bajitos: la lista de "Más" también entra sin scrollear. */
@media (max-width: 859px) and (max-height: 760px){
#tab-config .mas-lista .mas-lista-item{ padding-top:9px; padding-bottom:9px; }
#tab-config .mas-lista .mas-lista-icon{ transform: scale(.9); }
}
/* ---- 6.2 — Ayuda ⓘ: burbuja flotante (mostrarBurbujaAyuda en app.js) en vez de texto que se despliega ---- */
.cfg-ayuda-caja{ display:none !important; }
.burbuja-ayuda{
position:fixed; z-index:400; overflow:visible;
padding:0; border-radius:14px; background: var(--bg-panel-2); color: var(--text);
border:1px solid color-mix(in srgb, var(--line) 70%, var(--text) 12%);
box-shadow: 0 14px 40px rgba(0,0,0,calc(.45 * var(--shadow-strength, 1))), 0 2px 8px rgba(0,0,0,calc(.25 * var(--shadow-strength, 1)));
opacity:0; transform: translateY(4px) scale(.98); transform-origin: var(--flecha-x, 50%) 100%;
transition: opacity .14s ease, transform .14s ease; pointer-events:none;
}
.burbuja-ayuda.abajo{ transform: translateY(-4px) scale(.98); transform-origin: var(--flecha-x, 50%) 0; }
.burbuja-ayuda.visible{ opacity:1; transform:none; pointer-events:auto; }
.burbuja-ayuda-txt{ overflow-y:auto; overscroll-behavior:contain; padding:12px 14px; font-size:0.84rem; line-height:1.5; color: var(--text); }
.burbuja-ayuda-txt p{ margin:0; }
.burbuja-ayuda-txt p + p{ margin-top:8px; }
.burbuja-ayuda-txt b{ font-weight:700; }
.burbuja-ayuda-flecha{
position:absolute; left: var(--flecha-x, 50%); bottom:-6px; width:12px; height:12px; margin-left:-6px;
background: var(--bg-panel-2); border-right:1px solid color-mix(in srgb, var(--line) 70%, var(--text) 12%); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, var(--text) 12%);
transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.burbuja-ayuda.abajo .burbuja-ayuda-flecha{ bottom:auto; top:-6px; transform: rotate(-135deg); }
/* ---- 6.2: servicios con ícono sobre fondo del color del servicio (sin anillo de duración) ---- */
.servicio-card:not(.con-foto) .servicio-visual{
border-radius:14px;
background: color-mix(in srgb, var(--serv-color, var(--accent-vivido)) 16%, var(--bg-panel-2));
border:1px solid color-mix(in srgb, var(--serv-color, var(--accent-vivido)) 30%, transparent);
color: var(--serv-color, var(--text));
}
.servicio-card:not(.con-foto) .servicio-visual > svg{ width:22px !important; height:22px !important; color: var(--serv-color, var(--text)); }
/* ---- 6.2: Ventas, más aire entre Stock y Estado ---- */
@container ventaslista (min-width: 620px){
#tab-ventas .ventas-tabla-head{ grid-template-columns: 38px minmax(0,1fr) 100px 100px 64px 132px 38px; }
#tab-ventas .producto-fila-tabla .producto-fila-top{ grid-template-columns: 38px minmax(0,1fr) 100px 100px 64px 132px; }
}
@container ventaslista (min-width: 500px) and (max-width: 619.98px){
#tab-ventas .ventas-tabla-head{ grid-template-columns: 38px minmax(0,1fr) 100px 64px 132px 38px; }
#tab-ventas .producto-fila-tabla .producto-fila-top{ grid-template-columns: 38px minmax(0,1fr) 100px 64px 132px; }
}
@container ventaslista (min-width: 500px){
#tab-ventas .ventas-tabla-head span:nth-child(5){ padding-left:32px; }
#tab-ventas .producto-fila-tabla .pcol-estado{ padding-left:24px; }
}
/* ---- 6.2: Reservas online, link con ícono de copiar y "Cambiar link" visible ---- */
.cfg-link-caja{
display:flex; align-items:center; gap:6px; margin:6px 0 12px; padding:4px 4px 4px 12px;
background: var(--bg-panel-2); border:1px solid var(--line); border-radius:12px;
}
.cfg-link-caja .cfg-link-url{ flex:1; min-width:0; margin:0; font-size:0.92rem; word-break:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-link-copiar{
flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; padding:0; margin:0;
border:0; border-radius:9px; background:transparent; color: var(--text-dim); cursor:pointer;
transition: background .12s ease, color .12s ease;
}
.cfg-link-copiar:hover{ background: var(--bg-panel); color: var(--text); }
.cfg-link-copiar svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cfg-link-copiar .ico-ok{ display:none; }
.cfg-link-copiar.copiado{ color: var(--ok); }
.cfg-link-copiar.copiado .ico-copiar{ display:none; }
.cfg-link-copiar.copiado .ico-ok{ display:block; }
.cfg-link-acciones{ grid-template-columns: 1.4fr 1fr; }
.cfg-link-editar > summary{
display:flex; align-items:center; justify-content:center; gap:8px; margin-top:2px; padding:10px 12px;
border:1px dashed color-mix(in srgb, var(--accent-vivido, var(--accent)) 55%, var(--line)); border-radius:10px;
color: var(--accent-vivido, var(--accent)); font-size:0.88rem; font-weight:600; text-align:center;
}
.cfg-link-editar > summary svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cfg-link-editar[open] > summary{ border-style:solid; color: var(--text); margin-bottom:10px; }
/* ---- 6.2: personalización Pro de la página de reservas ---- */
.ap-pro{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.ap-pro-titulo{ display:flex; align-items:center; gap:8px; font-weight:650; font-size:0.95rem; }
.ap-pro-badge{ padding:2px 7px; border-radius:999px; font-size:0.68rem; font-weight:700; background: color-mix(in srgb, var(--accent-vivido) 18%, transparent); color: var(--accent-vivido); }
.ap-pro-bloqueo{ margin:0; font-size:0.84rem; color: var(--text-dim); }
.ap-pro-ver{ margin-left:4px; padding:0; border:0; background:none; color: var(--accent-vivido); font:inherit; font-weight:650; cursor:pointer; text-decoration:underline; }
.ap-pro.bloqueado .ap-campo, .ap-pro.bloqueado .ap-muestra{ opacity:.45; }
.ap-campo{ display:flex; flex-direction:column; gap:8px; }
.ap-label{ font-size:0.8rem; font-weight:600; color: var(--text-dim); }
.ap-label .ap-color-nombre{ margin-left:6px; font-weight:600; color: var(--text); }
.ap-colores{ display:grid; grid-template-columns: repeat(9, minmax(0, 34px)); gap:8px; justify-content:start; }
/* 6.2.3: círculos de tamaño fijo (el min-height general de los botones los estiraba en óvalos), con tilde en el elegido. */
.ap-color{
position:relative; width:100%; height:auto; aspect-ratio:1; min-height:0; padding:0; margin:0; border-radius:50%; cursor:pointer;
display:grid; place-items:center; background: var(--c); border:0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.3);
transition: transform .12s ease, box-shadow .12s ease;
}
.ap-color:hover{ transform: scale(1.06); }
.ap-color.active{ box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--c); }
.ap-color.active::after{
content:''; width:42%; height:42%;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
/* "+" = anillo de arcoíris; con un color a medida elegido, el centro toma ese color. */
.ap-color-propio{
--centro: var(--bg-panel-2); color: var(--text);
background: radial-gradient(circle, var(--centro) 0 56%, transparent 58%), conic-gradient(from 0deg, #e0645b, #e5c35b, #62b27a, #3fb6b2, #5b8def, #9b7be0, #e5679c, #e0645b);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.ap-color-propio svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.ap-color-propio.active{ --centro: var(--c); box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--text-dim); }
.ap-color-propio.active svg{ display:none; }
.ap-propio{
margin-top:4px; padding:12px; border-radius:14px; display:flex; flex-direction:column; gap:12px;
background: var(--bg-panel-2); border:1px solid var(--line);
}
.ap-propio[hidden]{ display:none; }
.ap-propio-fila{ display:flex; align-items:center; gap:10px; }
.ap-propio-muestra{ width:40px; height:40px; border-radius:12px; flex-shrink:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ap-propio-hex{
flex:1; display:flex; align-items:center; gap:2px; padding:0 12px; height:40px; border-radius:10px;
background: var(--bg-panel); border:1px solid var(--line); color: var(--text-dim); font-weight:600;
}
.ap-propio-hex input{
flex:1; min-width:0; min-height:0; height:100%; padding:0; border:0; background:none; color: var(--text);
font: 600 0.95rem/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing:.06em; text-transform:uppercase; outline:none;
}
.ap-propio-control{ display:flex; flex-direction:column; gap:6px; font-size:0.76rem; font-weight:600; color: var(--text-dim); }
.ap-rango{ -webkit-appearance:none; appearance:none; width:100%; height:14px; margin:0; padding:0; min-height:0; border-radius:999px; border:0; outline:none; cursor:pointer; }
.ap-rango-tono{ background: linear-gradient(90deg, hsl(0,62%,55%), hsl(60,62%,55%), hsl(120,62%,55%), hsl(180,62%,55%), hsl(240,62%,55%), hsl(300,62%,55%), hsl(359,62%,55%)); }
.ap-rango-luz{ --tono: 34; background: linear-gradient(90deg, hsl(var(--tono),62%,28%), hsl(var(--tono),62%,50%), hsl(var(--tono),62%,72%)); }
.ap-rango::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:0; box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.4); }
.ap-rango::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:0; box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.4); }
.ap-rango:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 3px var(--accent-vivido); }
.ap-seg{ display:grid; grid-template-columns: repeat(3, 1fr); gap:4px; padding:3px; border-radius:11px; background: var(--bg-panel-2); border:1px solid var(--line); }
.ap-seg button{ margin:0; min-height:36px; padding:0 6px; border:0; border-radius:8px; background:transparent; color: var(--text-dim); font:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; }
.ap-seg button.active{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ap-seg .ap-letra-elegante{ font-family: Georgia, 'Times New Roman', serif; }
.ap-seg .ap-letra-redonda{ font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif; }
/* Mini vista previa (no es la página real: solo da idea del estilo elegido). */
.ap-muestra{
--ap-bg:#0e0f12; --ap-panel:#16181c; --ap-line:#2a2d34; --ap-text:#f1f1f3; --ap-r:12px;
display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; border:1px solid var(--line);
background: var(--ap-bg); color: var(--ap-text);
}
.ap-muestra.claro{ --ap-bg:#f6f5f3; --ap-panel:#ffffff; --ap-line:#e2dfda; --ap-text:#1c1b1f; }
.ap-muestra[data-fondo="degrade"]{ background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ap-c) 30%, var(--ap-bg)), var(--ap-bg) 70%); }
.ap-muestra[data-fondo="color"]{ background: linear-gradient(color-mix(in srgb, var(--ap-c) 24%, var(--ap-bg)) 0 30px, var(--ap-bg) 90px); }
.ap-muestra[data-esquinas="redondas"]{ --ap-r:22px; }
.ap-muestra[data-esquinas="rectas"]{ --ap-r:4px; }
.ap-muestra[data-letra="elegante"]{ font-family: Georgia, 'Times New Roman', serif; }
.ap-muestra[data-letra="redonda"]{ font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif; }
.ap-muestra-cab{ display:flex; align-items:center; gap:8px; font-size:0.92rem; }
.ap-muestra-logo{ width:24px; height:24px; border-radius: calc(var(--ap-r) * .6); background: color-mix(in srgb, var(--ap-c) 25%, var(--ap-panel)); border:1px solid var(--ap-line); }
.ap-muestra-item{ display:flex; justify-content:space-between; padding:9px 11px; border-radius: var(--ap-r); background: var(--ap-panel); border:1px solid var(--ap-line); font-size:0.84rem; }
.ap-muestra-item i{ font-style:normal; color: var(--ap-c); font-weight:700; }
.ap-muestra-btn{ padding:10px; border-radius: var(--ap-r); background: var(--ap-c); color:#111; text-align:center; font-weight:700; font-size:0.86rem; }
/* 6.4: fondo con dibujo — mismos dibujos que la página pública (reserva.css), achicados en la muestra y en los botones. */
.ap-muestra{ position:relative; isolation:isolate; overflow:hidden; --pat-s:.55; }
.ap-muestra[data-patron]::before, .ap-pat-dibujo::before{
content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
background: var(--ap-c, var(--accent-vivido)); opacity: var(--pat-op, .15);
-webkit-mask: var(--pat); mask: var(--pat);
}
.ap-muestra.claro[data-patron]::before{ opacity: calc(var(--pat-op, .15) * 1.25); }
.ap-seg.ap-patrones{ grid-template-columns: repeat(4, 1fr); gap:6px; padding:6px; }
.ap-patrones button{ display:flex; flex-direction:column; align-items:center; gap:5px; min-height:0; padding:6px 4px 7px; font-size:0.76rem; }
.ap-pat-dibujo{
position:relative; isolation:isolate; overflow:hidden; width:100%; aspect-ratio: 4 / 3; border-radius:7px;
--pat-s:.4; background: var(--bg-panel); border:1px solid var(--line);
}
.ap-pat-dibujo::before{ opacity: calc(var(--pat-op, .15) * 2.4); }
.ap-pat-dibujo[data-patron="ninguno"]::before{ display:none; }
.ap-pat-dibujo[data-patron="burbujas"]{ --pat-s:.15; }
.ap-muestra[data-patron="burbujas"]{ --pat-s:.35; }
.ap-patrones button.active .ap-pat-dibujo{ border-color: var(--ap-c, var(--accent-vivido)); }
[data-patron="puntos"]{ --pat-op:.38; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.7'/%3E%3C/svg%3E") 0 0/calc(22px * var(--pat-s, 1)) repeat; }
[data-patron="grilla"]{ --pat-op:.16; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' fill='none' stroke='black'/%3E%3C/svg%3E") 0 0/calc(32px * var(--pat-s, 1)) repeat; }
[data-patron="lineas"]{ --pat-op:.14; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16L16 0M-2 2L2 -2M14 18L18 14' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/calc(16px * var(--pat-s, 1)) repeat; }
[data-patron="ondas"]{ --pat-op:.22; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28'%3E%3Cpath d='M0 14Q20 4 40 14T80 14' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/calc(80px * var(--pat-s, 1)) calc(28px * var(--pat-s, 1)) repeat; }
[data-patron="cruces"]{ --pat-op:.3; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 12v10M12 17h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/calc(34px * var(--pat-s, 1)) repeat; }
[data-patron="burbujas"]{ --pat-op:.09; --pat:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M139 22c28 15 49 45 47 77s-26 66-58 79-71 4-95-20S0 95 13 62 52 9 83 6s28 1 56 16Z'/%3E%3C/svg%3E") right calc(-90px * var(--pat-s, 1)) top calc(-80px * var(--pat-s, 1))/calc(340px * var(--pat-s, 1)) no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M64 18c33-14 77-8 102 18s29 70 8 101-63 52-100 47S7 152 5 112s26-80 59-94Z'/%3E%3C/svg%3E") left calc(-130px * var(--pat-s, 1)) bottom calc(-110px * var(--pat-s, 1))/calc(420px * var(--pat-s, 1)) no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3C/svg%3E") left 12% top 38%/calc(70px * var(--pat-s, 1)) no-repeat; }
[data-patron="anillos"]{ --pat-op:.22; --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='600' cy='0' r='90'/%3E%3Ccircle cx='600' cy='0' r='150'/%3E%3Ccircle cx='600' cy='0' r='210'/%3E%3Ccircle cx='600' cy='0' r='270'/%3E%3Ccircle cx='600' cy='0' r='330'/%3E%3Ccircle cx='600' cy='0' r='390'/%3E%3Ccircle cx='600' cy='0' r='450'/%3E%3Ccircle cx='600' cy='0' r='510'/%3E%3Ccircle cx='600' cy='0' r='570'/%3E%3C/svg%3E") right top/calc(600px * var(--pat-s, 1)) no-repeat; }
/* ---- 6.2: Tu plan en el celular, un plan por vez con pestañas y sin repetir lo del plan anterior ---- */
.plan-tabs{ display:none; }
.plan-todo-de{ display:none; }
@media (max-width: 899.98px){
.plan-hero{ padding:14px 16px; margin-bottom:0; }
#planPantalla > *:empty{ display:none; }
.plan-hero h3{ font-size:1.08rem; margin:4px 0 2px; }
.plan-hero p{ font-size:0.84rem; }
.plan-tabs{
display:grid; grid-template-columns: repeat(3, 1fr); gap:4px; padding:4px; margin: 0;
border-radius:14px; background: var(--bg-panel); border:1px solid var(--line);
position:sticky; top:0; z-index:2;
}
.plan-tabs button{
position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; margin:0; padding:8px 4px;
border:0; border-radius:10px; background:transparent; color: var(--text-dim); font:inherit; font-weight:700; font-size:0.92rem; cursor:pointer;
}
.plan-tabs button small{ font-size:0.72rem; font-weight:500; }
.plan-tabs button i{ position:absolute; top:-7px; right:6px; font-style:normal; font-size:0.58rem; font-weight:800; text-transform:uppercase; padding:1px 6px; border-radius:999px; background: var(--ok); color: var(--bg); }
.plan-tabs button.active{ background: var(--bg-panel-2); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.plan-tabs button[data-plan-vista="pro"].active{ color: var(--accent); }
.plan-cols{ display:block; }
.plan-col{ display:none; }
.plan-col.vista{ display:flex; animation: planVista .18s ease; }
.plan-col .plan-lista li.base{ display:none; }
.plan-col .plan-lista li.no{ display:none; }
.plan-col.gratis .plan-lista li.no{ display:flex; }
.plan-todo-de{ display:flex; font-weight:600; color: var(--text); }
.plan-col-tag{ top:-9px; }
.plan-cta{ margin-top:12px; }
.plan-nota-pago{ font-size:0.8rem; }
}
@keyframes planVista{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }
/* ---- 6.2: invitados de equipo (login, sin negocio, sesión dentro de un equipo, elegir cuenta) ---- */
.login-equipo-link{
display:block; width:100%; margin-top:14px; padding:10px; border:0; background:none; cursor:pointer;
color: var(--text-dim); font:inherit; font-size:0.86rem; text-align:center;
}
.login-equipo-link b{ color: var(--accent-vivido); font-weight:650; }
.app-sin-negocio{ width:min(380px, calc(100vw - 32px)); display:flex; flex-direction:column; align-items:stretch; gap:12px; text-align:center; }
.asn-ico{ width:56px; height:56px; margin:0 auto 4px; display:grid; place-items:center; border-radius:16px; background: var(--bg-panel-2); color: var(--accent-vivido); }
.asn-ico svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.asn-titulo{ margin:0; font-size:1.2rem; color: var(--text); }
.asn-texto{ margin:0 0 6px; color: var(--text-dim); font-size:0.9rem; line-height:1.5; }
.asn-texto b{ color: var(--text); }
.asn-crear{ text-align:left; border:1px solid var(--line); border-radius:12px; padding:0 14px; background: var(--bg-panel); }
.asn-crear > summary{ list-style:none; cursor:pointer; padding:12px 0; font-size:0.9rem; font-weight:600; color: var(--text); text-align:center; }
.asn-crear > summary::-webkit-details-marker{ display:none; }
.asn-crear[open]{ padding-bottom:14px; }
.asn-crear label{ display:block; margin:8px 0 4px; font-size:0.8rem; color: var(--text-dim); }
.asn-crear input, .asn-crear select{ width:100%; box-sizing:border-box; }
.asn-crear .btn-ghost{ width:100%; margin-top:12px; }
.asn-salir{ margin-top:4px; padding:8px; border:0; background:none; color: var(--text-dim); font:inherit; font-size:0.86rem; cursor:pointer; text-decoration:underline; }
.perfil-solo-equipo{ display:none; }
body.eq-ajeno .perfil-solo-equipo{ display:block; }
body.eq-ajeno .perfil-solo-propio{ display:none; }
.elegir-cuenta h3{ margin:0 0 4px; font-size:1.1rem; }
.elegir-cuenta-sub{ margin:0 0 14px; color: var(--text-dim); font-size:0.86rem; }
.elegir-cuenta-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; overflow:auto; }
.elegir-cuenta-op{
display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:12px; text-align:left; cursor:pointer;
border:1px solid var(--line); border-radius:12px; background: var(--bg-panel-2); color: var(--text); font:inherit;
}
.elegir-cuenta-op.active{ border-color: var(--accent-vivido); }
.elegir-cuenta-av{ flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:11px; background: color-mix(in srgb, var(--accent-vivido) 18%, var(--bg-panel)); color: var(--accent-vivido); font-weight:700; font-size:0.86rem; }
.elegir-cuenta-txt{ display:flex; flex-direction:column; min-width:0; }
.elegir-cuenta-txt b{ font-size:0.95rem; }
.elegir-cuenta-txt small{ color: var(--text-dim); font-size:0.8rem; }
/* 6.3: cambiar contraseña desde el perfil (pide la actual) */
#modalCambiarPassOverlay .modal-field input{ text-align:left; font-size:0.95rem; font-weight:500; }
#modalCambiarPassOverlay .login-pass-reqs{ margin-top:8px; }
#modalCambiarPassOverlay .cambiar-pass-nota{ font-size:0.8rem; margin:4px 0 12px; }
.cambiar-pass-olvido{ display:block; width:100%; margin:12px 0 0; padding:6px; border:0; background:none; color: var(--text-dim); font:inherit; font-size:0.82rem; text-decoration:underline; cursor:pointer; }
.cambiar-pass-olvido:disabled{ opacity:.6; cursor:default; }
#loginNuevaPassSection .login-revisa-ayuda{ margin-top:14px; }