/* =========================================================
   SNIPEX · lo que el servidor añade al diseño
   ui.css y admin.css son los del mockup (Snipex_web/v2). Aquí va solo lo que el
   mockup no tenía porque no lo necesitaba: un menú con sesión real, paginación de
   servidor y el vestido provisional de las pantallas que aún no se han maquetado.
   ========================================================= */

/* ---- armazón del panel (en el mockup iba suelto en cada página) ---- */
.side .brand a{padding:0; border:0}
.side .brand a:hover{background:none}
/* el logo, todo lo grande que cabe sin ensanchar la barra */
.side .brand{padding:4px 6px 20px}
.side .brand img{width:100%; max-width:176px; height:auto; display:block}
.topbar .side-btn{display:none}
@media (max-width:1040px){ .topbar .side-btn{display:inline-flex} }
/* una etiqueta («3 en curso», «2 sin hacer») no se parte en dos líneas */
.side a .tag{flex-shrink:0; white-space:nowrap}

/* ---- los dos espacios del administrador: «Mi espacio» | «Administración», cada uno con su menú ---- */
.espacios{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3px; padding:3px; margin:0 0 4px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:rgba(8,9,12,.5)}
.side .espacios a{justify-content:center; padding:8px 4px; font-size:.74rem; font-weight:600; letter-spacing:0;
  color:var(--text-faint); border-radius:calc(var(--r-sm) - 3px); white-space:nowrap; text-align:center}
.side .espacios a[aria-current="true"]{background:var(--bg-hover); color:var(--text); border-color:var(--border)}
.side .espacios a[aria-current="true"]:last-child{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-ring)}
.side-menu{display:flex; flex-direction:column}
.side-menu[hidden]{display:none}
/* el menú de Administración es largo: sus grupos van algo más juntos para que quepa sin desplazar */
.side-menu[data-espacio="admin"] .side-sec{padding-top:13px}
.side-menu[data-espacio="admin"] .side-sec:first-child{padding-top:10px}
.side-menu[data-espacio="admin"] a{padding-top:8px; padding-bottom:8px}
.side-menu[data-espacio="admin"] .side-sec{color:var(--accent); opacity:.85}
.side .side-django{margin-top:6px}

/* ---- bloque del usuario: quién es, cómo está su pase y la puerta de salida ---- */
.side-user .nm{flex:1}
.side-user .av{font-size:.68rem; color:var(--on-accent)}
.side-user .rol-admin{color:var(--accent)}
.side-user .sin-pase{color:var(--amber)}
.side-user .salir{flex-shrink:0; display:flex}
.side-user .salir .btn{padding:7px 9px}
.side-user .salir .btn:hover{color:var(--red); background:var(--red-soft)}

/* ---- cabecera mínima de las páginas sin sesión (aún no hay landing a la que enlazar) ---- */
.nav-min .nav-actions .btn-ghost{display:inline-flex}
.nav-min .nav-actions .btn-ghost[aria-current="page"]{color:var(--accent)}
.pub{padding:34px 0 70px}
/* en un móvil estrecho, logo y tres botones no caben a su tamaño: se aprietan en vez de desbordar */
@media (max-width:480px){
  .nav-min .shell{gap:10px}
  .nav-min .brand img{height:24px}
  .nav-min .nav-actions{gap:6px}
  .nav-min .nav-actions .btn-sm{padding:7px 10px}
}

/* ---- paginación ---- */
.pag{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pag-n{display:flex; align-items:center; gap:10px}
.pag-de{font-size:.78rem; color:var(--text-faint); white-space:nowrap}
.box .pag{padding:14px 18px; border-top:1px solid var(--border-soft)}
@media (max-width:560px){ .pag{justify-content:center} .pag .cuenta-res{width:100%; text-align:center} }

/* =========================================================
   ACCESO · entrar, registrarse y recuperar
   (en el mockup estos estilos iban sueltos en cada página)
   ========================================================= */
.brand-auth{display:block; margin-bottom:30px}
.brand-auth img{height:75px; width:auto; display:block}
.lead-acceso{margin:12px 0 30px; font-size:.95rem}
.titulo-acceso{margin-bottom:28px}
.titulo-enviado{margin:20px 0 0}
.chip-acceso{margin-bottom:18px}
.field > label .hint{transition:color .22s, font-weight .22s}
.field > label a.hint:hover{color:var(--accent)}
/* al fallar las credenciales, el camino de salida se señala solo */
.field > label a.hint.destaca{color:var(--accent); font-weight:600}
.auth-alt{text-align:center; font-size:.86rem; color:var(--text-faint); margin:22px 0 0}
.auth-alt a{color:var(--accent); font-weight:600}
.divider + .auth-alt{margin-top:0}
.hint-sub{font-size:.79rem; text-align:center; margin:14px 0 0; color:var(--text-faint)}
.inp[data-v="codigo"]{font-family:var(--mono); font-size:1.35rem; font-weight:600; letter-spacing:.38em; text-align:center; padding-left:42px}
.inp[data-v="codigo"]::placeholder{letter-spacing:.38em; opacity:.35}
.hint-sub a{color:var(--accent)}
.check-acceso{margin:4px 0 24px}
.btn-entrar{margin-top:26px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:480px){.row2{grid-template-columns:1fr; gap:0}}
/* min-height para que la etiqueta de fuerza no empuje el formulario al aparecer */
.meter-lbl{display:block; font-size:.68rem; margin-top:6px; min-height:1.1em; letter-spacing:.04em}
.campo-check{margin:18px 0 0}
.btn-enviar{margin-top:22px}
.err-form{margin:16px 0 0}
.reenvio{margin-top:20px}
.otro-correo{margin-top:8px}
.trampa{position:absolute; left:-9999px}
/* con poca altura los avisos caen justo encima del botón de envío */
@media (max-height:700px){.auth ~ .toasts{bottom:auto; top:18px}}

.sent-ic{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-ring); color:var(--accent);
  box-shadow:0 0 0 5px var(--accent-soft);
}
.sent-ic.sent-mal{background:rgba(240,136,62,.1); border-color:rgba(240,136,62,.3); color:var(--amber); box-shadow:0 0 0 5px rgba(240,136,62,.08)}
.sent-tips{padding:4px 0; margin-top:4px}
.sent-tips div{
  display:flex; gap:11px; align-items:flex-start; padding:11px 15px;
  font-size:.82rem; color:var(--text-dim); line-height:1.5; border-top:1px solid var(--border-soft);
}
.sent-tips div:first-child{border-top:0}
.sent-tips .n{color:var(--text-faint); font-size:.62rem; padding-top:3px; flex-shrink:0}
.sent-tips b{color:var(--text); font-weight:600}
.eco{color:var(--text); font-weight:500; overflow-wrap:anywhere}

/* ---- un campo con error: lo marca el servidor al volver y acceso.js al validar ---- */
.field.con-error .inp{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.campo-check.con-error .check input{border-color:var(--red)}

/* ---- textos legales ---- */
.legal{display:grid; gap:14px; max-width:760px}
.legal h1{margin:6px 0 4px}
.legal h2{font-size:1.02rem; margin-top:12px}
.legal p{margin:0; font-size:.92rem; line-height:1.7; color:var(--text-dim)}
.legal .alerta .ai{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid currentColor; font-family:var(--mono); font-weight:700; font-size:.8rem}

/* =========================================================
   MI CUENTA
   ========================================================= */
.sec-cab{margin-bottom:14px}
/* la extensión solo pide dos vinculaciones */
.pasos3.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){ .pasos3.dos{grid-template-columns:minmax(0,1fr)} }
.paso .acc form{display:flex}
.paso .dato-falta{justify-content:space-between}
.paso .descarga{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.paso .descarga .btn{gap:8px}
.paso .descarga-info{font-size:.78rem; color:var(--text-faint)}
.paso .descarga-info a{color:var(--accent)}
.paso .descarga-huella{flex-basis:100%; font-size:.72rem; color:var(--text-faint); min-width:0}
.paso .descarga-huella code{font-family:var(--mono, ui-monospace, Consolas, monospace); word-break:break-all; color:var(--text-dim)}
.guia-instalar{border:1px solid var(--border-soft); border-radius:var(--r-sm); background:var(--bg-deep); padding:0}
.guia-instalar > summary{display:flex; align-items:center; gap:8px; cursor:pointer; padding:10px 12px; font-size:.82rem; font-weight:600; color:var(--text); list-style:none}
.guia-instalar > summary::-webkit-details-marker{display:none}
.guia-instalar > summary svg{color:var(--accent); flex-shrink:0}
.guia-pasos{margin:0; padding:2px 14px 4px 34px; display:flex; flex-direction:column; gap:9px; font-size:.8rem; line-height:1.5; color:var(--text-dim)}
.guia-pasos b{color:var(--text)}
.guia-nota{margin:0; padding:10px 14px 12px; border-top:1px solid var(--border-soft); font-size:.76rem; line-height:1.5; color:var(--text-faint)}
.guia-nota b{color:var(--text-dim)}
.btn-listo{margin-top:14px}
.pase-barra{margin-top:14px}
.caja-acc{margin-top:16px}
.caja-intro{margin:0 0 14px}
.caja-intro b{color:var(--text-dim)}
.empty-acc{margin-top:14px}
.rotulo{font-family:var(--mono); font-size:.57rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:9px}
.cifra{font-family:var(--display); font-weight:700; font-size:1.5rem; margin-bottom:8px}
.nota-sec b{color:var(--text-dim)}
.equipo .t b .chip,.equipo .t b .badge{font-weight:400}

/* ---- diálogos con formulario ---- */
.modal{max-height:calc(100svh - 40px); overflow-y:auto}
.modal-campos{margin-top:18px}
.campo-codigo{margin:18px 0 12px}
/* `.modal p` es más específico que `.err-msg`: sin esto el error saldría gris y pegado al campo */
.modal p.err-msg{margin-top:7px; font-size:.75rem; color:var(--red)}
.field.con-error .codigo{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.modal-borrar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft)}

/* =========================================================
   TU ACTIVIDAD · Resumen, Tandas y Cartas
   ========================================================= */
/* una pastilla de filtro puede ser un enlace: la elegida va marcada con aria-current */
.filtros a.pill{display:inline-flex; align-items:center}
.filtros .pill[aria-current="true"]{border-color:var(--accent-ring); background:var(--accent-soft); color:var(--accent)}
.filtros .pill-aparte{margin-left:8px; border-style:dashed}
.filtros-rango{margin-bottom:14px}
.nota-caja{font-size:.78rem}
.kpi .v.hero{font-size:2.15rem}
.kpi .v em.de{color:var(--text-faint)}
.ver-todas{font-size:.78rem; color:var(--accent); font-weight:600}
.ver-todas:hover{text-decoration:underline}
.tbl .cuando a{color:inherit}
.tbl .cuando a:hover b{color:var(--accent)}
.tbl tbody tr[data-detalle]{cursor:pointer}
.tbl .media{font-size:.72rem}
/* la tarjeta del muro, con enlace */
.gate-card .luego a{color:var(--accent)}
@media (max-width:620px){ .topbar .sp .chip,.topbar .sp .btn{display:none} }

.nota-app{
  display:flex; align-items:center; gap:12px; padding:11px 14px 11px 16px; border-radius:var(--r);
  border:1px solid var(--border-soft); background:rgba(26,30,38,.55);
}
.nota-app .ni{color:var(--accent); display:flex; flex-shrink:0}
.nota-app p{margin:0; font-size:.83rem; color:var(--text-dim); line-height:1.5}
.nota-app p b{color:var(--text); font-weight:600}
.nota-app .btn{margin-left:auto; flex-shrink:0}
@media (max-width:620px){ .nota-app{flex-wrap:wrap} .nota-app .btn{margin-left:30px} }

/* ---- detalle de una tanda o de un error: en el cajón y en su página ---- */
.drawer-cab{display:flex; align-items:center; gap:12px; min-width:0; flex:1}
.drawer-cab h3{overflow-wrap:anywhere}
.drawer-x{flex-shrink:0}
.sk-detalle{height:120px}
.det{display:grid; gap:20px}
.det-cab{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.det-cab h3{font-size:1.1rem}
.det-pagina{max-width:860px}
.det .rl,.drawer-b .rl{font-size:.85rem; color:var(--text-dim); line-height:1.6; padding:8px 0 0}
.det .rl-error,.drawer-b .rl-error{color:var(--red); border:0}
.migas h1{font-size:1.04rem}

/* =========================================================
   SOPORTE · tickets (lo del chat viene de admin.css; aquí, lo de montarlo en el servidor)
   ========================================================= */
/* dentro del panel el bloque llena el alto que queda; en la página pública tiene el suyo */
.tk{height:calc(100svh - 64px - 2 * clamp(18px,2.6vw,30px))}
.tk-publico{height:min(720px,calc(100svh - var(--nav-h) - 150px)); min-height:560px}
.tk a.tk-it{color:inherit}
.tk-lista-h .filtros{gap:6px}
.tk-vacio .btn{margin-top:4px}
.tk-cab a.tk-volver{color:var(--text-dim)}
.tk-form .err-msg,.tk-comp .err-msg{margin:0}
.tk-form .field{margin-bottom:14px}
/* ficha del cliente: cambios de equipo y avisos de suspensión */
.nota-eq{margin:0 0 14px; font-size:.82rem; line-height:1.55; color:var(--text-dim)}
.acc-eq{margin:14px 0 4px}
.box-b h4.mini{margin:20px 0 6px; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
.aviso-suspension .mot{color:var(--text)}
.aviso-suspension p + p{margin-top:4px}
/* en escritorio el formulario del ticket nuevo se desplaza dentro de la tarjeta: la fila de botones se queda pegada abajo y
   «Abrir el ticket» se ve siempre, sea cual sea el alto de la ventana (en móvil/tableta la página entera se desplaza) */
@media (min-width:901px){
  .tk-form .pie{position:sticky; bottom:0; z-index:2; margin:8px -22px -22px; padding:14px 22px; background:var(--bg-card); border-top:1px solid var(--border-soft)}
  /* En la web pública, sobre el formulario hay una cabecera y la tarjeta de alto fijo no cabe en la ventana: aquí la tarjeta
     crece con el formulario (sin scroll interno), la lista de tickets se acota y la fila de botones se pega al borde de la
     ventana mientras el formulario siga a la vista. `overflow:clip` recorta las esquinas sin romper el `sticky`. */
  .tk-publico[data-vista="nuevo"]{height:auto; overflow:clip}
  .tk-publico[data-vista="nuevo"] .tk-form{overflow:visible}
  .tk-publico[data-vista="nuevo"] .tk-items{max-height:420px}
}
/* el campo de ficheros del navegador, para quien no tiene JavaScript (tickets.js lo cambia por un botón) */
.tk input[type="file"]{font-size:.78rem; color:var(--text-dim); max-width:100%}
.tk-suelta .tk-adjs{width:100%; margin-top:0}
.tk-suelta .tk-adjs:empty,.tk-adjunta .tk-adjs:empty{display:none}
.tk-adjunta{display:grid; gap:10px}
.tk-adjunta .tk-adjs{margin-top:0}
.tk-enlace .url .inp{min-width:0}

.sop-cab{max-width:720px; margin-bottom:26px}
.sop-cab h1{margin-top:14px}
.sop-cab .lead{margin:12px 0 0}
.sop-info{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px}
.sop-info > div{display:flex; gap:12px; padding:15px 17px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-card)}
.sop-info .n{width:26px; height:26px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--accent); border:1px solid var(--accent-ring); background:var(--accent-soft)}
.sop-info b{display:block; font-size:.9rem; margin-bottom:3px}
.sop-info span{font-size:.8rem; color:var(--text-dim); line-height:1.5}
.sop-ya{margin-top:16px; font-size:.82rem; color:var(--text-faint)}
.sop-ya a{color:var(--accent); font-weight:600}
@media (max-width:900px){
  .sop-info{grid-template-columns:minmax(0,1fr)}
  /* en móvil la página entera se desplaza: el chat deja de tener un alto fijo */
  .tk,.tk-publico{height:auto; min-height:0}
}

/* =========================================================
   ADMINISTRACIÓN
   ========================================================= */
.col-filtros{gap:14px}
.paneles{gap:0}
/* una cabecera que ordena es un enlace: conserva el aspecto de cabecera */
.tbl th.ord a{color:inherit; display:inline-block}
.tbl th.ord a:hover{color:var(--text-dim)}
a.badge:hover{filter:brightness(1.2)}
.ficha .acc form{display:flex}
.vacio-corto{padding:22px 10px}
.rotulo-sec{margin:18px 0 4px}
.ref-pago{font-size:.74rem}
.equipo form.acc{margin:0}

/* ---- tandas y errores de todos ---- */
.kpi .v.v-texto{font-family:var(--mono); font-size:1.05rem; letter-spacing:0; line-height:1.3; overflow-wrap:anywhere}
/* los tipos que más se repiten son enlaces (filtran en el servidor) */
.frecuentes a{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-deep); font-family:var(--mono); font-size:.7rem; color:var(--text-dim); transition:.25s var(--out)}
.frecuentes a:hover{border-color:var(--border-hover); color:var(--text)}
.frecuentes a[aria-current="true"]{border-color:var(--accent-ring); background:var(--accent-soft); color:var(--accent)}
.frecuentes a em{font-style:normal; color:var(--text-faint)}
/* el detalle, también fuera del cajón (en su página) */
.det .usr{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--border); background:var(--bg-card); transition:border-color .25s}
.det .usr:hover{border-color:var(--accent-ring)}
.det .usr .go{margin-left:auto; color:var(--accent); font-size:.78rem; font-weight:600; white-space:nowrap}
.det > *,.det pre.code{min-width:0; max-width:100%}
.dsec .usr + .usr{margin-top:8px}
.det-tipo{font-size:.9rem; word-break:break-all}
.det-url{font-size:.7rem; word-break:break-all}
.rl-mensaje{color:var(--text) !important; white-space:pre-wrap; overflow-wrap:anywhere}
.det-pie{display:flex; gap:9px; flex-wrap:wrap}
.det-pie form{display:flex}
.crudo summary{cursor:pointer; list-style-position:inside}
.crudo[open] summary{margin-bottom:10px}
.crudo .code-h{margin-top:10px}
.shot img{display:block; width:100%; height:auto}


/* ---- tickets del administrador ---- */
.tk-box{display:flex; flex-direction:column}
.tk-box .tk-cab h2{font-size:1.05rem}
/* el campo «nota interna» lo maneja el selector de modo (tickets.js): la casilla no se ve */
.tk-comp .interno{position:absolute; opacity:0; pointer-events:none}
.tk-gest .sel{appearance:none; width:100%; border-radius:var(--r); padding:10px 34px 10px 13px; font-size:.86rem; color:var(--text); border:1px solid var(--border); background:var(--bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239099a8' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center}
.tk-gest .sel option{background:var(--bg-card)}
.tk-quien .rv-row b{text-align:right}
.tbl .tk-asunto .tk-nuevo-punto{color:var(--accent); font-style:normal; font-family:inherit; font-size:.7rem; margin-right:5px}
.tk-comp .tk-modo{justify-self:start}
.tk-anon .t b{white-space:normal}
.av-anon{background:var(--bg-hover); border:1px dashed var(--border-hover); color:var(--text-dim)}
.tk-enlace-admin{display:flex; gap:8px; align-items:center}
.tk-enlace-admin .inp{min-width:0; font-size:.74rem; padding:9px 12px}

/* ---- administración: visión general ---- */
.alertas{gap:12px}
.charts.una{grid-template-columns:minmax(0,1fr)}
.kpi .d a{color:inherit}
.kpi .d a:hover{color:var(--accent)}
.kpi .d a.warn{color:var(--amber)}
.vivo a.it{transition:background .22s}
.vivo a.it:hover{background:var(--bg-hover)}
.atn a .go{color:var(--text-faint); flex-shrink:0}

/* ---- administración: plataforma ---- */
.tabs [role="tab"] em.neg{color:var(--red)}
.ver-cab{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.ver-chips{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.ver .t .ver-chips span{display:inline-flex; margin-top:0}
.ver .t .meta a{color:var(--accent)}
.ver-sueltas{margin:0; padding:13px 18px; border-top:1px solid var(--border-soft)}
button.switch{padding:0; font:inherit}
.oblig{cursor:pointer}
.reloj p b{color:var(--text)}
.reloj .gr{white-space:nowrap}
.nota-sec b{color:var(--text-dim)}
.kv .huella{font-size:.76rem}
.tbl .msg.msg-largo{max-width:480px; white-space:normal}
.lista-simple.servicios{padding:4px 18px}
.lista-simple .sv-n{display:flex; align-items:center; gap:10px}
.lista-simple .sv-d{text-align:right}
.lista-simple .sv-d .mono{display:block; font-size:.68rem}
.lista-simple .dot.warn{background:var(--amber); animation:none; box-shadow:none}
.lista-simple .dot.err{background:var(--red); animation:none; box-shadow:none}
@media (max-width:560px){ .lista-simple.servicios .it{flex-direction:column; align-items:flex-start; gap:5px} .lista-simple .sv-d{text-align:left} }
/* en el móvil, cada versión en tres pisos: número y uso · qué trae · qué se puede hacer */
@media (max-width:560px){ .ver .t{flex-basis:100%; order:3} .ver .uso{margin-left:auto; text-align:right} .ver .acc{order:4} }

/* ---- páginas de error (403, 404, 500) ---- */
.prohibido .eyebrow{margin-inline:auto}
.prohibido .h-lg{margin:14px 0 10px}
.prohibido .lead{font-size:.95rem}
main.pub .prohibido{margin-top:9vh}

/* ---- tarjetas, cajas y tablas (revisión) ---- */
/* sin el foco dorado que seguía al puntero por las tarjetas */
[data-spot]::before,[data-spot]::after{content:none}
/* las cajas de una misma fila, siempre a la misma altura */
.grid2,.grid-ficha{align-items:stretch}
.grid-ficha > .col{display:flex; flex-direction:column}
.grid-ficha > .col > :last-child{flex:1 1 auto}
/* en la ficha de un ticket lo que crece es el pie de la caja: el cuadro de escribir sigue pegado a la conversación */
.grid-ficha .tk-box > form.tk-comp{flex:1 1 auto; align-content:start}
/* ---- Mejores compras: tarjetas en tres columnas ---- */
.mc-total{margin-left:auto}
.mc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.mc{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); overflow:hidden; transition:border-color .25s}
.mc:hover{border-color:var(--border-hover)}
.mc-img{display:block; aspect-ratio:8 / 5; background:var(--bg-deep); border-bottom:1px solid var(--border-soft); overflow:hidden}
.mc-img img{display:block; width:100%; height:100%; object-fit:cover}
a.mc-img{cursor:zoom-in}
.mc-sin{display:grid; place-content:center; justify-items:center; gap:8px; color:var(--text-faint); font-size:.8rem}
.mc-b{display:flex; flex-direction:column; gap:14px; padding:16px 18px 18px; flex:1}
.mc-cab{display:flex; align-items:center; gap:8px; min-width:0}
.mc-cab h3{font-size:1rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc-cab .mc-desc{margin-left:auto; flex-shrink:0}
.mc-ahorro{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.mc-ahorro span{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.mc-ahorro b{font-size:1.55rem; letter-spacing:-.03em; color:var(--green); font-variant-numeric:tabular-nums}
.mc-precios{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 12px; padding-top:14px; border-top:1px solid var(--border-soft)}
.mc-precios div{display:grid; gap:2px; min-width:0; align-content:end}      /* las cifras, a la misma altura aunque una etiqueta ocupe dos líneas */
.mc-precios div > span{font-size:.7rem; line-height:1.3; color:var(--text-faint)}   /* la etiqueta, no el +/− del beneficio */
.mc-precios b span{font-size:inherit}
.mc-precios b{font-size:.88rem; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap}
.mc-pie{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border-soft); font-size:.76rem; color:var(--text-faint)}
.mc-pie .lnk{margin-left:auto}
.mc-pag{margin-top:2px}
.modal.modal-captura{max-width:min(920px,94vw); width:100%; padding:16px}
.mcap-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.mcap-cab h3{margin:0}
.mcap-img{display:block; width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--border-soft)}
@media (max-width:1180px){ .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .mc-grid{grid-template-columns:minmax(0,1fr)} .mc-total{margin-left:0} }

/* la cabecera de una tabla que llena su caja no va pegada al borde de arriba */
.box-b.flush .tbl thead th{padding-top:15px}
/* el aviso de las gráficas, por encima de todo y sin que lo recorte su caja (lo coloca graficas.js) */
.tip{position:fixed; z-index:40}
.tip.abajo{transform:translate(-50%,0)}

/* ===================== Administración · clientes y ventas ===================== */
/* ventas: la gráfica de meses ancha y el reparto por plan a su lado (debajo en pantallas estrechas) */
.grid-ventas{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:18px; align-items:stretch}
@media (max-width:1180px){ .grid-ventas{grid-template-columns:minmax(0,1fr)} }
/* quien compró sin cuenta todavía: un avatar sin nombre */
.av.av-vacio{background:var(--bg-hover); color:var(--text-faint); border:1px dashed var(--border-hover)}
div.usr:hover{border-color:var(--border)}
.usr .go.faint{color:var(--text-faint); font-weight:400}
/* los ids de Stripe son largos: se parten en vez de desbordar el cajón */
.rv-row .id-largo{font-size:.72rem; word-break:break-all; min-width:0}
.det .det-btn{margin-top:12px}
.det .nota{margin-top:10px; font-size:.76rem; color:var(--text-faint); line-height:1.5}
.tbl td s.mut{margin-left:4px}
.topbar .sp .btn svg{flex-shrink:0}
/* visión general: las ventas del mes */
.vm-cifras{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.vm-cifras div{display:grid; gap:3px; min-width:0}
.vm-cifras span{font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.vm-cifras b{font-size:1.3rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.vm-cifras b.faint{color:var(--text-dim); font-size:1.05rem; align-self:end}
.vm-dif{margin-top:12px; font-size:.78rem; color:var(--text-faint); line-height:1.5}
.vm-ultimas{display:grid; margin-top:12px; border-top:1px solid var(--border-soft)}
.vm-ultimas a{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); min-width:0}
.vm-ultimas a:last-child{border-bottom:0; padding-bottom:0}
.vm-ultimas .t{display:grid; min-width:0}
.vm-ultimas .t b{font-size:.82rem}
.vm-ultimas .t span{font-size:.72rem; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vm-ultimas .tm{margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:.66rem; color:var(--text-faint)}
.vm-ultimas a:hover .t b{color:var(--accent)}
/* códigos promocionales */
.modal.modal-ancho{max-width:min(560px,94vw); width:100%}
.tbl .cod{font-size:.84rem; letter-spacing:.04em}
.usos{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.usos-barra{display:inline-block; width:46px; height:4px; border-radius:var(--r-full); background:var(--bg-hover); overflow:hidden}
.usos-barra i{display:block; height:100%; width:var(--p); max-width:100%; background:var(--accent); border-radius:inherit}
.cod-planes{display:flex; flex-wrap:wrap; gap:10px 18px; padding:4px 0 2px}
.cod-planes .check{align-items:center}
.check.cod-activo{margin-top:6px; align-items:center}
.check.cod-activo b{color:var(--text)}
.cod-form .field{margin-bottom:12px}
.cod-acc{display:flex; justify-content:flex-end; margin-top:14px}
.cod-form .nota{font-size:.76rem; margin-top:8px}
.cod-borrar{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.8rem; color:var(--text-faint)}
.topbar .sp form{display:flex}
.migas h1.mono{font-family:var(--mono); letter-spacing:.04em}
.tbl td.cod-celda a,.tbl td.cod-celda > span{display:block}
.tbl td.cod-celda > span{font-size:.72rem; color:var(--text-faint); margin-top:2px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* en la ficha, el formulario va en la columna estrecha: un campo por fila */
.cod-form .row2{grid-template-columns:minmax(0,1fr); gap:0}
.inp:disabled{opacity:.55; cursor:not-allowed}
/* lista de espera: las acciones sobre lo que se está viendo */
.espera-acc{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-card); font-size:.82rem; color:var(--text-dim)}
.espera-acc > span:first-child{margin-right:auto}
.espera-por-que{font-size:.76rem}
.espera-correo{word-break:break-all}
.tbl td.r form{display:inline-flex}
/* planes y temporada */
.tbl-precios td{vertical-align:middle}
.precio-campo{display:flex; align-items:center; gap:10px}
.precio-campo .inp{width:110px; padding-top:8px; padding-bottom:8px}
.precio-campo span{font-size:.72rem; white-space:nowrap}
.precio-campo.con-error .inp{border-color:var(--red)}
.tbl-precios .err-msg{margin-top:4px}
.precios-pie{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-top:1px solid var(--border-soft); font-size:.76rem}
@media (max-width:560px){ .precios-pie{flex-direction:column; align-items:stretch} .precio-campo{justify-content:flex-end} }
.temp{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft)}
.temp:first-child{padding-top:0}
.temp:last-child{border-bottom:0; padding-bottom:0}
.temp .t{display:grid; gap:2px; min-width:0; flex:1}
.temp .t b{font-size:.86rem}
.temp .t span{font-size:.74rem; color:var(--text-faint)}
.temp .t em{font-style:normal; color:var(--accent)}
.temp.pasada{opacity:.55}
/* ajustes de venta: el estado grande, arriba */
.venta-estado{display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-card)}
.venta-estado.on{border-color:rgba(63,208,127,.35); background:linear-gradient(90deg,rgba(63,208,127,.08),var(--bg-card) 60%)}
.venta-estado.a-medias{border-color:rgba(240,136,62,.35)}
.venta-estado .ve-t{flex:1; min-width:0}
.venta-estado .ve-k{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}
.venta-estado b{display:block; font-size:1.5rem; letter-spacing:-.03em; margin:4px 0 6px}
.venta-estado.on b{color:var(--green)}
.venta-estado.a-medias b{color:var(--amber)}
.venta-estado p{font-size:.82rem; color:var(--text-dim); line-height:1.5}
.venta-estado .ve-acc{flex-shrink:0}
@media (max-width:640px){ .venta-estado{flex-direction:column; align-items:stretch} .venta-estado .ve-acc .btn{width:100%} }


/* ---- Administración · Gestionados ---- */
.gest-codigo{display:flex; gap:8px; justify-content:flex-end; align-items:center}
.gest-codigo .inp{width:9.5em; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; text-align:center}
.gest-falta{margin-top:5px; font-size:.74rem; line-height:1.4}
.gest-form{display:grid; gap:14px}
.gest-form .field{margin:0}
.gest-form textarea.inp{resize:vertical; min-height:110px; line-height:1.55}
.gest-acc{display:flex; justify-content:flex-end}
.gest-quitar{display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.84rem; color:var(--text-dim)}
.gest-estado .badge{font-size:.9rem; padding:6px 14px}