/*
 * Angélica Arévalo · Recepción: estilos propios (se suman a core/aa.css).
 * Pensado para la tablet del mostrador (1024–1366 px) y usable en celular.
 */

/* ───── piezas generales ───── */
.recepcion .app-vista { max-width: 1680px; width: 100%; }
kbd.atajo { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--borde-fuerte); font: 700 11px/1 var(--f-ui); color: var(--texto-3); background: var(--superficie); }
kbd.atajo.claro { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .16); color: #fff; }
.txt-error { color: var(--error) !important; font-weight: 700; }
.txt-ok { color: var(--ok) !important; font-weight: 700; }
.txt-alerta { color: #B26B0E !important; font-weight: 700; }
.avatar.mini { width: 20px; height: 20px; font-size: 8.5px; letter-spacing: 0; }
.chips-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { display: block; margin-bottom: 6px; }
.cargando-vista { display: grid; gap: 18px; }
.seccion-titulo { margin: 26px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.app-lateral .logo-enlace { display: block; color: inherit; text-decoration: none; }
.recepcion .app-lateral { overflow-x: hidden; }
.recepcion .app-lateral .logo-marca { max-width: 100%; }
.recepcion .app-lateral .logo-mono { flex: none; width: 38px; height: 38px; }
.recepcion .app-lateral .logo-texto { min-width: 0; }
.recepcion .app-lateral .logo-sub { white-space: normal; line-height: 1.35; letter-spacing: .12em; }
.lateral-reiniciar { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: rgba(245, 231, 236, .55); font-size: 12px; text-align: left; }
.lateral-reiniciar:hover { color: #fff; }
.boton-insignia { border: 0; cursor: pointer; font-family: inherit; }
.boton-insignia:hover { filter: brightness(.96); }
.app-cabecera h1 { white-space: nowrap; }
.app-cabecera .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .ocultar-movil, .app-cabecera kbd.atajo { display: none; } .app-cabecera .acciones .btn-primario span { display: none; } .app-cabecera .acciones .btn-primario { padding: 0 12px; } }
@media (max-width: 520px) { .app-cabecera .sub { font-size: 12px; } .app-cabecera .acciones { gap: 6px; } }

/* ───── banner de día cerrado ───── */
.banner-cerrado { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 18px; border-radius: var(--r-l); color: #fff; background: radial-gradient(500px 200px at 90% 0%, rgba(214, 51, 108, .45), transparent 70%), linear-gradient(120deg, #2A1520, #4A2335); box-shadow: var(--sombra-2); }
.banner-cerrado .ico-l { color: var(--oro-300); flex: none; }
.banner-cerrado strong { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.banner-cerrado span { color: rgba(255, 255, 255, .78); font-size: 13.5px; }
@media (max-width: 640px) { .banner-cerrado { flex-wrap: wrap; } .banner-cerrado .btn { width: 100%; } }

/* ───── KPIs ───── */
.kpis-hoy { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis-hoy .kpi { padding: 16px 16px; }
.entrando .kpis-hoy .kpi { animation: subir .5s var(--ease) both; }
.entrando .kpis-hoy .kpi:nth-child(2) { animation-delay: .04s; } .entrando .kpis-hoy .kpi:nth-child(3) { animation-delay: .08s; } .entrando .kpis-hoy .kpi:nth-child(4) { animation-delay: .12s; } .entrando .kpis-hoy .kpi:nth-child(5) { animation-delay: .16s; } .entrando .kpis-hoy .kpi:nth-child(6) { animation-delay: .2s; }
.kpis-hoy .kpi-valor { font-size: 29px; white-space: nowrap; }
@media (max-width: 640px) { .kpis-hoy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpis-hoy .kpi-pie { font-size: 12px; }
.kpi-destacado { background: linear-gradient(150deg, #fff 30%, var(--rosa-50) 100%); border-color: var(--rosa-200); }
.kpi-destacado .kpi-valor { color: var(--rosa-700); }
.kpi-alerta { border-color: rgba(238, 90, 98, .35); }
.kpi-alerta .kpi-valor { color: var(--coral); }

/* ───── Hoy ───── */
.hoy-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.hoy-lado { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
.hoy-linea .tarjeta-cab { flex-wrap: wrap; }
@media (max-width: 1279px) { .hoy-rejilla { grid-template-columns: minmax(0, 1fr); } .hoy-lado { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 760px) { .hoy-lado { grid-template-columns: minmax(0, 1fr); } }

/* ───── línea de tiempo ───── */
.tl { margin-top: 14px; }
.tl-scroll { overflow: auto; max-height: min(66vh, 700px); border-top: 1px solid var(--borde); overscroll-behavior: contain; scroll-behavior: auto; }
.agenda-linea .tl-scroll { max-height: calc(100vh - 300px); min-height: 440px; }
.tl-lienzo { min-width: calc(56px + var(--cols) * 138px); }
.tl-cabecera { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.tl-esquina { display: grid; place-items: center; color: var(--texto-3); }
.tl-cab { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 10px; border-left: 1px solid var(--borde); }
.tl-cab > div { min-width: 0; }
.tl-cab strong { display: block; overflow: hidden; font-size: 13px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.tl-cab small { display: block; overflow: hidden; font-size: 11px; color: var(--texto-3); white-space: nowrap; text-overflow: ellipsis; }
.tl-cab-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.tl-cab-n { flex: none; margin-left: auto; display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 13%, white); color: color-mix(in srgb, var(--c) 85%, black); font-size: 11.5px; font-weight: 800; }
.tl-cuerpo { position: relative; }
.tl-regla { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--borde); }
.tl-regla.media { border-top: 1px dashed rgba(59, 30, 43, .06); }
.tl-regla span { position: absolute; left: 9px; top: -8px; font-size: 11px; font-weight: 700; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tl-cols { position: absolute; top: 0; bottom: 0; left: 56px; right: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.tl-col { position: relative; border-left: 1px solid var(--borde); transition: background .2s; }
.tl-col.con-huecos { cursor: cell; }
.tl-col.destino { background: color-mix(in srgb, var(--c) 8%, transparent); }
.tl-fantasma { position: absolute; left: 3px; right: 3px; z-index: 0; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1.5px dashed var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 6%, white); color: color-mix(in srgb, var(--c) 85%, black); font-size: 11.5px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.tl-fantasma.visible { opacity: 1; }
.tl-fantasma .ico { width: 13px; height: 13px; stroke-width: 2.2; }

.tl-cita { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 5px 8px 5px 10px; border: 0; border-radius: 10px; text-align: left; font-size: 12px; line-height: 1.25; color: var(--texto); background: color-mix(in srgb, var(--c) 11%, white); box-shadow: inset 3px 0 0 var(--c), 0 1px 2px rgba(59, 30, 43, .06); transition: transform .18s var(--ease), box-shadow .2s, filter .2s; }
.tl-cita:hover { z-index: 4; transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--c), var(--sombra-2); }
.tl-cita:focus-visible { box-shadow: inset 3px 0 0 var(--c), var(--foco); }
.tl-cita.arrastrable { cursor: grab; touch-action: none; }
.tl-cita.arrastrando { z-index: 20; cursor: grabbing; opacity: .96; transition: none; box-shadow: inset 3px 0 0 var(--c), var(--sombra-3); }
.tl-l1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tl-hora { font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--c) 72%, black); }
.tl-tag { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 5px; background: rgba(255, 255, 255, .75); color: var(--texto-2); }
.tl-tag .ico { width: 11px; height: 11px; stroke-width: 2; }
.tl-tag.cobrar { background: var(--coral); color: #fff; animation: latido-rosa 2s infinite; }
.tl-vivo { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: latido 1.6s infinite; }
.tl-nombre { overflow: hidden; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.tl-serv { overflow: hidden; color: var(--texto-2); white-space: nowrap; text-overflow: ellipsis; }
.tl-prof { display: flex; align-items: center; gap: 5px; margin-top: auto; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--texto-3); white-space: nowrap; }
.tl-cita > * { flex-shrink: 0; }
.tl-cita.media .tl-prof { display: none; }
.tl-cita.compacta { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.tl-cita.compacta .tl-nombre { flex-shrink: 1; min-width: 0; }
.tl-cita.compacta .tl-l1 { flex: none; }
/* estados */
.tl-cita.f-reservada { background-color: #fff; background-image: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--c) 4%, transparent) 8px 16px); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, white); }
.tl-cita.f-llego { background: var(--oro-100); box-shadow: inset 3px 0 0 var(--oro-500), 0 0 0 2px rgba(195, 145, 80, .35); }
.tl-cita.f-llego .tl-hora { color: #8A5F25; }
.tl-cita.f-en-atencion { color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 68%, black)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 38%, transparent); }
.tl-cita.f-en-atencion .tl-hora, .tl-cita.f-en-atencion .tl-serv, .tl-cita.f-en-atencion .tl-prof { color: rgba(255, 255, 255, .86); }
.tl-cita.f-en-atencion .avatar { background: rgba(255, 255, 255, .25); color: #fff; }
.tl-cita.f-atendida { background: #F5F1F3; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 40%, #d9d0d4); color: var(--texto-2); }
.tl-cita.f-atendida .tl-nombre { color: var(--texto-2); font-weight: 700; }
.tl-cita.f-no-show { background: repeating-linear-gradient(-45deg, #F6F1F3 0 6px, #FDFBFC 6px 12px); box-shadow: inset 3px 0 0 var(--error); color: var(--texto-3); }
.tl-cita.f-no-show .tl-nombre { text-decoration: line-through; }
.tl-cita.f-atrasada { background: var(--error-suave); box-shadow: inset 3px 0 0 var(--error); }
.tl-cita.f-vencida { background: #F6F0F2; box-shadow: inset 3px 0 0 var(--alerta); }
.tl-ahora { position: absolute; left: 50px; right: 0; z-index: 6; height: 2px; background: var(--coral); box-shadow: 0 0 10px rgba(238, 90, 98, .55); pointer-events: none; }
.tl-ahora::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.tl-ahora span { position: absolute; right: 8px; top: -11px; padding: 2px 8px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-bloqueo { position: absolute; left: 3px; right: 3px; z-index: 1; display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border: 0; border-radius: 10px; background: repeating-linear-gradient(-45deg, #EEE5E9 0 6px, #F9F5F7 6px 12px); color: var(--texto-3); font-size: 11.5px; font-weight: 700; text-align: left; overflow: hidden; }
.tl-bloqueo:hover { color: var(--texto); }
.tl-bloqueo .ico { width: 13px; height: 13px; }
.tl-cerrado { border-top: 1px solid var(--borde); margin-top: 14px; }
.tl-leyenda { padding: 12px 20px 16px; border-top: 1px solid var(--borde); }
.tl-leyenda .ley { width: 14px; height: 10px; border-radius: 3px; }
.ley-reservada { background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--rosa-300); }
.ley-confirmada { background: color-mix(in srgb, var(--rosa-500) 18%, white) !important; box-shadow: inset 2px 0 0 var(--rosa-500); }
.ley-llego { background: var(--oro-100) !important; box-shadow: inset 2px 0 0 var(--oro-500); }
.ley-en-atencion { background: var(--grad-marca) !important; }
.ley-atendida { background: #EDE6EA !important; }
.ley-no-show { background: repeating-linear-gradient(-45deg, #EADFE4 0 3px, #fff 3px 6px) !important; box-shadow: inset 2px 0 0 var(--error); }
.ley-bloqueo { background: repeating-linear-gradient(-45deg, #E3D7DD 0 3px, #F9F5F7 3px 6px) !important; }

/* ───── panel en vivo ───── */
.vivo .tarjeta-cab h3 { display: flex; align-items: center; gap: 8px; }
.vivo-titulo { display: flex; align-items: center; gap: 7px; margin: 16px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.vivo-titulo:first-child { margin-top: 0; }
.vivo-titulo .ico { width: 14px; height: 14px; color: var(--rosa-500); }
.vivo-titulo span { margin-left: auto; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); letter-spacing: 0; }
.vivo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 -8px; padding: 7px 8px; border-radius: 14px; transition: background .2s; }
.vivo-fila:hover { background: var(--rosa-50); }
.vivo-info { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
.vivo-info strong { display: block; font-size: 13.5px; }
.vivo-info small { display: block; font-size: 12px; color: var(--texto-2); }
.vivo-info .vivo-meta { color: var(--texto-3); font-weight: 700; font-size: 11.5px; }
.vivo-barra { flex-basis: 100%; height: 5px; margin-left: 48px; border-radius: 999px; background: var(--rosa-100); overflow: hidden; }
.vivo-barra span { display: block; height: 100%; border-radius: inherit; background: var(--grad-marca); transition: width 1s linear; }
.vivo-vacio { padding: 4px 0 2px; font-size: 13px; color: var(--texto-3); list-style: none; }
.ocup-fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 70px 38px; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.ocup-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ocup-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.ocup-barra span { display: block; height: 100%; border-radius: inherit; transform-origin: left; }

/* ───── actividad ───── */
.act-lista { max-height: 340px; margin: 0; padding: 6px 12px 12px; overflow: auto; list-style: none; }
.act-lista li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.act-lista li + li { border-top: 1px solid var(--borde); }
.act-ico { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--rosa-50); color: var(--rosa-600); }
.act-lista time { flex: none; white-space: nowrap; }
.act-nueva { animation: act-nueva 2.6s var(--ease); }
.act-alerta .act-ico { background: var(--alerta-suave); color: #B26B0E; }
@keyframes act-nueva { 0% { background: var(--rosa-100); transform: translateX(-8px); } 60% { background: var(--rosa-50); } 100% { background: transparent; transform: none; } }

/* ───── agenda ───── */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding: 14px 16px; }
.agenda-mes { min-width: 120px; font-size: 15px; text-align: center; }
.agenda-mes strong { font-family: var(--f-display); font-size: 19px; font-weight: 500; }
.dias-tira { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.dias-tira::-webkit-scrollbar { display: none; }
.dia-chip { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; gap: 1px; min-width: 66px; padding: 7px 10px 9px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); overflow: hidden; transition: all .2s var(--ease); }
.dia-chip span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.dia-chip strong { font-family: var(--f-display); font-size: 21px; font-weight: 500; line-height: 1.1; }
.dia-chip small { font-size: 10.5px; color: var(--texto-3); white-space: nowrap; }
.dia-chip i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rosa-400); transform-origin: left; transform: scaleX(var(--n, 0)); }
.dia-chip:hover:not(:disabled) { border-color: var(--rosa-300); }
.dia-chip.es-hoy strong { color: var(--rosa-600); }
.dia-chip.activo { border-color: var(--ciruela-900); background: var(--ciruela-900); color: #fff; box-shadow: var(--sombra-2); }
.dia-chip.activo span, .dia-chip.activo small { color: rgba(255, 255, 255, .7); }
.dia-chip.activo strong { color: #fff; }
.dia-chip.cerrado { opacity: .5; }
.dia-chip:disabled { cursor: not-allowed; }
.dias-tira.compacta .dia-chip { min-width: 58px; padding: 6px 8px 8px; }
.dias-tira.compacta .dia-chip strong { font-size: 18px; }
.agenda-resumen .insignia { height: 26px; }
@media (max-width: 760px) { .agenda-barra > * { width: 100%; } .agenda-barra .fila { justify-content: space-between; } }

/* ───── ficha de cita ───── */
.hoja-cita .hoja-sub strong { color: var(--texto); }
.fc { display: flex; flex-direction: column; gap: 14px; }
.fc-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-estado .insignia .ico { width: 13px; height: 13px; }
.fc-cliente, .fc-servicio { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--r-m); background: var(--superficie-2); }
.fc-cliente strong, .fc-servicio strong { display: block; font-size: 15px; }
.fc-cliente small, .fc-servicio small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--texto-2); }
.fc-tags { margin-top: 8px; }
.fc-tags .insignia .ico { width: 13px; height: 13px; }
.fc-ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); }
.chip-zona { display: inline-flex; align-items: center; height: 24px; margin: 6px 0 2px; padding: 0 10px; border-radius: 999px; background: var(--rosa-100); color: var(--rosa-700); font-size: 12px; font-weight: 700; }
.fc-paquete { padding: 12px 14px; border-radius: var(--r-m); background: linear-gradient(120deg, var(--rosa-50), var(--oro-100)); font-size: 13.5px; }
.fc-paquete .ico { width: 15px; height: 15px; vertical-align: -3px; color: var(--rosa-600); }
.barra-sesiones { display: flex; gap: 4px; margin: 8px 0 4px; }
.barra-sesiones i { flex: 1; height: 7px; border-radius: 999px; background: rgba(59, 30, 43, .1); }
.barra-sesiones i.hecha { background: var(--grad-marca); }
.barra-sesiones i.actual { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--rosa-400); }
.fc-precio { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed var(--borde-fuerte); border-radius: var(--r-m); font-size: 13.5px; }
.fc-precio > div { display: flex; justify-content: space-between; gap: 10px; }
.fc-precio .desc { color: var(--rosa-600); }
.fc-precio .total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borde); font-weight: 800; font-size: 15px; }
.fc-precio .total .num { font-family: var(--f-display); font-size: 22px; font-weight: 500; }
.fc-insumos { padding: 12px 14px; border-radius: var(--r-m); background: var(--ok-suave); color: #1F6B47; font-size: 13px; }
.fc-insumos ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fc-insumos li { display: flex; justify-content: space-between; gap: 10px; }
.fc-notas { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--oro-100); color: #6A4A1E; font-size: 13.5px; }
.fc-notas .ico { flex: none; margin-top: 2px; }
.fc-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-acciones .btn { flex: 1 1 200px; }
.fc-secundarias { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--borde); }

/* horarios */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slots-grupo { margin-top: 12px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--borde-fuerte); border-radius: 12px; background: var(--superficie); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; transition: all .18s var(--ease); }
.slot small { font-size: 10.5px; font-weight: 700; color: var(--texto-3); }
.slot:hover:not(:disabled) { border-color: var(--rosa-400); color: var(--rosa-700); transform: translateY(-1px); }
.slot.activo { border-color: transparent; background: var(--grad-marca); color: #fff; box-shadow: 0 6px 16px rgba(214, 51, 108, .32); }
.slot.activo small { color: rgba(255, 255, 255, .85); }
.slot.actual { border-style: dashed; border-color: var(--rosa-400); }
.slot:disabled { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.hoja-mover .dias-tira { margin: 12px 0 14px; }

/* ───── nueva cita ───── */
.hoja-nc .hoja-cuerpo { padding-top: 6px; }
.nc { display: flex; flex-direction: column; gap: 6px; }
.nc-paso { padding: 14px 0 16px; border-bottom: 1px solid var(--borde); }
.nc-paso:last-child { border-bottom: 0; }
.nc-paso > h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 800; }
.nc-paso > h3 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ciruela-900); color: #fff; font-size: 12.5px; }
.nc-ayuda { padding: 6px 0; }
.nc-res { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.nc-res-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); text-align: left; transition: all .18s; }
.nc-res-item:hover, .nc-res-item:focus-visible { border-color: var(--rosa-300); background: var(--rosa-50); }
.nc-res-item strong { display: block; font-size: 14px; }
.nc-res-item small { display: block; font-size: 12px; color: var(--texto-2); }
.nc-res-item > .ico { color: var(--texto-3); }
.nc-elegida { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--rosa-300); border-radius: var(--r-m); background: var(--rosa-50); animation: subir .35s var(--ease) both; }
.nc-elegida strong { display: block; font-size: 15px; }
.nc-elegida small { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--texto-2); }
.nc-elegida .insignia .ico { width: 13px; height: 13px; }
.nc-nueva { margin-bottom: 10px; }
.nc-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.nc-serv { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--borde-fuerte); border-radius: 14px; background: var(--superficie); text-align: left; transition: all .2s var(--ease); }
.nc-serv strong { font-size: 13.5px; }
.nc-serv small { font-size: 12px; color: var(--texto-2); }
.nc-serv:hover { border-color: var(--rosa-300); }
.nc-serv.activo { border-color: var(--rosa-500); background: var(--rosa-50); box-shadow: 0 0 0 3px rgba(214, 51, 108, .14); }
.nc-zonas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--r-m); background: var(--superficie-2); }
.zonas-grupo .etiqueta { margin-bottom: 6px; }
.chip-zona-sel .num { margin-left: 4px; font-size: 12px; font-weight: 800; color: var(--texto-3); }
.chip-zona-sel.activo { border-color: var(--rosa-500); background: var(--rosa-500); color: #fff; }
.chip-zona-sel.activo .num { color: rgba(255, 255, 255, .85); }
.chip-zona-sel.incluida { border-style: dashed; opacity: .55; }
.nc-cot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding: 12px 16px; border-radius: var(--r-m); background: linear-gradient(120deg, var(--ciruela-900), #4A2335); color: #fff; animation: subir .35s var(--ease) both; }
.nc-cot-filas { display: flex; flex: 1; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.nc-cot-filas > div { display: flex; gap: 8px; }
.nc-cot-filas .desc { color: #FFB3CB; }
.nc-cot-total { display: flex; flex-direction: column; align-items: flex-end; }
.nc-cot-total small { font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.nc-cot-total strong { font-family: var(--f-display); font-size: 26px; font-weight: 500; }
.nc-cot-paq { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: var(--oro-300); }
.nc-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.nc-prof .etiqueta { margin: 0 4px 0 0; }
.nc-prof .chip .avatar { margin-left: -6px; }
.nc-det { display: flex; flex-direction: column; gap: 14px; }
.segmentado.envuelve { flex-wrap: wrap; border-radius: 18px; }
.nc-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--texto-2); }
.nc-resumen strong { font-family: var(--f-display); font-size: 21px; font-weight: 500; color: var(--texto); }
.hoja-nc .hoja-pie { align-items: center; }
.nc-listo { display: flex; flex-direction: column; align-items: center; padding: 10px 0 6px; text-align: center; }
.nc-check { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%; background: var(--grad-marca); color: #fff; box-shadow: 0 14px 34px rgba(214, 51, 108, .38); animation: pop .6s var(--ease-rebote) both; }
.nc-check .ico { stroke-width: 2.4; }
.nc-codigo { margin: 2px 0 18px; font-family: var(--f-display); font-size: 40px; font-weight: 500; letter-spacing: .14em; color: var(--rosa-700); }
.nc-listo-datos { display: grid; gap: 1px; width: 100%; max-width: 480px; border-radius: var(--r-m); overflow: hidden; background: var(--borde); text-align: left; }
.nc-listo-datos > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; background: var(--superficie); font-size: 13.5px; }
.nc-listo-datos span { color: var(--texto-2); }
.nc-listo-datos strong { text-align: right; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 640px) { .hoja-nc .hoja-pie { flex-wrap: wrap; } .hoja-nc .hoja-pie .btn { width: 100%; } }

/* ───── punto de venta ───── */
.pos-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 18px; align-items: start; }
.pos-izq { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pos-izq .tarjeta-cab { flex-wrap: wrap; }
.pc-lista { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.pc-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); cursor: pointer; transition: all .18s var(--ease); }
.pc-item:hover { border-color: var(--rosa-300); }
.pc-item.activo { border-color: var(--rosa-500); background: var(--rosa-50); box-shadow: 0 0 0 3px rgba(214, 51, 108, .12); }
.pc-item input { width: 18px; height: 18px; accent-color: var(--rosa-500); }
.pc-item strong { display: block; font-size: 14px; }
.pc-item small { display: block; font-size: 12px; color: var(--texto-2); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.prod-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); text-align: left; transition: all .18s var(--ease); }
.prod-btn:hover:not(:disabled) { border-color: var(--rosa-300); transform: translateY(-1px); box-shadow: var(--sombra-1); }
.prod-btn:active:not(:disabled) { transform: scale(.98); }
.prod-btn:disabled { opacity: .45; cursor: not-allowed; }
.prod-btn strong { font-size: 13.5px; line-height: 1.25; }
.prod-btn small { font-size: 12px; color: var(--texto-2); }
.prod-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 10px; background: var(--rosa-50); color: var(--rosa-600); }
.prod-n { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--rosa-500); color: #fff; font-size: 12px; font-weight: 800; }
.paq-actual { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-m); background: var(--rosa-50); color: var(--rosa-700); font-size: 14px; }
.paq-ops { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.paq-op { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-m); background: var(--superficie); text-align: left; transition: all .2s var(--ease); }
.paq-op:hover { border-color: var(--rosa-300); }
.paq-op.activo { border-color: var(--rosa-500); background: var(--rosa-50); box-shadow: 0 0 0 3px rgba(214, 51, 108, .14); }
.paq-op strong { display: block; font-size: 14.5px; }
.paq-op small { font-size: 12.5px; color: var(--texto-2); }
.paq-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad-marca); color: #fff; font-family: var(--f-display); font-size: 22px; }
.check-fila { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.check-fila input { width: 18px; height: 18px; accent-color: var(--rosa-500); }
/* gift card */
.gc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.gc-prev { max-width: 340px; }
@media (min-width: 1560px) { .gc-panel { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }
.gc-form { display: flex; flex-direction: column; gap: 10px; }
.gc-otro { width: 90px; min-height: 34px; padding: 4px 10px; border-radius: 999px; }
.gc-tarjeta { position: relative; display: flex; flex-direction: column; aspect-ratio: 1.6; padding: 18px 20px; overflow: hidden; border-radius: 20px; color: var(--ciruela-900); box-shadow: 0 18px 40px rgba(101, 19, 49, .22); transition: background .4s; }
.gc-tarjeta::after { content: ''; position: absolute; inset: -50% -10%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); transform: translateX(-60%); animation: brillo-gc 4.5s ease-in-out infinite; pointer-events: none; }
.gc-tarjeta.d-rosa { background: radial-gradient(260px 160px at 100% 0%, #fff6, transparent 70%), linear-gradient(135deg, #FDE4EC, #F5B6CA); }
.gc-tarjeta.d-oro { background: radial-gradient(260px 160px at 100% 0%, #fff8, transparent 70%), linear-gradient(135deg, #F8EBD3, #D9B27A); color: #3B2610; }
.gc-tarjeta.d-noche { background: radial-gradient(260px 160px at 100% 0%, rgba(214, 51, 108, .5), transparent 70%), linear-gradient(135deg, #2E1622, #120A0F); color: #fff; }
.gc-mono { position: absolute; right: -14px; bottom: -18px; width: 140px; height: 140px; opacity: .18; color: currentColor; }
.d-rosa .gc-mono { color: var(--rosa-600); opacity: .22; }
.d-noche .gc-mono { color: #F28CAE; opacity: .3; }
.gc-tit { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.gc-monto { margin-top: 6px; font-family: var(--f-display); font-size: 40px; font-weight: 500; line-height: 1; }
.gc-para { margin-top: auto; font-size: 13px; font-weight: 700; }
.gc-msj { font-family: var(--f-display); font-style: italic; font-size: 13px; opacity: .85; }
.gc-marca { margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.gc-dis { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); font-size: 13px; font-weight: 700; }
.gc-dis i { width: 24px; height: 24px; border-radius: 50%; }
.gc-dis.d-rosa i { background: linear-gradient(135deg, #FDE4EC, #F5B6CA); }
.gc-dis.d-oro i { background: linear-gradient(135deg, #F8EBD3, #D9B27A); }
.gc-dis.d-noche i { background: linear-gradient(135deg, #4A2335, #120A0F); }
.gc-dis.activo { border-color: var(--ciruela-900); box-shadow: 0 0 0 2px var(--ciruela-900) inset; }
@keyframes brillo-gc { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.gc-form .rejilla-campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* ticket */
.ticket { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.ticket-cab { display: flex; flex-direction: column; gap: 8px; }
.ticket-cab h3 { font-family: var(--f-display); font-size: 22px; font-weight: 500; }
.ticket-cli { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--rosa-50); }
.ticket-cli > span:not(.avatar) { flex: 1; min-width: 0; }
.ticket-cli strong { display: block; font-size: 14px; }
.ticket-cli small { font-size: 12px; color: var(--texto-2); }
.ticket-buscar input { min-height: 38px; font-size: 13.5px; }
.ticket-res { display: flex; flex-direction: column; gap: 4px; }
.ticket-lineas { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px dashed var(--borde-fuerte); border-bottom: 1px dashed var(--borde-fuerte); }
.ticket-lineas li { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.ticket-lineas li + li { border-top: 1px solid var(--borde); }
.ticket-lineas strong { display: block; font-size: 13.5px; line-height: 1.3; }
.ticket-lineas small { display: block; font-size: 11.5px; color: var(--texto-3); }
.ticket-lineas .num { font-weight: 800; white-space: nowrap; }
.ticket-lineas .btn-icono { width: 30px; height: 30px; }
.ticket-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-m); color: var(--texto-3); font-size: 13px; text-align: center; }
.ticket-vacio .ico { color: var(--rosa-300); }
.ticket-desc { display: flex; align-items: center; gap: 8px; }
.ticket-desc .etiqueta { margin: 0 auto 0 0; }
.ticket-desc .entrada { width: 90px; min-height: 36px; padding: 6px 10px; text-align: right; }
.ticket-totales { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ticket-totales > div { display: flex; justify-content: space-between; }
.ticket-totales .desc { color: var(--rosa-600); }
.ticket-total { align-items: baseline; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borde); }
.ticket-total span { font-weight: 800; font-size: 15px; }
.ticket-total strong { font-family: var(--f-display); font-size: 36px; font-weight: 500; letter-spacing: -.02em; }
.metodos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: -6px; }
.metodo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--borde-fuerte); border-radius: 14px; background: var(--superficie); font-size: 11.5px; font-weight: 700; color: var(--texto-2); transition: all .18s var(--ease); }
.metodo .ico { color: var(--c); }
.metodo:hover { border-color: var(--c); color: var(--texto); }
.metodo.activo { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, white); color: var(--texto); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.pagos { display: flex; flex-direction: column; gap: 8px; }
.pago { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 7%, white); box-shadow: inset 3px 0 0 var(--c); }
.pago-cab { display: flex; align-items: center; gap: 8px; }
.pago-cab strong { flex: 1; font-size: 13.5px; }
.pago-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; color: var(--c); }
.pago-monto { width: 110px; min-height: 38px; padding: 6px 10px; font-weight: 800; text-align: right; }
.pago .btn-icono { width: 30px; height: 30px; }
.pago > .entrada { min-height: 38px; font-size: 13.5px; }
.pago > small { font-size: 12px; }
.billetes { display: flex; flex-wrap: wrap; gap: 5px; }
.billetes button { min-height: 32px; padding: 0 12px; border: 1px solid rgba(46, 156, 106, .35); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 800; color: #217A51; }
.billetes button:hover { background: var(--ok-suave); }
.deuna { display: flex; align-items: center; gap: 12px; }
.deuna-qr { width: 104px; height: 104px; flex: none; padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--sombra-1); }
.deuna small { font-size: 12px; color: var(--texto-2); }
.pos-estado { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.pos-estado .ico { width: 16px; height: 16px; }
.pos-estado strong { margin-left: auto; font-size: 16px; }
.pos-estado.falta { background: var(--alerta-suave); color: #8A5208; }
.pos-estado.ok { background: var(--ok-suave); color: #1F6B47; }
.pos-estado.error { background: var(--error-suave); color: #B22F2F; }
.factura { border: 1px solid var(--borde); border-radius: 14px; padding: 0 12px; }
.factura summary { display: flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.factura summary::-webkit-details-marker { display: none; }
.factura summary .mute-2 { margin-left: auto; font-weight: 600; font-size: 12px; }
.factura[open] { padding-bottom: 12px; }
.factura .segmentado { margin-bottom: 10px; }
.caja-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .pos-rejilla, .caja-rejilla { grid-template-columns: minmax(0, 1fr); } .ticket { position: static; } }
@media (max-width: 520px) { .metodos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* caja */
.caja-esperado { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 16px; border-radius: var(--r-m); background: linear-gradient(130deg, var(--ciruela-900), #4A2335); color: #fff; }
.caja-esperado span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.caja-esperado strong { font-family: var(--f-display); font-size: 36px; font-weight: 500; }
.caja-esperado small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.caja-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--borde); }
.caja-fila .num { font-weight: 800; }
.caja-fila.total { border-bottom: 0; font-weight: 800; }
.caja-fila.gasto { color: var(--texto-2); font-size: 13px; }
.caja-met { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }
.caja-botones { margin-top: 14px; }
.abrir-caja .etiqueta { margin: 0; }
.abrir-caja .entrada { width: 110px; text-align: right; }
.cierre-res { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-m); }
.cierre-res strong { display: block; }
.cierre-res small { font-size: 12px; opacity: .8; }
.cierre-res.ok { background: var(--ok-suave); color: #1F6B47; }
.cierre-res.dif { background: var(--alerta-suave); color: #8A5208; }
.cobros-lista { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; }
.cobro { display: flex; align-items: center; gap: 6px; border-radius: 12px; }
.cobro:hover { background: var(--rosa-50); }
.cobro-info { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 9px 6px; border: 0; background: none; text-align: left; }
.cobro-info strong.cortar, .cobro-info strong:not(.num) { display: block; font-size: 13.5px; }
.cobro-info small { display: block; font-size: 12px; color: var(--texto-3); }
.cobro-info > .num { font-weight: 800; }
.cobro-hora { flex: none; min-width: 44px; font-size: 12px; font-weight: 800; color: var(--texto-3); }
.cobro-met { display: flex; gap: 2px; }
.cobro-met span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }
.cobro-met .ico { width: 13px; height: 13px; }
.cobro.anulado { opacity: .55; }
.cobro.anulado .num { text-decoration: line-through; }
/* cierre */
.cierre-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; border-radius: var(--r-m); overflow: hidden; background: var(--borde); }
.cierre-resumen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--superficie-2); }
.cierre-resumen span { font-size: 11.5px; color: var(--texto-2); font-weight: 700; }
.cierre-resumen strong { font-size: 16px; }
.cierre-resumen .esperado { background: var(--ciruela-900); color: #fff; }
.cierre-resumen .esperado span { color: rgba(255, 255, 255, .7); }
.denominaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 14px; }
.den { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); }
.den span { font-size: 12px; font-weight: 800; color: var(--texto-2); }
.den input { width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--borde-fuerte); border-radius: 9px; font-weight: 800; text-align: right; }
.cierre-total { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--rosa-50); }
.cierre-total span:first-child { font-weight: 800; }
.cierre-total strong { margin-left: auto; font-family: var(--f-display); font-size: 26px; font-weight: 500; }
@media (max-width: 640px) { .cierre-resumen { grid-template-columns: 1fr 1fr; } }

/* ───── recibo ───── */
.recibo { padding: 6px 4px; font-size: 13px; color: var(--texto); }
.recibo-marca { display: flex; align-items: center; gap: 12px; }
.recibo-mono { width: 46px; height: 46px; flex: none; }
.recibo-marca strong { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.recibo-marca small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.recibo-dir { margin-top: 8px; font-size: 11.5px; color: var(--texto-3); }
.recibo-num { display: flex; flex-direction: column; margin: 14px 0; padding: 10px 0; border-top: 1px dashed var(--borde-fuerte); border-bottom: 1px dashed var(--borde-fuerte); }
.recibo-num span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.recibo-num strong { font-size: 16px; }
.recibo-num small { color: var(--texto-2); }
.recibo-anulado { margin-bottom: 12px; padding: 8px; border: 2px solid var(--error); border-radius: 10px; color: var(--error); font-weight: 800; text-align: center; letter-spacing: .14em; text-transform: uppercase; }
.recibo-cliente { display: flex; flex-direction: column; margin-bottom: 10px; }
.recibo-cliente span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.recibo-cliente small { color: var(--texto-2); }
.recibo-items { width: 100%; border-collapse: collapse; }
.recibo-items td { padding: 7px 0; vertical-align: top; border-bottom: 1px solid var(--borde); }
.recibo-items td.num { padding-left: 12px; text-align: right; white-space: nowrap; font-weight: 700; }
.recibo-items small { color: var(--texto-2); }
.recibo-tot { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.recibo-tot > div { display: flex; justify-content: space-between; }
.recibo-tot .grande { margin: 4px 0; padding: 8px 0; border-top: 1px solid var(--borde-fuerte); border-bottom: 1px solid var(--borde-fuerte); font-weight: 800; font-size: 15px; }
.recibo-tot .grande .num { font-family: var(--f-display); font-size: 24px; font-weight: 500; }
.recibo-tot .pago { color: var(--texto-2); font-size: 12.5px; flex-direction: row; padding: 0; background: none; box-shadow: none; animation: none; border-radius: 0; }
.recibo-gracias { margin-top: 16px; text-align: center; font-size: 13.5px; }
.recibo-gracias em { font-family: var(--f-display); color: var(--rosa-600); }
.recibo-nota { margin-top: 10px; font-size: 10.5px; color: var(--texto-3); text-align: center; }
@media print {
  body.imprimir-recibo .app, body.imprimir-recibo .banda-demo, body.imprimir-recibo .avisos, body.imprimir-recibo .sin-conexion { display: none !important; }
  body.imprimir-recibo .velo { position: static; display: block; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; }
  body.imprimir-recibo .velo:not(:has(.hoja-recibo)) { display: none !important; }
  body.imprimir-recibo .hoja { max-width: 80mm; max-height: none; margin: 0 auto; box-shadow: none; transform: none; opacity: 1; }
  body.imprimir-recibo .hoja-cab, body.imprimir-recibo .hoja-pie, body.imprimir-recibo .hoja-asa { display: none !important; }
  body.imprimir-recibo .hoja-cuerpo { overflow: visible; padding: 0; }
}

/* ───── clientas ───── */
.cli-rejilla { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cli-lista { position: sticky; top: 92px; display: flex; flex-direction: column; max-height: calc(100vh - 120px); overflow: hidden; }
.cli-lista .tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.cli-filtros .chip { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.cli-items { display: flex; flex-direction: column; padding: 8px; overflow: auto; }
.cli-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 14px; background: none; text-align: left; transition: background .15s; }
.cli-item:hover { background: var(--rosa-50); }
.cli-item.activo { background: var(--ciruela-900); color: #fff; }
.cli-item.activo small { color: rgba(255, 255, 255, .7); }
.cli-item strong { display: block; font-size: 13.5px; }
.cli-item small { display: block; font-size: 12px; color: var(--texto-3); }
.punto-alerta { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--alerta); }
.cli-ficha { min-height: 420px; padding: 22px; }
.ficha { display: flex; flex-direction: column; gap: 16px; }
.ficha-cab { display: flex; align-items: flex-start; gap: 16px; }
.ficha-cab .avatar.grande { width: 64px; height: 64px; font-size: 21px; }
.ficha-nombre { margin-bottom: 6px; font-size: 28px; font-weight: 450; letter-spacing: -.015em; }
.ficha-cab p { margin-top: 8px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-m); overflow: hidden; background: var(--borde); }
.ficha-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--superficie-2); }
.ficha-kpis span { font-size: 11.5px; font-weight: 700; color: var(--texto-2); }
.ficha-kpis strong { font-family: var(--f-display); font-size: 22px; font-weight: 500; }
.ficha-proxima { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--rosa-200); border-radius: var(--r-m); background: var(--rosa-50); text-align: left; }
.ficha-proxima > .ico { color: var(--rosa-600); }
.ficha-proxima small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rosa-600); }
.ficha-proxima strong { font-size: 14px; }
.ficha-sub { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.ficha-paqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ficha-paq { padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r-m); font-size: 13.5px; }
.ficha-paq.terminado { opacity: .6; }
.ficha .tabla td:first-child { white-space: nowrap; }
.ficha .tabla td, .ficha .tabla th { padding: 10px 10px; }
.ficha-notas { padding: 12px 14px; border-radius: var(--r-m); background: var(--oro-100); color: #6A4A1E; font-size: 13.5px; }
@media (max-width: 900px) { .cli-rejilla { grid-template-columns: minmax(0, 1fr); } .cli-lista { position: static; max-height: 520px; } .ficha-kpis { grid-template-columns: 1fr 1fr; } }

/* ───── WhatsApp ───── */
.wa-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 20px; padding: 18px 20px; }
.wa-intro-ico { display: grid; flex: none; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #1FAF5A; color: #fff; box-shadow: 0 10px 24px rgba(31, 175, 90, .3); }
.wa-intro strong { font-size: 16px; }
.wa-intro p { margin-top: 2px; max-width: 620px; }
.wa-cifras { display: flex; gap: 22px; }
.wa-cifras > div { display: flex; flex-direction: column; align-items: center; }
.wa-cifras strong { font-family: var(--f-display); font-size: 32px; font-weight: 500; line-height: 1; }
.wa-cifras span { font-size: 12px; color: var(--texto-2); }
.wa-grupo { margin-bottom: 24px; }
.wa-grupo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wa-grupo-cab h3 { font-size: 16px; font-weight: 800; }
.wa-grupo-ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--rosa-100); color: var(--rosa-600); }
.wa-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wa-item { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); transition: opacity .3s, transform .3s var(--ease); }
.wa-item.enviado { opacity: .6; background: var(--superficie-2); box-shadow: none; }
.wa-item.enviado .wa-cab strong { text-decoration: line-through; text-decoration-color: var(--ok); }
.wa-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wa-cab strong { display: block; font-size: 14px; }
.wa-cab small { display: block; font-size: 12px; color: var(--texto-2); }
.wa-burbuja { position: relative; max-height: 92px; overflow: hidden; padding: 10px 12px; border: 0; border-radius: 4px 14px 14px 14px; background: #E7F8EC; color: #1E3A2A; font-size: 12.5px; line-height: 1.45; text-align: left; cursor: pointer; }
.wa-burbuja::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(transparent, #E7F8EC); pointer-events: none; }
.wa-burbuja.abierta { max-height: none; }
.wa-burbuja.abierta::after { display: none; }

/* ───── inventario ───── */
.inv-alertas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-l); background: linear-gradient(120deg, #FFF1E0, #FDE6E6); border: 1px solid rgba(217, 138, 28, .25); color: #7A4A0B; }
.inv-alertas > .ico { color: var(--alerta); }
.inv-alertas strong { display: block; font-size: 15px; }
.inv-alertas span { font-size: 13px; }
.inv-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.inv-buscar { width: min(100%, 280px); }
.inv-nota { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.inv-item { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.inv-item.est-bajo, .inv-item.est-agotado { border-color: rgba(214, 69, 69, .3); }
.inv-cab { display: flex; align-items: flex-start; gap: 10px; }
.inv-cab strong { display: block; font-size: 14px; line-height: 1.3; }
.inv-cab small { display: block; font-size: 12px; color: var(--texto-3); }
.inv-ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--rosa-50); color: var(--rosa-600); }
.inv-stock { display: flex; align-items: baseline; gap: 6px; }
.inv-n { font-family: var(--f-display); font-size: 28px; font-weight: 500; line-height: 1; }
.inv-barra { position: relative; height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.inv-barra span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transform-origin: left; }
.inv-barra i { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(59, 30, 43, .25); }
.est-atento .inv-barra span { background: var(--alerta); }
.est-bajo .inv-barra span, .est-agotado .inv-barra span { background: var(--error); }
.inv-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nota-auto { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--info-suave); color: #2F57A8; font-size: 13px; }
.kardex { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.kardex li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.kx-tipo { flex: none; width: 70px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.kx-entrada { color: var(--ok); } .kx-venta { color: var(--rosa-600); } .kx-ajuste { color: var(--alerta); }

/* ───── solicitudes ───── */
.sol-intro { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.sol { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.sol.atendida { opacity: .65; box-shadow: none; background: var(--superficie-2); }
.sol-cab { display: flex; align-items: flex-start; gap: 12px; }
.sol-cab strong { display: block; font-size: 16px; }
.sol-cab small { font-size: 12.5px; color: var(--texto-2); }
.sol-cab .sobretitulo { font-size: 10.5px; }
.sol-ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--rosa-100); color: var(--rosa-600); }
.sol-ico.t-giftcard { background: var(--oro-100); color: var(--oro-600); }
.sol-detalle { margin: 0; padding: 10px 14px; border-left: 3px solid var(--rosa-300); border-radius: 0 12px 12px 0; background: var(--rosa-50); font-family: var(--f-display); font-size: 15px; font-style: italic; color: var(--ciruela-700); }
.sol-acciones { display: flex; flex-wrap: wrap; gap: 6px; }

/* ───── formularios ───── */
.form-hoja { display: flex; flex-direction: column; gap: 14px; }
.form-hoja .rejilla-campos { gap: 12px; }