/* Panel del consultorio: agenda en vivo, resumen, clientes y mensajes. */
.panel-pagina { background: var(--c-fondo); }
.panel { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }

/* ---------- Navegación ---------- */
.panel__nav { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.4rem 1rem; color: #fff; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c-acento) 30%, transparent), transparent 40%), linear-gradient(180deg, var(--c-primario), #240745); }
.panel__marca { display: flex; align-items: center; gap: .75rem; padding: 0 .4rem; }
.panel__logo { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 15px; background: #fff; flex: none; }
.panel__logo img { width: 1.8rem; height: auto; }
.panel__marca strong { display: block; font: 700 1.15rem var(--f-titulos); line-height: 1.1; }
.panel__marca small { color: rgb(255 255 255 / .65); font-size: .8rem; }
.panel__botones { display: grid; gap: .3rem; }
.nav-btn { position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 14px; background: none; color: rgb(255 255 255 / .75); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.nav-btn:hover { background: rgb(255 255 255 / .08); color: #fff; }
.nav-btn[aria-current="page"] { background: rgb(255 255 255 / .14); color: #fff; }
.nav-btn[aria-current="page"]::before { content: ""; position: absolute; left: -1rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-acento); }
.nav-btn__cuenta { margin-left: auto; min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px; background: #f2a93b; color: #2b1a00; font-size: .78rem; text-align: center; }
.i--atras { transform: scaleX(-1); }
.panel__pie { margin-top: auto; display: grid; gap: .8rem; }
.panel__pie p { padding: 0 .6rem; font-size: .8rem; color: rgb(255 255 255 / .6); line-height: 1.4; }
@media (max-width: 60rem) {
  .panel { grid-template-columns: minmax(0, 1fr); padding-bottom: 5.2rem; }
  .panel__nav { position: fixed; inset: auto 0 0 0; height: auto; z-index: 60; flex-direction: row; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -12px rgb(10 0 30 / .5); }
  .panel__marca, .panel__pie { display: none; }
  .panel__botones { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
  .nav-btn { flex-direction: column; gap: .15rem; padding: .5rem .2rem; font-size: .75rem; text-align: center; justify-content: center; }
  .nav-btn[aria-current="page"]::before { display: none; }
  .nav-btn__cuenta { position: absolute; top: .15rem; right: 18%; margin: 0; min-width: 1.2rem; font-size: .68rem; }
}

/* ---------- Estructura de vistas ---------- */
.panel__main { padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 3rem; min-width: 0; }
.vista { display: grid; gap: 1.25rem; animation: entra .45s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vista__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.vista__cab h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 720; line-height: 1.1; }
.vista__cab p { margin-top: .35rem; color: var(--c-texto-suave); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vista__acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.envivo { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .65rem .15rem .55rem; border-radius: 999px; background: var(--c-menta); color: var(--c-acento-texto); font-size: .82rem; font-weight: 650; }
.envivo i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-acento); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-acento) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }
.tarjeta-p { background: #fff; border-radius: var(--r-m); box-shadow: var(--sombra-0); border: 1px solid color-mix(in srgb, var(--c-primario) 7%, transparent); }

/* ---------- KPIs ---------- */
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.kpi { position: relative; display: grid; gap: .15rem; padding: 1rem 1.15rem; text-align: left; border: 1px solid color-mix(in srgb, var(--c-primario) 7%, transparent); border-radius: var(--r-m); background: #fff; box-shadow: var(--sombra-0); }
button.kpi { cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
button.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-1); }
.kpi__icono { position: absolute; right: .9rem; top: .9rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: var(--c-menta); color: var(--c-acento-texto); }
.kpi--ambar .kpi__icono { background: #fff1d6; color: #a86500; }
.kpi--lila .kpi__icono { background: #eee6fa; color: var(--c-primario-suave); }
.kpi__n { font: 750 2.3rem/1.05 var(--f-titulos); letter-spacing: -0.03em; }
.kpi__n small { font-size: 1.1rem; font-weight: 600; color: var(--c-texto-suave); }
.kpi__t { font-weight: 650; font-size: .95rem; }
.kpi__s { font-size: .82rem; color: var(--c-texto-suave); }
.kpi--alerta { border-color: #f2a93b; box-shadow: 0 0 0 4px #f2a93b26, var(--sombra-0); }
.barra { height: .45rem; border-radius: 9px; background: #eee6fa; overflow: hidden; margin-top: .45rem; }
.barra i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--c-acento), color-mix(in srgb, var(--c-acento) 60%, var(--c-primario-suave))); transition: width .9s var(--ease); }

/* ---------- Semana y filtros ---------- */
.semana { display: flex; align-items: center; gap: .5rem; padding: .6rem; }
.semana__flecha { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--c-fondo); cursor: pointer; flex: none; transition: background-color .2s; }
.semana__flecha:hover { background: #eee6fa; }
.semana__flecha--ant .i { transform: scaleX(-1); }
.semana__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; flex: 1; min-width: 0; }
.sdia { position: relative; display: grid; justify-items: center; gap: .05rem; padding: .5rem .2rem .6rem; border: 2px solid transparent; border-radius: 16px; background: none; cursor: pointer; transition: background-color .2s, transform .25s var(--ease); }
.sdia:hover { background: var(--c-fondo); transform: translateY(-2px); }
.sdia small { font-size: .74rem; color: var(--c-texto-suave); text-transform: capitalize; }
.sdia strong { font: 700 1.3rem/1.15 var(--f-titulos); }
.sdia em { display: flex; align-items: center; gap: .2rem; font-style: normal; font-size: .72rem; font-weight: 650; color: var(--c-acento-texto); min-height: 1em; }
.sdia em b { width: .45rem; height: .45rem; border-radius: 50%; background: #f2a93b; }
.sdia--hoy { border-color: color-mix(in srgb, var(--c-acento) 55%, transparent); }
.sdia[aria-pressed="true"] { background: var(--c-primario); color: #fff; box-shadow: 0 10px 20px -10px var(--c-primario); }
.sdia[aria-pressed="true"] small, .sdia[aria-pressed="true"] em { color: rgb(255 255 255 / .85); }
.sdia--cerrado { opacity: .5; }
.semana__hoy { flex: none; }
@media (max-width: 40rem) { .semana__hoy { display: none; } .sdia strong { font-size: 1.1rem; } .sdia__pal { display: none; } .semana { padding: .4rem; gap: .25rem; } .semana__flecha { width: 2rem; height: 2rem; } }
@media (max-width: 60rem) { .filtros { flex-direction: column; align-items: stretch; } .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; } .chip-f { flex: none; } .filtros__fin { margin-left: 0; justify-content: space-between; } }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-f { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 2px solid color-mix(in srgb, var(--c-primario) 12%, transparent); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.chip-f:hover { border-color: var(--c-primario); }
.chip-f[aria-pressed="true"] { background: var(--c-primario); border-color: var(--c-primario); color: #fff; }
.chip-f img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.chip-f small { opacity: .75; font-weight: 600; }
.filtros__fin { margin-left: auto; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.buscar { position: relative; }
.buscar .i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--c-texto-suave); width: 1.1rem; height: 1.1rem; }
.buscar input { width: min(100%, 13rem); min-height: 2.5rem; padding: .4rem .8rem .4rem 2.3rem; border: 2px solid color-mix(in srgb, var(--c-primario) 12%, transparent); border-radius: 999px; font: inherit; font-size: .92rem; background: #fff; }
.buscar input:focus-visible { outline: none; border-color: var(--c-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-acento) 28%, transparent); }
.segmento { display: inline-flex; padding: .2rem; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--c-primario) 12%, transparent); }
.segmento button { padding: .4rem .9rem; border: 0; border-radius: 999px; background: none; font-size: .88rem; font-weight: 650; color: var(--c-texto-suave); cursor: pointer; transition: background-color .2s, color .2s; }
.segmento button[aria-pressed="true"] { background: var(--c-primario); color: #fff; }

/* ---------- Línea de tiempo ---------- */
.linea { position: relative; overflow: hidden; }
.linea__cab, .linea__cuerpo { display: grid; grid-template-columns: 3.6rem repeat(var(--cols), minmax(0, 1fr)); }
.linea__cab { position: sticky; top: 0; z-index: 5; background: rgb(255 255 255 / .95); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--c-primario) 8%, transparent); }
.linea__prof { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border-left: 1px solid color-mix(in srgb, var(--c-primario) 8%, transparent); min-width: 0; }
.linea__prof img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.linea__prof strong { display: block; font: 700 1rem/1.2 var(--f-titulos); }
.linea__prof small { color: var(--c-texto-suave); font-size: .8rem; display: block; line-height: 1.3; }
.linea__cuerpo { position: relative; height: calc(var(--min) * var(--pm) * 1px); }
.linea__horas { position: relative; }
.linea__horas span { position: absolute; right: .55rem; transform: translateY(-.6em); font-size: .74rem; color: var(--c-texto-suave); font-weight: 600; }
.linea__col { position: relative; border-left: 1px solid color-mix(in srgb, var(--c-primario) 8%, transparent); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pm) * 60px - 1px), color-mix(in srgb, var(--c-primario) 8%, transparent) calc(var(--pm) * 60px - 1px), color-mix(in srgb, var(--c-primario) 8%, transparent) calc(var(--pm) * 60px)); cursor: copy; }
.linea__col:hover { background-color: color-mix(in srgb, var(--c-menta) 35%, transparent); }
.fantasma { position: absolute; left: .35rem; right: .35rem; height: calc(var(--pm) * 30px); border: 2px dashed var(--c-acento); border-radius: 12px; background: color-mix(in srgb, var(--c-acento) 14%, transparent); color: var(--c-acento-texto); font-size: .8rem; font-weight: 700; display: none; align-items: center; justify-content: center; gap: .3rem; pointer-events: none; }
.linea__col:hover .fantasma { display: flex; }
.bloque { position: absolute; left: .3rem; right: .3rem; display: flex; flex-direction: column; gap: .05rem; padding: .35rem .6rem; overflow: hidden; border: 0; border-left: 5px solid var(--b, #1DB89A); border-radius: 12px; background: var(--f, #dff5ef); color: var(--c-texto); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgb(36 17 58 / .08); transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .3s; font-size: .82rem; line-height: 1.25; z-index: 1; }
.bloque:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--sombra-1); z-index: 3; }
.bloque time { font-weight: 700; font-size: .78rem; color: var(--c-texto-suave); }
.bloque strong { font-weight: 700; font-size: .92rem; }
.bloque span { color: var(--c-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque--corto { flex-direction: row; align-items: center; gap: .5rem; }
.bloque--corto time { flex: none; }
.bloque--corto span { display: none; }
.bloque[data-estado="pendiente"] { --b: #f2a93b; --f: #fff3d9; }
.bloque[data-estado="confirmada"] { --b: #1db89a; --f: #dff5ef; }
.bloque[data-estado="reprogramada"] { --b: #4b2380; --f: #ece4f8; }
.bloque[data-estado="atendida"] { --b: #8b6fb8; --f: #efe9f7; }
.bloque[data-estado="cancelada"] { --b: #d9534f; --f: #fbe9e7; opacity: .55; }
.bloque[data-estado="cancelada"] strong { text-decoration: line-through; }
.bloque[data-estado="no_asistio"] { --b: #c2377a; --f: #fde2ec; }
.bloque[data-opaco] { opacity: .22; }
.bloque--bloqueo { --b: #7d7490; --f: repeating-linear-gradient(135deg, #efecf3 0 8px, #e4e0ec 8px 16px); cursor: pointer; }
.bloque--bloqueo strong { display: flex; align-items: center; gap: .35rem; }
.bloque--nueva { animation: nueva 1.6s var(--ease) 2; }
@keyframes nueva { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-acento) 45%, transparent); } }
.ahora { position: absolute; left: 3.6rem; right: 0; height: 0; border-top: 2px solid #e5484d; z-index: 4; pointer-events: none; }
.ahora::before { content: attr(data-hora); position: absolute; left: -3.6rem; top: -.8em; width: 3.4rem; padding: .05rem .25rem; border-radius: 6px; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.ahora::after { content: ""; position: absolute; left: -.3rem; top: -.38rem; width: .65rem; height: .65rem; border-radius: 50%; background: #e5484d; }
.vacio-p { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1.5rem; text-align: center; color: var(--c-texto-suave); }
.vacio-p .i { width: 2.4rem; height: 2.4rem; color: var(--c-acento-texto); }
.vacio-p strong { color: var(--c-texto); font: 700 1.2rem var(--f-titulos); }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .85rem 1rem; border-top: 1px solid color-mix(in srgb, var(--c-primario) 8%, transparent); font-size: .8rem; color: var(--c-texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda i { width: .7rem; height: .7rem; border-radius: 4px; background: var(--b); }

/* ---------- Lista ---------- */
.lista-p { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .lista-p--2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.lista-p__grupo { padding: 1rem; display: grid; gap: .7rem; }
.lista-p__grupo > header { display: flex; align-items: center; gap: .75rem; }
.lista-p__grupo > header img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.lista-p__grupo > header strong { font: 700 1.05rem var(--f-titulos); display: block; }
.lista-p__grupo > header small { color: var(--c-texto-suave); }
.cita-p { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .15rem .9rem; align-items: center; width: 100%; padding: .85rem 1rem; border: 0; border-left: 5px solid var(--b, #1db89a); border-radius: 16px; background: var(--f, #dff5ef); text-align: left; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.cita-p:hover { transform: translateY(-2px); box-shadow: var(--sombra-1); }
.cita-p time { font: 700 1.05rem/1.2 var(--f-titulos); white-space: nowrap; }
.cita-p time small { display: block; font: 500 .78rem var(--f-texto); color: var(--c-texto-suave); }
.cita-p strong { display: block; }
.cita-p span { color: var(--c-texto-suave); font-size: .9rem; display: block; }
.cita-p[data-estado="pendiente"] { --b: #f2a93b; --f: #fff3d9; }
.cita-p[data-estado="confirmada"] { --b: #1db89a; --f: #dff5ef; }
.cita-p[data-estado="atendida"] { --b: #8b6fb8; --f: #efe9f7; }
.cita-p[data-estado="cancelada"] { --b: #d9534f; --f: #fbe9e7; opacity: .6; }
.cita-p[data-estado="no_asistio"] { --b: #c2377a; --f: #fde2ec; }
.cita-p[data-estado="reprogramada"] { --b: #4b2380; --f: #ece4f8; }
.cita-p--bloqueo { --b: #7d7490; --f: repeating-linear-gradient(135deg, #efecf3 0 8px, #e4e0ec 8px 16px); }

/* ---------- Estados, insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--f, #dff5ef); color: var(--t, #0b6b58); }
.insignia[data-estado="pendiente"] { --f: #ffe9b8; --t: #7a4a00; }
.insignia[data-estado="confirmada"] { --f: #cdf0e6; --t: #0b6b58; }
.insignia[data-estado="atendida"] { --f: #e4dbf3; --t: #4b2380; }
.insignia[data-estado="cancelada"] { --f: #fbd5d1; --t: #8f2a26; }
.insignia[data-estado="no_asistio"] { --f: #fbcfe0; --t: #8e1f55; }
.insignia[data-estado="reprogramada"] { --f: #e4dbf3; --t: #4b2380; }
.insignia--manual { --f: #e9e6ef; --t: #4a3d63; }

/* ---------- Cajón de detalle ---------- */
.cajon__velo { position: fixed; inset: 0; z-index: 70; background: rgb(20 5 40 / .45); backdrop-filter: blur(3px); animation: velo .3s; }
@keyframes velo { from { opacity: 0; } }
.cajon { position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(100%, 27rem); display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 60px -20px rgb(10 0 30 / .5); animation: cajon .4s var(--ease); overflow-y: auto; }
@keyframes cajon { from { transform: translateX(100%); } }
@media (max-width: 40rem) { .cajon { top: auto; width: 100%; max-height: 88vh; border-radius: 26px 26px 0 0; animation-name: cajonM; } @keyframes cajonM { from { transform: translateY(100%); } } }
.cajon__cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; background: #fff; border-bottom: 1px solid color-mix(in srgb, var(--c-primario) 8%, transparent); }
.cajon__cab h2 { font-size: 1.6rem; font-weight: 720; margin: .4rem 0 .1rem; }
.cajon__cab small { color: var(--c-texto-suave); }
.cerrar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--c-fondo); cursor: pointer; flex: none; transition: background-color .2s; }
.cerrar:hover { background: #eee6fa; }
.cajon__cuerpo { display: grid; gap: 1.4rem; padding: 1.25rem; }
.datos { margin: 0; display: grid; }
.datos div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--c-primario) 7%, transparent); }
.datos dt { color: var(--c-texto-suave); font-size: .92rem; }
.datos dd { margin: 0; font-weight: 650; text-align: right; display: flex; align-items: center; gap: .5rem; }
.datos dd img { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.pasos-e { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
.pasos-e li { flex: 1; display: grid; justify-items: center; gap: .3rem; position: relative; font-size: .8rem; font-weight: 600; color: var(--c-texto-suave); text-align: center; }
.pasos-e li::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #eee6fa; border: 2px solid #eee6fa; z-index: 1; }
.pasos-e li:not(:first-child)::after { content: ""; position: absolute; top: .7rem; right: 50%; width: 100%; height: 2px; background: #eee6fa; }
.pasos-e li.hecho { color: var(--c-texto); }
.pasos-e li.hecho::before { background: var(--c-acento); border-color: var(--c-acento); }
.pasos-e li.hecho::after { background: var(--c-acento); }
.pasos-e li.mal::before { background: #d9534f; border-color: #d9534f; }
.pasos-e li.mal::after { background: #d9534f; }
.acciones-c { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn--peligro { background: transparent; border-color: #d9534f; color: #b3322e; }
.btn--peligro:hover { background: #d9534f; color: #fff; }
.mensaje-sec h3 { font-size: 1.05rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.pestanas-m { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.burbuja { position: relative; padding: .85rem 1rem; border-radius: 4px 18px 18px 18px; background: #d9fdd3; color: #14301a; font-size: .95rem; line-height: 1.5; box-shadow: 0 1px 1px rgb(0 0 0 / .08); white-space: pre-wrap; }
.burbuja mark { background: rgb(255 255 255 / .6); border-radius: 5px; padding: 0 .12rem; font-weight: 650; color: inherit; }
.burbuja-fondo { padding: 1rem; border-radius: 18px; background: #efeae2; }
.acciones-m { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* ---------- Modales ---------- */
.modal { width: min(100% - 1.5rem, 30rem); padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--c-texto); box-shadow: 0 40px 80px -20px rgb(10 0 30 / .6); max-height: 92vh; }
.modal::backdrop { background: rgb(20 5 40 / .55); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.modal form, .modal > div { display: grid; gap: 1rem; padding: 1.4rem; }
.modal h2 { font-size: 1.5rem; font-weight: 720; }
.modal__sub { color: var(--c-texto-suave); margin-top: -.5rem; }
.campo-p { display: grid; gap: .3rem; }
.campo-p label, .campo-p legend { font-weight: 650; font-size: .92rem; padding: 0; }
.campo-p input, .campo-p select { width: 100%; min-height: 3rem; padding: .5rem .85rem; border: 2px solid color-mix(in srgb, var(--c-primario) 18%, transparent); border-radius: 14px; background: #fff; font: inherit; color: inherit; }
.campo-p input:focus-visible, .campo-p select:focus-visible { outline: none; border-color: var(--c-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-acento) 28%, transparent); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.modal__error { min-height: 1.3em; color: #a8261c; font-weight: 600; font-size: .92rem; }
.modal__fin { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
fieldset.campo-p { border: 0; padding: 0; margin: 0; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; z-index: 90; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .6rem; justify-items: end; pointer-events: none; }
@media (max-width: 60rem) { .toasts { left: .75rem; right: .75rem; bottom: 5.8rem; justify-items: stretch; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .75rem; max-width: 26rem; padding: .8rem 1rem; border-radius: 18px; background: var(--c-texto); color: #fff; box-shadow: 0 20px 40px -14px rgb(10 0 30 / .6); animation: pop .4s var(--ease); }
.toast__i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: var(--c-acento); color: #052e27; flex: none; }
.toast--error .toast__i { background: #f08a86; }
.toast strong { display: block; line-height: 1.25; }
.toast span { font-size: .88rem; color: rgb(255 255 255 / .75); }
.toast button { margin-left: .4rem; padding: .35rem .8rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / .16); color: #fff; font-weight: 650; cursor: pointer; }
.toast button:hover { background: rgb(255 255 255 / .28); }
.toast.sale { animation: sale .35s var(--ease) forwards; }
@keyframes sale { to { opacity: 0; transform: translateY(10px); } }

/* ---------- Resumen ---------- */
.grafica { padding: 1.25rem; display: grid; gap: 1rem; }
.grafica h2, .tarjeta-p h2 { font-size: 1.2rem; font-weight: 700; }
.columnas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; align-items: end; height: 14rem; padding-top: 1rem; }
.col-g { display: grid; grid-template-rows: 1fr auto; gap: .45rem; height: 100%; justify-items: center; min-width: 0; }
.col-g__pila { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: min(100%, 2.6rem); height: 100%; align-self: end; gap: 2px; }
.col-g__pila i { display: block; width: 100%; height: 0; border-radius: 6px; background: var(--c); transition: height .8s var(--ease); }
.col-g__pila i:last-child { border-radius: 8px 8px 6px 6px; }
.col-g small { font-size: .74rem; color: var(--c-texto-suave); text-align: center; line-height: 1.15; }
.col-g--hoy small { color: var(--c-acento-texto); font-weight: 700; }
.col-g__n { font-weight: 700; font-size: .8rem; }
.dos-col { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) { .dos-col { grid-template-columns: 1.1fr .9fr; } }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.ranking li { display: grid; gap: .3rem; }
.ranking li div { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.ranking li span { color: var(--c-texto-suave); font-weight: 650; }
.anillos { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-around; }
.anillo { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.anillo__aro { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: conic-gradient(var(--c-acento) calc(var(--p) * 1%), #eee6fa 0); transition: --p 1s; }
.anillo__aro::before { content: ""; position: absolute; inset: .7rem; border-radius: 50%; background: #fff; }
.anillo__aro b { position: relative; font: 750 1.7rem var(--f-titulos); }
.anillo strong { display: block; line-height: 1.2; }
.anillo small { color: var(--c-texto-suave); }
.idea { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--r-m); background: linear-gradient(120deg, var(--c-menta), #fff); border: 1px solid color-mix(in srgb, var(--c-acento) 25%, transparent); }
.idea .i { color: var(--c-acento-texto); margin-top: .15rem; }

/* ---------- Clientes ---------- */
.heroc { display: grid; gap: .5rem; padding: 1.5rem; border-radius: var(--r-l); color: #fff; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c-estetica) 40%, transparent), transparent 50%), linear-gradient(130deg, var(--c-primario), var(--c-primario-suave)); box-shadow: var(--sombra-2); }
.heroc h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 720; max-width: 30rem; text-wrap: balance; }
.heroc p { color: rgb(255 255 255 / .8); max-width: 34rem; }
.clientes { display: grid; gap: .7rem; }
.cliente { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; }
.cliente__av { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--c-rosa); color: var(--c-primario); font: 700 1.1rem var(--f-titulos); }
.cliente--ok .cliente__av { background: var(--c-menta); }
.cliente strong { display: block; }
.cliente small { color: var(--c-texto-suave); }
.cliente__tiempo { display: block; font-size: .85rem; color: var(--c-texto-suave); }
@media (max-width: 40rem) { .cliente { grid-template-columns: auto minmax(0, 1fr); } .cliente .btn { grid-column: 1 / -1; } }

/* ---------- Mensajes automáticos ---------- */
.mensajes-g { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .mensajes-g { grid-template-columns: 1fr 1fr; } }
.msg { padding: 1.15rem; display: grid; gap: .8rem; align-content: start; }
.msg header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.msg h2 { font-size: 1.15rem; }
.msg small { color: var(--c-texto-suave); }
.interruptor { position: relative; width: 3.1rem; height: 1.8rem; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; z-index: 1; }
.interruptor i { position: absolute; inset: 0; border-radius: 999px; background: #d7cfe3; transition: background-color .3s; }
.interruptor i::after { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .25); transition: transform .3s var(--ease); }
.interruptor input:checked + i { background: var(--c-acento); }
.interruptor input:checked + i::after { transform: translateX(1.3rem); }
.interruptor input:focus-visible + i { outline: 3px solid var(--c-acento); outline-offset: 2px; }
.nota-p { font-size: .88rem; color: var(--c-texto-suave); display: flex; gap: .5rem; align-items: flex-start; }
.nota-p .i { margin-top: .1rem; color: var(--c-acento-texto); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Inicio de sesión ---------- */
.entrar-pagina { background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--c-primario-suave) 80%, #000) 0%, var(--c-primario) 55%, #1d0538 100%); min-height: 100vh; }
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.entrar__caja { width: min(100%, 26rem); display: grid; gap: 1rem; padding: 2rem 1.6rem; background: #fff; border-radius: var(--r-l); box-shadow: var(--sombra-2); }
.entrar__logo { margin: 0 auto; width: 3.5rem; height: auto; }
.entrar__caja h1 { font-size: 1.5rem; text-align: center; line-height: 1.15; }
.entrar__sub { text-align: center; color: var(--c-texto-suave); margin-top: -.5rem; }
.entrar__error { padding: .7rem .9rem; border-radius: 12px; background: #fdecec; color: #8a1f1f; font-weight: 600; font-size: .95rem; }
.entrar__volver { text-align: center; color: var(--c-texto-suave); font-size: .95rem; text-underline-offset: 3px; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.panel__pie form { margin: 0; }
.panel__pie form .nav-btn { width: 100%; }

.salir-movil { display: none; }
@media (max-width: 60rem) {
  .salir-movil { display: block; position: fixed; top: .6rem; right: .6rem; z-index: 55; margin: 0; }
  .salir-movil button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .8rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / .92); box-shadow: var(--sombra-0); font-weight: 650; font-size: .85rem; color: var(--c-primario); cursor: pointer; }
}