/* Panel de administración: mismos colores y formas que el catálogo. */
:root {
  --fondo: #f3f4f8; --tarjeta: #fff; --tinta: #12141c; --suave: #6a6f7d; --linea: #e4e6ee;
  --acento: #1e5aab; --acento-tinta: #17468a; --acento-suave: #e8f0fb; --wa: #1fb457; --rojo: #b3261e;
  --sombra: 0 1px 2px rgba(18, 20, 28, .04), 0 6px 20px rgba(18, 20, 28, .06);
  --ancho: 1560px;   /* ancho máximo del panel en pantallas grandes */
}
* { box-sizing: border-box; touch-action: manipulation; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1 { margin: 4px 0 16px; font-size: 24px; letter-spacing: -.5px; }
h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: -.2px; }
.sub { margin: 0; color: var(--suave); font-size: 13.5px; }

/* Barra superior */
.top { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--linea); }
.top-in { max-width: var(--ancho); height: 62px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.top-logo img { height: 44px; width: auto; display: block; }
.top-logo span { padding: 3px 10px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.top-acc { display: flex; gap: 8px; }

.wrap { max-width: var(--ancho); margin: 0 auto; padding: 20px 16px 40px; }
.estrecho { max-width: 560px; }
.caja { margin-bottom: 16px; padding: 18px; background: var(--tarjeta); border-radius: 18px; box-shadow: var(--sombra); }

/* Acceso */
body.acceso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(90% 70% at 100% 0%, rgba(37, 99, 235, .42) 0%, rgba(37, 99, 235, 0) 62%), radial-gradient(70% 60% at 0% 100%, rgba(37, 99, 235, .16) 0%, rgba(37, 99, 235, 0) 60%), linear-gradient(160deg, #0a1730 0%, #1c2113 100%); }
body.acceso .wrap { width: 100%; max-width: 1000px; padding: 20px 16px; }
.auth { display: grid; gap: 28px; align-items: center; }
.auth-marca { display: none; color: #fff; }
.auth-sello { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.auth-marca h2 { margin: 18px 0 22px; font-size: 38px; line-height: 1.1; letter-spacing: -1px; }
.auth-marca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-marca li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.auth-marca li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(37, 99, 235, .22); color: var(--acento); font-size: 13px; font-weight: 800; }
.auth-caja { width: 100%; max-width: 440px; margin: 0 auto; padding: 28px 22px 22px; border-radius: 28px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.auth-logo { display: block; height: 76px; width: auto; margin: 0 auto 14px; }
.auth-caja h1 { margin: 0 0 4px; font-size: 26px; text-align: center; }
.auth-caja > .sub { margin-bottom: 18px; text-align: center; }
.auth-caja input[type=email], .auth-caja input[type=password], .auth-caja input[type=text] { height: 54px; border-radius: 16px; background: var(--fondo); border-color: transparent; }
.auth-caja input:focus { background: #fff; border-color: var(--acento); }
.auth-caja input[type=email] { width: 100%; padding: 0 16px; font: inherit; font-size: 16px; outline: 0; border-width: 1.5px; border-style: solid; }
.auth-clave { position: relative; }
.auth-clave input { padding-right: 84px; }
.auth-clave button { position: absolute; top: 9px; right: 9px; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; color: var(--tinta); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 3px rgba(18, 20, 28, .12); }
.auth-recordar { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.auth-recordar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auth-recordar small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.interruptor { flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px; background: #d5d8e0; transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.auth-recordar input:checked + .interruptor { background: var(--acento); }
.auth-recordar input:checked + .interruptor::after { transform: translateX(18px); }
.auth-recordar input:focus-visible + .interruptor { outline: 2px solid var(--tinta); outline-offset: 2px; }
.auth-caja .btn.ancho { height: 56px; font-size: 16.5px; }
.auth-pie { display: block; margin-top: 16px; text-align: center; color: var(--suave); font-size: 13.5px; font-weight: 600; text-decoration: none; }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; }
  .auth-marca { display: block; }
  .auth-caja { padding: 36px 32px 28px; }
}

/* Formularios */
label { display: block; margin: 14px 0 5px; font-size: 12.5px; font-weight: 700; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 12px;
  background: #fff; color: var(--tinta); font: inherit; font-size: 16px; outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
textarea { height: auto; min-height: 88px; padding: 11px 14px; resize: vertical; }
input[type=file] { width: 100%; padding: 12px; border: 1.5px dashed var(--linea); border-radius: 12px; font-size: 14px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 23px; background: var(--tinta); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.chico { height: 38px; padding: 0 14px; font-size: 13px; }
.btn.ancho { width: 100%; height: 52px; }
.btn.gris { background: var(--fondo); color: var(--tinta); }
.btn.verde { background: var(--acento); color: #fff; }
.btn.wa { background: var(--wa); color: #fff; }
.btn.rojo { background: #fff; color: var(--rojo); border: 1.5px solid #f0c9c5; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.msg { margin-bottom: 16px; padding: 13px 16px; border-radius: 14px; background: var(--acento-suave); color: var(--acento-tinta); font-size: 14px; font-weight: 600; }
.msg.err { background: #fde9e7; color: #8c1d18; }

/* Resumen */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cifra { padding: 14px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.cifra b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -1px; }
.cifra span { display: block; margin-top: 4px; color: var(--suave); font-size: 12px; line-height: 1.25; }
.cifra.alerta { background: var(--tinta); color: #fff; }
.cifra.alerta b { color: var(--acento); }
.cifra.alerta span { color: rgba(255, 255, 255, .75); }

/* Pestañas */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; border-radius: 16px; background: #e6e8ef; }
.tabs a { flex: 1; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--suave); font-weight: 700; font-size: 14px; text-decoration: none; }
.tabs a.on { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(18, 20, 28, .1); }

.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff3d6; color: #7a5200; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.chip.ok { background: var(--acento); color: #fff; }

/* Listas */
.sols, ul.lista { list-style: none; margin: 0; padding: 0; }
.sols a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin: 0 -10px; padding: 13px 10px; border-radius: 14px; color: inherit; text-decoration: none; }
.sols a:hover { background: var(--fondo); }
.sols li + li { border-top: 1px solid var(--linea); }
.sols b { font-size: 15px; }
.sols small { color: var(--suave); font-size: 13px; }
.sols .der { text-align: right; }
.sols small.der { color: var(--tinta); font-weight: 700; font-size: 14px; }
ul.lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linea); }
ul.lista b { display: block; font-size: 14px; }
ul.lista span { font-size: 12px; color: var(--suave); }
ul.lista img, .hueco, .lin img { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--linea); }

/* Editor de presupuesto */
.lin { display: grid; grid-template-columns: 52px minmax(0, 1fr) 92px 116px 116px; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linea); }
.lin.enc { padding: 0 0 8px; border-top: 0; color: var(--suave); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.lin .txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.lin .txt span { font-size: 12px; color: var(--suave); }
.lin label { display: none; margin: 0 0 4px; font-size: 11px; color: var(--suave); letter-spacing: .4px; text-transform: uppercase; }
.lin input { height: 46px; padding: 0 12px; text-align: right; font-weight: 600; }
.lin .imp { text-align: right; font-weight: 800; font-size: 15px; }
.total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 16px 18px; border-radius: 16px; background: var(--tinta); color: #fff; }
.total span { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.total b { font-size: 24px; letter-spacing: -.4px; }
.dos { display: grid; grid-template-columns: 170px 1fr; gap: 14px; }
.nueva { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--fondo); scroll-margin-top: 80px; }
.nueva h3 { margin: 0 0 4px; font-size: 15px; }
.tres { display: grid; grid-template-columns: 110px 140px auto; gap: 12px; align-items: end; justify-content: start; }
.crear { display: flex; gap: 8px; }
.crear input { flex: 1; min-width: 0; }
.pegado-viejo { position: sticky; bottom: 0; margin: 18px -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linea); border-radius: 0 0 18px 18px; }
.pegado .btn { height: 52px; font-size: 16px; }

@media (max-width: 640px) {
  .top-logo img { height: 38px; }
  .cifra b { font-size: 24px; }
  .lin { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "img txt txt txt" "cant cant precio imp"; align-items: end; }
  .lin.enc { display: none; }
  .lin label { display: block; }
  .lin img, .lin .hueco { grid-area: img; align-self: center; }
  .lin .txt { grid-area: txt; align-self: center; }
  .lin .c-cant { grid-area: cant; }
  .lin .c-precio { grid-area: precio; }
  .lin .imp { grid-area: imp; height: 46px; display: grid; align-items: center; justify-content: end; }
  .dos { grid-template-columns: 1fr; gap: 0; }
  .tres { grid-template-columns: 1fr 1fr; }
  .tres .btn { grid-column: 1 / -1; height: 50px; }
  .caja .fila .btn { flex: 1 1 46%; }
}

/* Usuario y tasa BCV en la barra superior */
.yo { align-self: center; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--suave); }
.tasa { background: var(--acento); color: #fff; box-shadow: 0 2px 10px rgba(18, 20, 28, .12); }
.tasa summary { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.tasa summary::-webkit-details-marker { display: none; }
.moneda { flex: none; }
.tasa-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tasa-txt span { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; opacity: .7; }
.tasa-txt b { font-size: 19px; letter-spacing: -.4px; }
.tasa summary small { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; font-weight: 600; opacity: .8; }
.tasa summary small i { padding: 3px 10px; border-radius: 999px; background: var(--tinta); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; opacity: 1; }
.tasa[open] summary small i { display: none; }
.tasa-form { max-width: var(--ancho); margin: 0 auto; padding: 2px 16px 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.tasa-form input { flex: 1; min-width: 160px; height: 40px; border-color: transparent; }
.tasa-form .btn { background: var(--tinta); color: #fff; }
.tasa-form .btn.gris { background: rgba(18, 20, 28, .12); color: var(--tinta); }

.tabs a { font-size: 13.5px; }

/* Filtro por estado y colores de cada estado */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filtros a { padding: 6px 12px; border-radius: 999px; background: var(--fondo); color: var(--tinta); font-size: 13px; font-weight: 600; text-decoration: none; }
.filtros a.on { background: var(--tinta); color: #fff; }
.filtros i { font-style: normal; opacity: .6; }
.chip.e-pendiente { background: #fff3d6; color: #7a5200; }
.chip.e-enviado   { background: #e1ecff; color: #173e85; }
.chip.e-aceptado  { background: var(--acento); color: #fff; }
.chip.e-entregado { background: #d6f2e1; color: #135c33; }
.chip.e-cobrado   { background: var(--tinta); color: var(--acento); }
.chip.e-rechazado { background: #fde9e7; color: #8c1d18; }

/* Rejillas de formulario */
.cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.cuatro .larga { grid-column: span 2; }
.ancho3 { grid-template-columns: 2fr 1fr 1fr auto; justify-content: stretch; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
input[type=search] { height: 44px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; outline: 0; }
.lin input.sugerido { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-tinta); }
.guia { margin: 8px 2px 0; text-align: right; font-size: 13px; color: var(--suave); }
.guia b { color: var(--tinta); }

/* Estadísticas */
.rank { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.rank li::before { content: counter(r); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fondo); font-size: 12px; font-weight: 800; }
.rank li:nth-child(-n+3)::before { background: var(--acento); }
.rank b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rank small { font-size: 12px; color: var(--suave); }
.rank i { font-style: normal; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Marcas de producto: destacar, agotado, ocultar */
.marcas { list-style: none; margin: 0; padding: 0; }
.marcas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea); }
.marcas b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.marcas span { font-size: 12px; color: var(--suave); }
.interruptores { display: flex; gap: 4px; }
.interruptores button { height: 36px; padding: 0 11px; border: 0; border-radius: 18px; background: var(--fondo); color: var(--suave); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.interruptores button.on { background: var(--tinta); color: #fff; }
.interruptores button[data-campo=destacado].on { background: var(--acento); color: #fff; }
.interruptores button[data-campo=oculto].on { background: var(--rojo); }
.solo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .top-acc .btn.chico { padding: 0 11px; }
  .yo { display: none; }
  .tabs a { font-size: 12.5px; }
  .cuatro { grid-template-columns: 1fr 1fr; }
  .ancho3 { grid-template-columns: 1fr 1fr; }
  .ancho3 > div:first-of-type { grid-column: 1 / -1; }
  .marcas li { grid-template-columns: 1fr; gap: 6px; }
  .interruptores button { flex: 1; }
  .rank li { grid-template-columns: 28px minmax(0, 1fr); }
  .rank i { grid-column: 2; }
  .cifra b { font-size: 20px; }
}

/* ---------- Inicio (tablero) ---------- */
.saludo { margin: 4px 0 16px; }
.saludo h1 { margin: 0 0 2px; font-size: 28px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.kpi span { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.kpi b { font-size: 28px; line-height: 1.15; letter-spacing: -1px; }
.kpi small { min-height: 1.2em; font-size: 12px; color: var(--suave); }
.kpi.alerta { background: var(--tinta); color: #fff; }
.kpi.alerta b { color: #7fb2ff; }
.kpi.alerta span, .kpi.alerta small { color: rgba(255, 255, 255, .7); }
a.kpi:hover, .acceso-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18, 20, 28, .05), 0 12px 28px rgba(18, 20, 28, .1); }
a.kpi, .acceso-card { transition: transform .15s, box-shadow .15s; }

.rapido { margin-bottom: 16px; padding: 16px 18px 18px; border-radius: 20px; background: radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, .32) 0%, rgba(37, 99, 235, 0) 60%), linear-gradient(160deg, #0a1730 0%, #13264a 100%); }
.rapido label { margin: 0 0 8px; color: #fff; font-size: 15px; }
.rapido input { border-color: transparent; }

.accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.acceso-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: var(--tarjeta); box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.acceso-card i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; background: var(--acento-suave); color: var(--acento-tinta); }
.acceso-card b { font-size: 16.5px; letter-spacing: -.2px; }
.acceso-card span { font-size: 13px; line-height: 1.35; color: var(--suave); }
.acceso-card em { margin-top: auto; padding-top: 10px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--acento-tinta); }
.acceso-card em u { color: var(--rojo); text-decoration: none; }

.tabs .casa { flex: none; width: 44px; color: var(--tinta); }

/* ---------- Estadísticas (tablero) ---------- */
.tablero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 190px; padding-top: 6px; }
.barras .col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.barras .par { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1.5px solid var(--linea); }
.barras .par i { width: 38%; max-width: 22px; min-height: 0; border-radius: 6px 6px 0 0; background: var(--tinta); }
.barras .par i.v, .leyenda i.v { background: var(--acento); }
.barras b { margin-top: 6px; font-size: 14px; }
.barras small { font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; }
.leyenda { display: flex; gap: 16px; margin: 12px 0 0; font-size: 12px; color: var(--suave); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--tinta); }
.estados { list-style: none; margin: 0; padding: 0; }
.estados a { display: grid; grid-template-columns: 88px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 8px 0; color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.estados em { height: 12px; border-radius: 6px; background: var(--fondo); overflow: hidden; }
.estados em i { display: block; height: 100%; border-radius: 6px; background: var(--tinta); }
.estados i.e-pendiente { background: #e2a400; } .estados i.e-enviado { background: #3b6fe0; } .estados i.e-aceptado { background: var(--acento); }
.estados i.e-entregado { background: #1fa055; } .estados i.e-cobrado { background: var(--tinta); } .estados i.e-rechazado { background: #d0483f; }
.estados b { text-align: right; }
/* Rankings con barra de fondo proporcional */
.rank li { position: relative; padding: 10px 8px; border-top: 0; border-radius: 10px; margin-bottom: 4px; background: linear-gradient(90deg, var(--acento-suave) var(--p, 0%), transparent var(--p, 0%)); }
.rank a { color: inherit; text-decoration: none; }

@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi b { font-size: 22px; }
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acceso-card { padding: 14px; }
  .acceso-card b { font-size: 15px; }
  .acceso-card span { font-size: 12px; }
  .tablero { grid-template-columns: 1fr; }
  .tabs a { font-size: 12px; }
  .tabs .casa { width: 38px; }
}

/* ---------- Tablet y escritorio: se aprovecha el ancho ---------- */
@media (min-width: 761px) {
  .wrap, .top-in, .tasa summary, .tasa-form { padding-left: 28px; padding-right: 28px; }
  .wrap { padding-top: 26px; }
  .tabs { max-width: 620px; }
}
@media (min-width: 1100px) {
  .wrap, .top-in, .tasa summary, .tasa-form { padding-left: 40px; padding-right: 40px; }

  /* Inicio: accesos a la izquierda; nuevo presupuesto y actividad a la derecha. */
  .inicio-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); grid-template-areas: "acc rap" "acc act"; grid-template-rows: auto 1fr; gap: 0 20px; align-items: start; }
  .inicio-cols .rapido { grid-area: rap; }
  .inicio-cols .accesos { grid-area: acc; margin-bottom: 0; }
  .inicio-cols .actividad { grid-area: act; }
  .acceso-card { padding: 22px; min-height: 190px; }
  .kpi { padding: 20px; }
  .kpi b { font-size: 32px; }

  /* Listados: contenido principal a la izquierda y el formulario de alta en un lateral. */
  .cols2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); gap: 0 20px; align-items: start; }
  .cols2 > :first-child { order: 2; position: sticky; top: 148px; }
  .cols2 > :first-child .ancho3 { grid-template-columns: 1fr; }
  .cols2 > :first-child .ancho3 .btn { margin-top: 14px; }
  .cols2 .crear { flex-wrap: wrap; }
  .cols2 .crear input { flex: 1 1 100%; }
  .cols2 .crear .btn { flex: 1; }

  /* Editor de presupuesto: productos a la izquierda, envío y documentos a la derecha. */
  .editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 20px; align-items: start; }
  .editor .ed-form { grid-column: 1; grid-row: 1 / span 4; }
  .editor .ed-lat { grid-column: 2; }
  .editor .ed-lat .fila .btn, .editor .ed-acc .btn, .editor .ed-acc form { flex: 1 1 100%; width: 100%; }
  .editor .ed-acc { margin-bottom: 16px; }
  .lin { grid-template-columns: 56px minmax(0, 1fr) 110px 140px 140px; }
}
@media (min-width: 1500px) {
  .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tablero { gap: 0 20px; }
}

/* Aviso para activar las notificaciones */
.avisos { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); border: 1.5px dashed var(--acento); }
.avisos svg { flex: none; color: var(--acento-tinta); }
.avisos p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; color: var(--suave); }
.avisos b { display: block; font-size: 14.5px; color: var(--tinta); }
.avisos.ok { border-style: solid; border-color: var(--linea); }
.avisos .btn { flex: none; }

.ancho3 .toda { grid-column: 1 / -1; }
.ancho3 .toda + .btn { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }

/* ---------- Editor de presupuesto: barra fija, hoja de envío y buscador de productos ---------- */
.solo-movil { display: none; }
.vacio-presu { padding: 22px 12px; border-radius: 16px; background: var(--fondo); text-align: center; }
.vacio-presu p { margin: 0 0 12px; color: var(--suave); }
.mas { margin-top: 16px; border-radius: 16px; background: var(--fondo); }
.mas summary { display: flex; flex-direction: column; gap: 2px; padding: 14px 44px 14px 16px; position: relative; cursor: pointer; list-style: none; font-size: 14.5px; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary::after { content: "⌄"; position: absolute; right: 16px; top: 12px; font-size: 20px; color: var(--suave); transition: transform .15s; }
.mas[open] summary::after { transform: rotate(180deg); }
.mas summary span { font-size: 12.5px; color: var(--suave); }
.mas .cuatro { padding: 0 16px 16px; }
.cuatro .toda { grid-column: 1 / -1; }
.barra-presu { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin: 18px -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea); border-radius: 0 0 18px 18px; }
.barra-presu .btn { flex: 1; height: 52px; padding: 0 10px; font-size: 15.5px; }
.barra-presu .btn.verde { flex: 1.4; }
.barra-presu .btn.pendiente { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.envio .caja:last-of-type { margin-bottom: 16px; }
body.sin-scroll { overflow: hidden; }
.capa-hoja { position: fixed; inset: 0; z-index: 30; background: rgba(18, 20, 28, .55); }
.cerrar-hoja { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fondo); font-size: 24px; line-height: 1; cursor: pointer; }

.buscador-prod { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--fondo); }
.bp-cab { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--linea); font-size: 16px; }
.bp-paso { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; width: 100%; max-width: 720px; margin: 0 auto; }
.bp-paso > input[type=search] { flex: none; width: 100%; height: 54px; border-radius: 16px; font-size: 17px; }
.bp-lista { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 12px 0 0; padding: 0 0 20px; -webkit-overflow-scrolling: touch; }
.bp-lista button { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; padding: 10px 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--sombra); font: inherit; text-align: left; cursor: pointer; }
.bp-lista img, .bp-lista .hueco, .bp-elegido img { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--linea); }
.bp-lista b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.bp-lista small { font-size: 12.5px; color: var(--suave); }
.bp-lista .libre { background: var(--acento-suave); box-shadow: none; }
.mas-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--acento); font-size: 26px; font-weight: 700; }
.bp-ayuda { padding: 28px 12px; text-align: center; color: var(--suave); font-size: 14px; }
.bp-elegido { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.bp-elegido img { width: 64px; height: 64px; }
.bp-elegido b { display: block; font-size: 16px; line-height: 1.3; }
.bp-elegido span { font-size: 13px; color: var(--suave); }
.dos-iguales { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dos-iguales input { height: 56px; font-size: 20px; font-weight: 700; text-align: center; }
.btn-texto { display: block; margin: 14px auto 0; padding: 8px; border: 0; background: none; color: var(--suave); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

@media (max-width: 1099px) {
  .solo-movil { display: inline-flex; }
  .solo-pc { display: none; }
  /* Envío y documentos como hoja inferior */
  .envio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; max-height: 88dvh; overflow-y: auto; padding: 56px 16px calc(8px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--fondo); transform: translateY(105%); transition: transform .22s ease-out; }
  .envio.abierta { transform: none; }
  .envio .fila .btn, .envio .ed-acc form, .envio .ed-acc .btn { flex: 1 1 100%; width: 100%; }
  .envio .btn.wa { height: 56px; font-size: 16.5px; }
}
@media (min-width: 1100px) {
  .editor .envio { grid-column: 2; }
  .editor .envio .fila .btn, .editor .envio form, .editor .envio .ed-acc .btn { flex: 1 1 100%; width: 100%; }
  .barra-presu .btn { flex: 0 1 220px; }
  .barra-presu { justify-content: flex-end; }
  .buscador-prod { background: rgba(18, 20, 28, .55); align-items: center; justify-content: center; }
  .buscador-prod .bp-cab, .buscador-prod .bp-paso { max-width: 640px; }
  .buscador-prod .bp-cab { border-radius: 22px 22px 0 0; width: 100%; }
  .buscador-prod .bp-paso { flex: 0 1 620px; background: var(--fondo); border-radius: 0 0 22px 22px; margin: 0; }
}

@media (max-width: 640px) {
  .top-acc a[href="../"] { display: none; }   /* en el móvil, «Ver web» está en el inicio */
  .barra-presu .btn.gris { flex: .7; }
}

input.mal { border-color: var(--rojo) !important; background: #fff6f5; }

/* Estado editable en la cabecera del presupuesto */
.estado-rapido select.chip { height: 34px; width: auto; padding: 0 30px 0 14px; border: 0; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px; cursor: pointer; }
.estado-rapido select.chip.e-pendiente { background-color: #fff3d6; } .estado-rapido select.chip.e-enviado { background-color: #e1ecff; }
.estado-rapido select.chip.e-aceptado { background-color: var(--acento); } .estado-rapido select.chip.e-entregado { background-color: #d6f2e1; }
.estado-rapido select.chip.e-cobrado { background-color: var(--tinta); } .estado-rapido select.chip.e-rechazado { background-color: #fde9e7; }
.enviado-el { color: var(--acento-tinta); font-size: 13.5px; }
.ya-enviado { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fondo); font-size: 13.5px; }
.envio .ya-enviado .btn { flex: 0 0 auto; width: auto; background: #fff; }
.estado-rapido { position: relative; }
.estado-rapido::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
.estado-rapido select.chip.e-cobrado + *, .estado-rapido:has(select.e-cobrado)::after { color: var(--acento); }
.estado-rapido select.chip { padding-right: 32px; background-image: none; }

/* ---------- Navegación fija inferior (móvil y tablet) ---------- */
.bnav { display: none; }
@media (max-width: 1099px) {
  .tabs { display: none; }
  body:not(.acceso) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea); box-shadow: 0 -4px 18px rgba(18, 20, 28, .06); }
  .bnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 3px; border-radius: 14px; color: var(--suave); font-size: 10.5px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .bnav span { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 15px; }
  .bnav a.on { color: var(--tinta); }
  .bnav a.on span { background: var(--acento); }
  .bnav i { position: absolute; top: -3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rojo); color: #fff; font-style: normal; font-size: 10.5px; line-height: 18px; text-align: center; }
  /* La barra de acciones del presupuesto se apoya encima de la navegación. */
  .barra-presu { bottom: calc(62px + env(safe-area-inset-bottom)); border-radius: 0; }
  .envio { bottom: 0; z-index: 35; }
}

/* Notificaciones: línea discreta al pie del inicio */
.avisos-pie { margin: 6px 4px 0; text-align: center; font-size: 12.5px; color: var(--suave); }
.avisos-pie button { margin-left: 4px; padding: 4px 6px; border: 0; background: none; color: var(--acento-tinta); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.avisos-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--suave); font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------- Despachos ---------- */
.progreso { height: 10px; border-radius: 5px; background: #e2e5ec; overflow: hidden; }
.progreso i { display: block; height: 100%; border-radius: 5px; background: var(--acento); transition: width .3s; }
.dos-iguales.peq input, .dos-iguales.peq select { height: 48px; font-size: 16px; font-weight: 400; text-align: left; }
input[type=date] { width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; }
.elegir { list-style: none; margin: 0; padding: 0; }
.elegir label { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 12px 0; border-top: 1px solid var(--linea); font-weight: 400; cursor: pointer; }
.elegir li:first-child label { border-top: 0; }
.elegir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marca { width: 28px; height: 28px; border-radius: 9px; border: 2px solid #c9ccd6; display: grid; place-items: center; }
.elegir input:checked + .marca { background: var(--acento); border-color: var(--acento); }
.elegir input:checked + .marca::after { content: "✓"; font-weight: 800; }
.elegir input:focus-visible + .marca { outline: 2px solid var(--tinta); outline-offset: 2px; }
.elegir .txt b { display: block; font-size: 14.5px; }
.elegir small { display: block; font-size: 12.5px; color: var(--suave); line-height: 1.35; }
.entregas { list-style: none; margin: 0; padding: 0; }
.entrega { margin-bottom: 12px; padding: 16px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); scroll-margin-top: 150px; }
.entrega.hecha { background: var(--acento-suave); box-shadow: none; }
.entrega.fallida { background: #fdf0ee; box-shadow: none; }
.ent-cab { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ent-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); color: #fff; font-weight: 800; }
.entrega.hecha .ent-n { background: var(--acento); color: #fff; }
.ent-cab b { display: block; font-size: 15.5px; line-height: 1.25; }
.ent-cab span:not(.ent-n) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--suave); }
.ent-cab strong { font-size: 15px; white-space: nowrap; }
.ent-res { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; }
.ent-res.ok { color: var(--acento-tinta); } .ent-res.mal { color: var(--rojo); }
.ent-titulo { margin: 4px 2px 10px; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.ent-titulo.ok { margin-top: 20px; color: var(--acento-tinta); }
/* Contacto: tres accesos iguales y un menú «Más» */
.ent-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.ent-ic, .ent-mas > summary { height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: var(--fondo); color: var(--tinta); font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; }
.ent-mas > summary::-webkit-details-marker { display: none; }
.ent-mas > summary::before { content: "⋯"; font-size: 18px; line-height: 1; }
.entrega.hecha .ent-ic, .entrega.hecha .ent-mas > summary, .entrega.fallida .ent-ic, .entrega.fallida .ent-mas > summary { background: #fff; }
.ent-mas { position: relative; }
.ent-mas[open] > summary { background: var(--tinta); color: #fff; }
.ent-menu { position: absolute; right: 0; top: 48px; z-index: 6; width: min(280px, 78vw); padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 10px 34px rgba(18, 20, 28, .22); }
.ent-menu a, .ent-menu button, .ent-dato { display: block; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.ent-menu a:hover, .ent-menu button:hover { background: var(--fondo); }
.ent-dato { color: var(--suave); font-size: 12.5px; font-weight: 400; cursor: default; }
.ent-menu .mal { color: var(--rojo); }
.ent-menu form { margin: 0; }
/* Un solo botón de acción; al abrirlo aparecen las tres salidas posibles */
.ent-marcar { margin-top: 10px; }
.ent-marcar > summary { width: 100%; height: 52px; font-size: 16px; list-style: none; }
.ent-marcar > summary::-webkit-details-marker { display: none; }
.ent-marcar[open] > summary { background: var(--fondo); color: var(--suave); height: 40px; font-size: 13.5px; }
.ent-opc { display: grid; gap: 8px; margin-top: 10px; }
.ent-opc > .btn { height: 52px; font-size: 15.5px; }
.ent-no { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--linea); }
.ent-no input { height: 46px; margin: 0; }
.ent-no .btn { height: 46px; padding: 0 14px; font-size: 13.5px; }
/* Resumen del despacho */
.resumen-desp { margin-bottom: 16px; padding: 16px; border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); }
.res-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.res-cifras b { display: block; font-size: 20px; letter-spacing: -.5px; }
.res-cifras span { font-size: 12px; color: var(--suave); line-height: 1.25; display: block; }
.plegado { margin-top: 12px; border-top: 1px solid var(--linea); }
.plegado summary { padding: 14px 2px 4px; font-size: 14px; font-weight: 700; cursor: pointer; }
.plegado .btn, .plegado form { margin-top: 8px; }
.plegado .btn { white-space: normal; height: auto; min-height: 46px; padding: 8px 16px; text-align: center; }
.rep-estado { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 16px; font-size: 13.5px; color: var(--suave); }
.fila.apilada > *, .fila.apilada form, .fila.apilada form .btn { flex: 1 1 100%; width: 100%; }
/* Página del repartidor */
body.reparto { padding-bottom: 30px; }
.rep-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.rep-cab img { height: 48px; width: auto; }
.rep-cab b { display: block; font-size: 18px; letter-spacing: -.3px; }
.rep-cab span { font-size: 13px; color: var(--suave); }
@media (max-width: 1099px) { .bnav a { font-size: 10px; } }

.bp-form { flex: none; display: flex; gap: 8px; }
.bp-form input[type=search] { flex: 1; min-width: 0; height: 54px; border-radius: 16px; font-size: 17px; }
.bp-form .btn { flex: none; height: 54px; border-radius: 16px; padding: 0 18px; }

/* Botón de «Nuevo presupuesto» del inicio y buscador de clientes */
button.rapido { display: block; width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }
button.rapido b { display: block; margin-bottom: 8px; color: #fff; font-size: 15px; }
.rapido-campo { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 14px; background: #fff; color: var(--suave); font-size: 16px; }
.inicial { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--acento-suave); color: var(--acento-tinta); font-size: 20px; font-weight: 800; }
.bp-lista .libre { margin-bottom: 12px; }

/* Casilla tipo interruptor dentro de los formularios del panel */
.casilla { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.casilla small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.casilla input:checked + .interruptor { background: var(--acento); }
.casilla input:checked + .interruptor::after { transform: translateX(18px); }
.casilla input:focus-visible + .interruptor { outline: 2px solid var(--tinta); outline-offset: 2px; }

.visto-el { font-size: 13px; font-weight: 600; color: #173e85; }
.visto-el.no { color: var(--suave); font-weight: 400; }

.codigo-auto { margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--fondo); color: var(--suave); font-size: 13.5px; }
.codigo-auto b { color: var(--tinta); }

/* Categorías propias */
.cats-propias { list-style: none; margin: 8px 0 0; padding: 0; }
.cats-propias li { border-top: 1px solid var(--linea); }
.cats-propias summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none; }
.cats-propias summary::-webkit-details-marker { display: none; }
.cats-propias summary span { font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.cats-propias summary::after { content: "Editar"; font-size: 12.5px; font-weight: 700; color: var(--acento-tinta); }
.cats-propias details[open] summary::after { content: "Cerrar"; }
.cats-propias summary b { flex: 1; font-size: 14.5px; }
.cats-propias form { flex-wrap: wrap; padding: 0 0 12px; }
.cats-propias form input { flex: 1 1 100%; }
.cols2 .cats-propias form .btn { flex: 0 0 auto; }

/* ---------- Pagos y cobros ---------- */
.cobro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--fondo); scroll-margin-top: 150px; }
.cobro-cifras { display: flex; gap: 22px; }
.cobro-cifras span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
.cobro-cifras b { font-size: 17px; letter-spacing: -.3px; }
.cobro-cifras .debe b { color: var(--rojo); } .cobro-cifras .ok b { color: var(--acento-tinta); }
.cobro-cifras.tres-c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); }
.pagos-cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pagos-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.pagos-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sombra); }
.pagos-lista b { display: block; font-size: 14.5px; } .pagos-lista span { font-size: 12.5px; color: var(--suave); line-height: 1.35; display: block; }
.btn-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--suave); font-size: 20px; line-height: 1; cursor: pointer; }
.pago-form { margin-top: 16px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.pago-form h3 { margin: 0 0 12px; font-size: 16px; }
.metodos-pill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metodos-pill label { margin: 0; cursor: pointer; }
.metodos-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.metodos-pill span { display: grid; place-items: center; height: 46px; padding: 0 8px; border-radius: 12px; background: var(--fondo); font-size: 13.5px; font-weight: 700; text-align: center; }
.metodos-pill input:checked + span { background: var(--tinta); color: #fff; }
.metodos-pill input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.metodos { list-style: none; margin: 0; padding: 0; }
.metodos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); }
.metodos li:first-child { border-top: 0; }
.metodos b { display: block; font-size: 14.5px; } .metodos small { font-size: 12.5px; color: var(--suave); }
.metodos i { font-style: normal; font-weight: 800; white-space: nowrap; }
.metodos a { color: inherit; text-decoration: none; }
.deudas { list-style: none; margin: 0; padding: 0; }
.deudas li { padding: 14px 0; border-top: 1px solid var(--linea); }
.deudas li:first-child { border-top: 0; padding-top: 4px; }
.deu-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.deu-cab b { display: block; font-size: 15px; line-height: 1.25; } .deu-cab span { font-size: 12.5px; color: var(--suave); }
.deu-cab strong { font-size: 17px; white-space: nowrap; }
.deu-plazo { margin: 6px 0 10px; font-size: 13px; font-weight: 600; color: var(--suave); }
.deudas .vencida .deu-plazo, .deudas .vencida strong { color: var(--rojo); }
.deu-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.avisos-pie a { color: var(--acento-tinta); font-weight: 700; }

/* Cobro al cliente y pagos por confirmar */
.cobro-aviso { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; color: #7a5200; }
.cobro-aviso.gris { color: var(--suave); font-weight: 400; }
.pago-aviso { margin-top: 12px; padding: 16px; border-radius: 18px; background: #fff8e1; border: 1.5px solid #f0d58a; }
.pago-aviso > b { display: block; font-size: 15.5px; }
.pago-aviso > span { display: block; margin: 4px 0 10px; font-size: 13.5px; color: #5e4a12; }
.captura-mini { display: block; position: relative; max-width: 220px; margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid #e3d3a0; }
.captura-mini img { display: block; width: 100%; max-height: 260px; object-fit: cover; object-position: top; }
.captura-mini em { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; background: rgba(18, 20, 28, .72); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; text-align: center; }
.pago-conf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pago-conf label { grid-column: 1 / -1; margin: 0; }
.pago-conf input { margin-top: 5px; }
.pago-conf .btn { height: 48px; padding: 0 10px; }
.por-confirmar { border: 1.5px solid #f0d58a; background: #fffdf5; }
.por-confirmar .metodos li { flex-wrap: wrap; }
.datos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.datos-grid textarea { min-height: 104px; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 640px) { .datos-grid { grid-template-columns: 1fr; } }
/* Dentro de la hoja de pagos nada se encoge: es una columna con desplazamiento. */
.pagos-cuerpo > * { flex: none; }
#enviarCobro { min-height: 52px; white-space: normal; text-align: center; }