:root {
  --vino: #532D6D;
  --vino-osc: #3B1E50;
  --rosa: #9B72B5;
  --lila: #B597CC;
  --rosa-claro: #F1EAF6;
  --rosa-borde: #E3D6EC;
  --rosa-linea: #C3ACD3;
  --fondo: #FAF7FC;
  --blanco: #FFFFFF;
  --texto: #241B2B;
  --suave: #6A5C76;
  --dorado: #8A5E26;
  --dorado-claro: #F6EBDD;
  --dorado-medio: #C9A15E;
  --verde: #2F6A4B;
  --rojo: #A3263B;
  --sombra: 0 3px 12px rgba(83, 45, 109, 0.07);
  --sombra-alta: 0 10px 30px rgba(83, 45, 109, 0.14);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 15px; }
@media (min-width: 560px) { body { background: #EEE7F3; } }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vino); }
h1, h2, h3, p { margin: 0; }
img { display: block; }
.oculto { display: none !important; }

#app {
  max-width: 520px; min-height: 100dvh; margin: 0 auto; background: var(--fondo);
  display: flex; flex-direction: column; position: relative;
}
.con-nav { padding-bottom: calc(110px + var(--seguro-abajo)); }

/* ---------- encabezados ---------- */
.top { padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 10px; display: flex; align-items: center; gap: 12px; }
.top .mono { width: 30px; height: 47px; object-fit: contain; flex-shrink: 0; }
.top .titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.marca { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--vino); line-height: 1; }
.sub { font-size: 12.5px; color: var(--suave); margin-top: 3px; }
.titulo { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--vino); line-height: 1.05; }
.volver {
  width: 44px; height: 44px; border-radius: 14px; background: var(--blanco); border: none; flex-shrink: 0;
  display: grid; place-items: center; box-shadow: var(--sombra);
}
.tasa-chip {
  border: none; background: var(--blanco); border-radius: 14px; padding: 7px 11px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.tasa-chip small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dorado); }
.tasa-chip b { font-size: 14px; font-weight: 800; }
.tasa-chip.alerta { background: var(--dorado-claro); }

.seccion { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.seccion + .seccion { margin-top: 18px; }
.seccion-t { display: flex; align-items: center; gap: 8px; }
.seccion-t h2 { font-size: 13px; font-weight: 800; flex: 1; }
.seccion-t .link, .link { background: none; border: none; padding: 6px 0; font-size: 12.5px; font-weight: 800; color: var(--vino); }

/* ---------- días ---------- */
.semana-nav { display: flex; align-items: center; gap: 6px; padding: 4px 20px 6px; }
.semana-nav span { flex: 1; font-size: 13px; font-weight: 700; color: var(--suave); }
.icon-btn { width: 40px; height: 40px; border: none; border-radius: 12px; background: transparent; display: grid; place-items: center; color: var(--texto); }
.icon-btn:active { background: var(--rosa-claro); }
.dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 20px 12px; }
.dia {
  height: 60px; border: none; border-radius: 16px; background: var(--blanco);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative;
}
.dia small { font-size: 10.5px; font-weight: 600; color: var(--suave); }
.dia b { font-size: 18px; font-weight: 800; }
.dia.hoy::after { content: ''; position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }
.dia.sel { background: var(--vino); color: var(--blanco); box-shadow: 0 6px 16px rgba(83, 45, 109, .28); }
.dia.sel small { color: #E3D3EE; }
.dia.sel.hoy::after { background: var(--blanco); }
.dias-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 2px 20px 6px; scrollbar-width: none; }
.dias-scroll::-webkit-scrollbar { display: none; }
.dias-scroll .dia { flex: 0 0 52px; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--rosa-borde);
  background: var(--blanco); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px;
}
.chip.sel { background: var(--vino); border-color: var(--vino); color: var(--blanco); }
.punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pill { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* ---------- tarjetas ---------- */
.card { background: var(--blanco); border-radius: 22px; padding: 14px 16px; box-shadow: var(--sombra); }
.resumen-dia { margin: 0 20px 14px; padding: 13px 16px; border-radius: 18px; background: var(--rosa-claro); display: flex; align-items: center; gap: 12px; }
.resumen-dia div { flex: 1; display: flex; flex-direction: column; }
.resumen-dia b { font-size: 13.5px; }
.resumen-dia small { font-size: 12px; color: var(--suave); margin-top: 2px; }
.resumen-dia .monto { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--vino); }
.aviso { margin: 0 20px 12px; padding: 11px 14px; border-radius: 16px; background: var(--dorado-claro); color: #5C3E17; font-size: 12.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.aviso button { margin-left: auto; }

.lista { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.fila-cita { display: flex; gap: 12px; align-items: stretch; }
.fila-cita .hora { width: 58px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; padding-top: 12px; }
.fila-cita .hora b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.fila-cita .hora small { font-size: 11px; color: var(--suave); white-space: nowrap; }
.cita {
  flex: 1; min-width: 0; text-align: left; border: none; background: var(--blanco); border-radius: 20px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra);
}
.cita.curso { box-shadow: 0 0 0 2px var(--vino), 0 8px 20px rgba(83, 45, 109, .16); }
.cita.apagada { opacity: .55; }
.cita.apagada .nom { text-decoration: line-through; }
.cita .l1 { display: flex; align-items: center; gap: 8px; }
.cita .nom { flex: 1; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita .precio { font-size: 14.5px; font-weight: 800; color: var(--vino); }
.cita .serv { font-size: 12.5px; color: var(--suave); }
.cita .l3 { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.estado { font-size: 11.5px; font-weight: 700; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.estado.ok { color: var(--verde); }
.estado.pend { color: var(--dorado); }
.estado.mal { color: var(--rojo); }
.estado.curso { color: var(--blanco); background: var(--vino); border-radius: 999px; padding: 4px 10px; font-weight: 800; }
.hueco {
  flex: 1; border: 1.5px dashed var(--rosa-linea); border-radius: 18px; padding: 12px 14px; background: transparent; text-align: left;
  display: flex; align-items: center; gap: 10px; color: var(--vino); font-size: 13px; font-weight: 600;
}
.hueco.solo { color: var(--suave); border-style: solid; border-color: transparent; background: #EEE7F3; }
.vacio { margin: 10px 20px; padding: 28px 20px; border-radius: 22px; border: 1.5px dashed var(--rosa-linea); text-align: center; color: var(--suave); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vacio b { color: var(--texto); font-size: 15px; }
.nota-dia { font-size: 12.5px; color: var(--suave); padding: 0 20px 10px; display: flex; align-items: center; gap: 6px; }

/* ---------- navegación inferior ---------- */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--seguro-abajo)); width: min(488px, calc(100% - 32px));
  height: 70px; border-radius: 26px; background: var(--blanco); box-shadow: var(--sombra-alta);
  display: flex; align-items: center; justify-content: space-around; padding: 0 6px; z-index: 20;
}
.nav button { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; color: var(--suave); font-size: 11px; font-weight: 600; padding: 6px 0; }
.nav button.sel { color: var(--vino); font-weight: 800; }
.nav .fab { width: 58px; min-width: 58px; height: 58px; margin-top: -34px; border-radius: 20px; background: var(--vino); color: var(--blanco); justify-content: center; box-shadow: 0 10px 22px rgba(83, 45, 109, .38); }
.nav-fondo { position: fixed; left: 0; right: 0; bottom: 0; height: calc(110px + var(--seguro-abajo)); background: linear-gradient(180deg, rgba(250,247,252,0) 0%, var(--fondo) 45%); pointer-events: none; z-index: 19; }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.campo input, .campo select, .campo textarea, .input {
  border: 1.5px solid var(--rosa-borde); background: var(--blanco); border-radius: 14px; padding: 0 14px; height: 48px;
  font-size: 15px; font-weight: 600; color: var(--texto); text-transform: none; letter-spacing: 0; outline: none; width: 100%;
}
.campo textarea { height: 80px; padding: 12px 14px; resize: none; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .input:focus { border-color: var(--vino); }
.campo .ayuda { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }
.fila { display: flex; gap: 10px; align-items: flex-end; }
.fila > * { flex: 1; min-width: 0; }
.form { display: flex; flex-direction: column; gap: 14px; }

.btn {
  height: 52px; padding: 0 22px; border-radius: 18px; border: none; background: var(--vino); color: var(--blanco);
  font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 20px rgba(83, 45, 109, .25);
}
.btn:disabled { opacity: .5; box-shadow: none; }
.btn.ancho { width: 100%; }
.btn.sec { background: var(--blanco); color: var(--vino); border: 1.5px solid var(--rosa-borde); box-shadow: none; }
.btn.peligro { background: var(--blanco); color: var(--rojo); border: 1.5px solid #EBC5CC; box-shadow: none; }
.btn.chico { height: 44px; padding: 0 16px; border-radius: 14px; font-size: 13.5px; }
.btn-linea { height: 50px; border-radius: 18px; border: 1.5px dashed var(--rosa-linea); background: transparent; color: var(--vino); font-size: 14px; font-weight: 800; width: 100%; }

.seg { display: flex; background: #ECE3F2; border-radius: 15px; padding: 4px; }
.seg button { flex: 1; height: 40px; border: none; border-radius: 12px; background: transparent; font-size: 13px; font-weight: 700; color: var(--suave); }
.seg button.sel { background: var(--blanco); color: var(--vino); font-weight: 800; box-shadow: 0 2px 8px rgba(83, 45, 109, .12); }

.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opcion {
  text-align: left; padding: 12px 13px; border-radius: 18px; border: 1.5px solid var(--rosa-borde); background: var(--blanco);
  display: flex; flex-direction: column; gap: 4px;
}
.opcion b { font-size: 13px; line-height: 1.25; }
.opcion small { font-size: 12px; font-weight: 700; color: var(--dorado); }
.opcion.sel { background: var(--vino); border-color: var(--vino); color: var(--blanco); }
.opcion.sel small { color: #EADDF3; }

.horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.horas button { height: 44px; border-radius: 14px; border: 1.5px solid var(--rosa-borde); background: var(--blanco); font-size: 13px; font-weight: 700; }
.horas button.sel { background: var(--vino); border-color: var(--vino); color: var(--blanco); }

.avatares { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.avatar-btn { background: none; border: none; padding: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px; flex-shrink: 0; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; flex-shrink: 0; }
.avatar.chico { width: 44px; height: 44px; font-size: 17px; }
.avatar-btn .n { font-size: 12px; font-weight: 600; color: var(--suave); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-btn .m { font-size: 10.5px; color: var(--suave); margin-top: -3px; }
.avatar-btn.sel .avatar { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5.5px var(--vino); }
.avatar-btn.sel .n { color: var(--vino); font-weight: 800; }
.avatar-btn:disabled { opacity: .45; }

.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; z-index: 1; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #DDD0E6; transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .2s; }
.switch input:checked + span { background: var(--vino); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 2px; }

.colores { display: flex; gap: 10px; flex-wrap: wrap; }
.color { width: 38px; height: 38px; border-radius: 50%; border: none; }
.color.sel { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5.5px var(--texto); }

/* editor de horario semanal */
.semana-ed { display: flex; flex-direction: column; gap: 8px; }
.dia-ed { background: var(--blanco); border-radius: 18px; padding: 10px 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.dia-ed .cab { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.dia-ed .cab b { flex: 1; font-size: 14px; }
.dia-ed .cab small { color: var(--suave); font-size: 12.5px; font-weight: 600; }
.turno { display: flex; align-items: center; gap: 8px; }
.turno input { flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--rosa-borde); border-radius: 12px; padding: 0 10px; font-weight: 700; background: var(--fondo); }
.turno span { color: var(--suave); font-size: 12px; }
.turno .icon-btn { width: 36px; height: 36px; color: var(--suave); }
.mini-acciones { display: flex; gap: 14px; }
.mini-acciones button { background: none; border: none; padding: 4px 0; font-size: 12.5px; font-weight: 800; color: var(--vino); }

/* listas de ajustes */
.item {
  width: 100%; text-align: left; border: none; background: var(--blanco); border-radius: 20px; padding: 12px 14px; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 12px;
}
.item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item .txt b { font-size: 14px; }
.item .txt small { font-size: 12px; color: var(--suave); }
.item .txt .extra { font-size: 11.5px; font-weight: 700; color: var(--rojo); }
.item.inactivo { opacity: .55; }
.item .der { font-size: 15px; font-weight: 800; color: var(--vino); }
.pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.especial { background: var(--dorado-claro); box-shadow: none; }

/* resumen */
.total-card { margin: 0 20px; background: var(--vino); color: var(--blanco); border-radius: 26px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 28px rgba(83, 45, 109, .28); }
.total-card .p { font-size: 12px; font-weight: 600; color: #E3D3EE; }
.total-card .t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.total-card .t b { font-family: var(--serif); font-size: 46px; font-weight: 700; line-height: 1; }
.total-card .t span, .total-card .bs { font-size: 12.5px; font-weight: 700; color: #E3D3EE; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 100px; margin-top: 10px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; min-width: 0; }
.barra small { font-size: 9.5px; font-weight: 700; color: #E3D3EE; white-space: nowrap; }
.barra i { width: 100%; border-radius: 8px 8px 4px 4px; background: var(--rosa); min-height: 3px; }
.barra i.max { background: var(--blanco); }
.barra span { font-size: 10.5px; font-weight: 700; color: #E9DDF2; }
.prog { height: 7px; border-radius: 999px; background: #F1EAF6; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 999px; }
.linea-r { display: flex; align-items: center; gap: 8px; }
.linea-r .n { flex: 1; font-size: 13.5px; font-weight: 700; }
.linea-r small { font-size: 12px; color: var(--suave); }
.linea-r b { font-size: 14px; font-weight: 800; min-width: 58px; text-align: right; }
.split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 3px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--blanco); border-radius: 18px; padding: 12px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.stat b { font-size: 20px; font-weight: 800; }
.stat small { font-size: 11.5px; color: var(--suave); font-weight: 600; }

/* ---------- hoja inferior ---------- */
.velo { position: fixed; inset: 0; background: rgba(36, 27, 43, .38); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: aparecer .18s ease-out; }
.hoja {
  width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; background: var(--fondo); border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(22px + var(--seguro-abajo)); display: flex; flex-direction: column; gap: 14px; animation: subir .22s ease-out;
}
.hoja .asa { width: 40px; height: 5px; border-radius: 999px; background: var(--rosa-borde); margin: 0 auto 2px; }
.hoja h2 { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--vino); }
.hoja .acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hoja .acciones .btn { width: 100%; }
.det { display: flex; flex-direction: column; gap: 8px; }
.det-l { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.det-l .ico { width: 34px; height: 34px; border-radius: 11px; background: var(--blanco); display: grid; place-items: center; color: var(--vino); flex-shrink: 0; }
.det-l .grow { flex: 1; min-width: 0; }
.det-l small { color: var(--suave); font-size: 12.5px; display: block; }
.lineas { background: var(--blanco); border-radius: 18px; padding: 4px 14px; }
.lineas div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid #EFE8F4; }
.lineas div:last-child { border-bottom: none; }
.lineas .tot { font-weight: 800; }
.pago-fila { background: var(--blanco); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pago-fila .formas { display: flex; gap: 6px; flex-wrap: wrap; }
.pago-fila .formas .chip { height: 34px; font-size: 12.5px; }
.monto-usd { display: flex; align-items: center; gap: 10px; }
.monto-usd .input { flex: 1; }
.monto-usd small { font-size: 12.5px; color: var(--suave); font-weight: 600; min-width: 110px; text-align: right; }

.sugerencias { display: flex; flex-direction: column; background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; }
.sugerencias button { border: none; background: none; text-align: left; padding: 11px 14px; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #EFE8F4; }
.sugerencias button small { color: var(--suave); }

.barra-fija {
  position: sticky; bottom: 0; margin-top: auto; padding: 14px 20px calc(18px + var(--seguro-abajo)); background: var(--blanco); border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 24px rgba(83, 45, 109, .08); display: flex; align-items: center; gap: 14px; z-index: 5;
}
.barra-fija .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-fija .info small { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-fija .info b { font-size: 20px; font-weight: 800; }
.barra-fija .info b span { font-size: 13px; font-weight: 600; color: var(--suave); }

/* ---------- ingreso ---------- */
.portada { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 24px calc(30px + var(--seguro-abajo)); gap: 22px; }
.portada .logo { width: 210px; height: auto; margin: 0 auto; }
.portada h1 { font-family: var(--serif); font-size: 30px; color: var(--vino); text-align: center; }
.portada p { text-align: center; color: var(--suave); font-size: 14px; line-height: 1.45; }
.pin-input { text-align: center; font-size: 26px !important; letter-spacing: .5em !important; font-weight: 800 !important; height: 60px !important; }

.hola { margin: 4px 20px 14px; padding: 16px 18px; border-radius: 24px; background: var(--vino); color: var(--blanco); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 12px 26px rgba(83, 45, 109, .26); }
.hola b { font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.hola small { font-size: 13px; color: #E3D3EE; }
.hola .tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hola .tags span { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; }
.quien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 20px; }
.quien .avatar-btn { width: auto; }
.quien .avatar { width: 72px; height: 72px; font-size: 26px; }
.pie { padding: 18px 20px calc(22px + var(--seguro-abajo)); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--suave); }

/* ---------- avisos ---------- */
.toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 90;
  background: var(--texto); color: var(--blanco); padding: 12px 18px; border-radius: 16px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--sombra-alta); max-width: calc(100% - 32px); animation: bajar .2s ease-out;
}
.toast.error { background: var(--rojo); }
.cargando { padding: 60px 20px; display: flex; justify-content: center; }
.cargando i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--rosa-borde); border-top-color: var(--vino); animation: girar .8s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes bajar { from { transform: translate(-50%, -10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.aviso.recordar { width: calc(100% - 40px); border: none; text-align: left; background: #E7F4EC; color: #1F5C3B; cursor: pointer; }
.aviso.recordar .link { margin-left: auto; color: #1F7A4D; padding: 0; }

.credito { display: block; text-align: center; margin: 26px 20px 0; font-size: 12px; color: var(--suave); text-decoration: none; letter-spacing: .02em; }
.credito b { color: var(--texto); font-weight: 800; }
.credito b span { color: #A85308; }

/* calendario: modo, globos y mes */
.cal-modo { height: 34px; padding: 0 11px; font-size: 12px; gap: 5px; }
.globo {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #8E5BAE; color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; line-height: 18px; text-align: center;
}
.dia.sel .globo, .mes-dia.sel .globo { background: #fff; color: var(--vino); }
.mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 0 20px 12px; }
.mes-cab { text-align: center; font-size: 11px; font-weight: 700; color: var(--suave); padding-bottom: 2px; }
.mes-dia {
  position: relative; height: 50px; border: none; border-radius: 14px; background: var(--blanco);
  display: flex; align-items: center; justify-content: center;
}
.mes-dia b { font-size: 15px; font-weight: 700; }
.mes-dia.fuera { background: transparent; }
.mes-dia.fuera b { color: #A99BB5; font-weight: 600; }
.mes-dia.hoy::after { content: ''; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }
.mes-dia.sel { background: var(--vino); color: #fff; box-shadow: 0 6px 16px rgba(83, 45, 109, .28); }
.mes-dia.sel.hoy::after { background: #fff; }
.mes-dia .globo { top: 3px; right: 3px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; padding: 0 4px; }
.dia .globo { top: -6px; right: -5px; box-shadow: 0 0 0 2px var(--fondo); }
.dias { padding-top: 6px; }

/* ===================== Anastasia: piezas nuevas ===================== */
.marca { letter-spacing: .02em; }
.titulo { font-size: 28px; }
.txt-suave { color: var(--suave); font-size: 13.5px; line-height: 1.45; }
.txt-mini { font-size: 12px; color: var(--suave); text-align: center; line-height: 1.4; }
.txt-mini.izq { text-align: left; margin-top: -4px; }
.txt-ok { color: var(--verde); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.hoja > .txt-ok { justify-content: center; margin-top: -6px; }
.txt-error { color: var(--rojo); font-size: 12.5px; font-weight: 700; }
.txt-pend { color: var(--dorado); font-size: 11.5px; font-weight: 700; }
.dato-suave { font-size: 12px; color: var(--suave); font-weight: 600; }
.dato-dorado { font-size: 12.5px; font-weight: 700; color: var(--dorado); }
.dato { font-size: 12px; }
.dorado { color: var(--dorado); }
.campo.en-linea { flex-direction: row; align-items: center; gap: 10px; }
.campo.en-linea .input { flex: 1; }
.dia-ed.plano { box-shadow: none; padding: 0; background: transparent; }
.dia-ed.plano .cab b { font-size: 13.5px; flex: 0 0 auto; }
.form.apretado { gap: 10px; }
.chips.envolver { padding: 0; flex-wrap: wrap; overflow: visible; }
.link.centrado { align-self: center; }
.bloque { display: block; font-size: 12px; color: var(--suave); font-weight: 500; margin-top: 2px; }
.hora-libre { color: var(--suave); font-weight: 700 !important; }
.acciones.una { grid-template-columns: 1fr; }
.card-t { font-size: 13px; font-weight: 700; letter-spacing: .02em; }

.ico-c { width: 42px; height: 42px; border-radius: 14px; background: var(--rosa-claro); color: var(--vino); display: grid; place-items: center; flex-shrink: 0; }
.ico-c.verde { background: #E5F2EA; color: #1F7A4D; }
.ico-c.rojo { background: #F8E6EA; color: var(--rojo); }
.item.grande { padding: 14px; }
.item.grande .txt b { font-size: 15px; }
.item.hecho { opacity: .6; }
.item .der small { font-size: 11px; color: var(--suave); font-weight: 600; }

.btn-wa { background: #1F7A4D; box-shadow: 0 8px 20px rgba(31, 122, 77, .22); }
.btn-wa.sec { background: var(--blanco); color: #1F7A4D; border-color: #CBE5D5; box-shadow: none; }
.wa-vista { font-size: 13.5px; line-height: 1.45; background: #E7F4EC; box-shadow: none; }
.wa-vista small { font-weight: 800; color: var(--verde); display: block; margin-bottom: 4px; }
.aviso.recordar span { display: flex; flex-direction: column; }
.aviso.recordar small { font-weight: 500; font-size: 12px; }
.aviso.error { background: #F8E6EA; color: var(--rojo); }

/* ingreso */
.portada .seg { width: 100%; }
.yo-login { display: flex; align-items: center; gap: 12px; justify-content: center; }
.yo-login b { font-size: 18px; }
.quien .avatar-btn .n { font-size: 14px; color: var(--texto); }

/* comandas */
.item.cmd.abierta { box-shadow: 0 0 0 2px var(--vino), var(--sombra); }
.item.cmd.pagada .ico-c { background: #E5F2EA; color: var(--verde); }
.item.cmd.anulada { opacity: .7; }
.item.cmd.anulada .ico-c { background: #F8E6EA; color: var(--rojo); }
.item.cmd.anulada .der { text-decoration: line-through; color: var(--suave); }
.estado-cmd { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 6px 12px; flex-shrink: 0; }
.estado-cmd.abierta { background: var(--vino); color: #fff; }
.estado-cmd.pagada { background: #E5F2EA; color: var(--verde); }
.estado-cmd.anulada { background: #F8E6EA; color: var(--rojo); }
.top .titulos .titulo { font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-cmd {
  width: 100%; text-align: left; border: none; background: var(--blanco); border-radius: 20px; padding: 12px 14px; box-shadow: var(--sombra);
  display: flex; align-items: flex-start; gap: 12px;
}
.linea-cmd .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linea-cmd .txt b { font-size: 14.5px; }
.linea-cmd .txt small { font-size: 12px; color: var(--suave); }
.linea-cmd .der { font-size: 16px; font-weight: 800; color: var(--vino); padding-top: 2px; }
.linea-cmd .propina { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--dorado); background: var(--dorado-claro); border-radius: 999px; padding: 3px 9px; }
.linea-cmd .reparto { font-size: 11.5px; font-weight: 700; color: var(--vino); background: var(--rosa-claro); border-radius: 10px; padding: 5px 9px; margin-top: 2px; }

/* POS */
.pos-sub { margin-top: -8px; font-size: 13px; }
.pos-sub .link { padding: 0; font-size: 13px; }
.monto-usd .moneda { font-weight: 800; color: var(--vino); font-size: 15px; min-width: 22px; }
.input.ref { height: 40px; font-size: 13.5px; }
.pos-dif { font-size: 13.5px; font-weight: 700; color: var(--dorado); text-align: center; min-height: 20px; }
.pos-dif .ok { color: var(--verde); display: inline-flex; align-items: center; gap: 5px; }

/* pagos al equipo */
.cuenta-card { padding: 0; overflow: hidden; }
.cuenta-cab { width: 100%; border: none; background: none; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cuenta-cab .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cuenta-cab .txt b { font-size: 14.5px; }
.cuenta-cab .txt small { font-size: 12px; color: var(--suave); }
.cuenta-pie { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; background: var(--rosa-claro); }
.cuenta-pie > span:first-child { flex: 1; display: flex; flex-direction: column; }
.cuenta-pie small { font-size: 11.5px; color: var(--suave); font-weight: 600; }
.cuenta-pie b { font-family: var(--serif); font-size: 26px; color: var(--vino); line-height: 1.1; }
.cuenta-pie b.cero { color: var(--suave); }
.der-col { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.der-col small { font-size: 11px; color: var(--suave); }
.stats.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat.destacado { background: var(--vino); color: #fff; }
.stat.destacado small { color: #E3D3EE; }
.lineas div > span:first-child { min-width: 0; }

/* reportes */
.total-card .bs b { color: #fff; }
.por-trab { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
.linea-r .punto { width: 10px; height: 10px; }

/* trabajadora: reparto */
.reparto-vista { display: flex; height: 34px; border-radius: 12px; overflow: hidden; font-size: 12px; font-weight: 800; }
.reparto-vista span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; min-width: 0; }
.reparto-vista span:first-child { background: var(--lila); color: #fff; }
.reparto-vista span:last-child { background: var(--vino); color: #fff; }

.fila-tasa { display: flex; align-items: center; gap: 12px; }
.fila-tasa .ico-c { background: var(--dorado-claro); color: var(--dorado); }
.fila-tasa .txt { flex: 1; display: flex; flex-direction: column; }
.fila-tasa .txt small:first-child { font-size: 12px; font-weight: 700; color: var(--suave); }
.fila-tasa .txt b { font-size: 20px; }

/* PC: más aire para la recepción */
@media (min-width: 900px) {
  #app { max-width: 640px; box-shadow: 0 0 40px rgba(83, 45, 109, .08); }
  .nav { width: min(600px, calc(100% - 32px)); }
  .hoja { max-width: 600px; border-radius: 28px; margin-bottom: 24px; }
  .velo { align-items: center; }
}

.resumen-dia .monto { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.resumen-dia .monto small { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--suave); margin: 0 0 3px; }
@media (min-width: 900px) { .nav-fondo { left: 50%; right: auto; width: 640px; transform: translateX(-50%); } }

/* propinas en la caja */
.pos-propinas { background: var(--dorado-claro); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pp-cab { display: flex; align-items: center; gap: 8px; color: #5C3E17; }
.pp-cab b { font-size: 14px; }
.pp-cab small { margin-left: auto; font-size: 11.5px; font-weight: 600; }
.pp-fila { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.pp-fila > span:nth-child(2) { flex: 1; }
.pp-fila .moneda { color: var(--dorado); font-weight: 800; }
.pp-fila .input { width: 110px; flex: 0 0 110px; height: 42px; background: #fff; border-color: #EBD9BD; }
.avatar.mini { width: 32px; height: 32px; font-size: 14px; }
.pp-resumen { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #5C3E17; }

.pos-dif-c { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pos-dif-c .link[hidden] { display: none; }
.btn:disabled { opacity: .45; box-shadow: none; }
/* nombres largos no rompen las tarjetas */
.item .txt b, .cita .nom, .hoja h2, .top .titulo, .linea-cmd .txt b, .cuenta-cab .txt b, .lineas span { overflow-wrap: anywhere; }
.cita .l1 .nom { min-width: 0; }
.vacio .acciones { width: 100%; margin-top: 4px; }

/* clientas por cédula */
.ced-fila { display: flex; gap: 8px; align-items: center; }
.ced-fila .input { flex: 1; min-width: 0; font-size: 18px; letter-spacing: .04em; }
.seg.mini { flex: 0 0 auto; padding: 3px; }
.seg.mini button { padding: 8px 12px; min-width: 38px; }
.cl-elegida { display: flex; align-items: center; gap: 12px; }
.cl-elegida .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-elegida .txt b { font-size: 15px; }
.cl-elegida .txt small { font-size: 12.5px; color: var(--suave); }
.cl-nueva { display: flex; flex-direction: column; gap: 6px; background: var(--dorado-claro); box-shadow: none; }
.cl-nueva small { color: #5C3E17; font-size: 12.5px; }
/* disponibilidad al elegir quién hace el servicio */
.avatar-btn.ocupada { opacity: .45; }
.avatar-btn .m.aviso-m { color: var(--dorado); font-weight: 700; }
.input.ref.oblig::placeholder { color: var(--rojo); }
.mini-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--suave); margin-top: 4px; }
.mini-check input { width: 16px; height: 16px; accent-color: var(--vino); }
/* nombres largos: máximo 2 líneas con … */
.opcion b, .item .txt > b, .cita .nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* servicio terminado en la comanda (libera a la trabajadora) */
.linea-cmd[role="button"] { cursor: pointer; }
.chip-term { align-self: flex-start; margin-top: 4px; border: 1.5px solid var(--lila); background: var(--blanco); color: var(--vino); font: inherit; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chip-term:hover { background: var(--rosa-claro); }
.chip-term.hecho { border-color: transparent; background: #E4F3EA; color: #1F6B43; }
.linea-cmd.terminada { opacity: .85; }
.linea-cmd.terminada .txt b { color: var(--suave); }
/* monto que no se entiende en la caja */
.input.invalido { border-color: var(--rojo) !important; box-shadow: 0 0 0 3px #F8E6EA; }
.input.invalido + small, .monto-usd .input.invalido ~ small { color: var(--rojo); font-weight: 700; }
/* fecha escrita al lado del selector (no depende del idioma del navegador) */
.fecha-txt { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--vino); text-transform: none; letter-spacing: 0; }
.input-tasa { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
/* el botón de cobrar no se aplasta en pantallas bajas */
#pos-ok { min-height: 52px; flex-shrink: 0; }