/* ============================================
   PLATIIS — Panel admin, tema "Amanecer en los Andes" (vidrio)
   Se carga DESPUÉS de admin.css y solo cambia la apariencia: colores, vidrio y fondo.
   Concepto: un paisaje de montañas al amanecer pintado en canvas (admin-fondo.js) detrás de todo;
   la barra, el menú y las tarjetas son vidrio esmerilado; las listas largas, vidrio más opaco para leer.
   Un solo tema oscuro a propósito (el vidrio sobre el paisaje necesita texto claro).
   ============================================ */

:root {
  color-scheme: dark;
  /* Base */
  --bg: #0D1A20;                         /* fondo sólido cuando el paisaje está apagado */
  --ink: #FFFFFF;                        /* blanco puro y nítido (Juan, 27-oct, 11:30 p. m.) */
  --ink2: rgba(255, 255, 255, .86);
  --ink3: rgba(255, 255, 255, .70);
  --sep: rgba(255, 255, 255, .12);
  --fill: rgba(255, 255, 255, .08);
  --card: rgba(255, 255, 255, .10);
  /* Acento Platiis y estados */
  --green: #10C88D;
  --green-hover: #22D9A0;
  --green-ink: #6EF0C2;
  --green-bg: rgba(16, 200, 141, .20);
  --red: #FF7468;
  --red-bg: rgba(255, 116, 104, .18);
  --amber: #FFC56B;
  --amber-bg: rgba(255, 197, 107, .16);
  /* Vidrio */
  /* Vidrio de verdad: transparente (casi sin desenfoque), que dobla un poco lo de atrás como un lente,
     con canto grueso que brilla y reflejos de luz. El texto se lee por su sombra, no por un tinte. */
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .05) 100%);
  --glass-deep: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .04) 100%),
                linear-gradient(rgba(8, 20, 28, .07), rgba(8, 20, 28, .07));
  --glass-bar: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
  --glass-edge: rgba(255, 255, 255, .34);
  --glass-blur: blur(1.2px) saturate(150%) brightness(1.06);          /* respaldo: Safari y Firefox */
  --glass-lente: url(#lente) blur(.6px) saturate(155%) brightness(1.07);  /* Chrome y Edge: con refracción */
  --texto-sobre-vidrio: 0 1px 1px rgba(0, 18, 36, .55), 0 0 1px rgba(0, 18, 36, .35);   /* sombra corta y nítida: define el borde de la letra sin empañarla */
  --ring-hole: #24414A;
  --shadow: 0 22px 44px rgba(2, 10, 14, .32),
            inset 2px 2px 1px -1px rgba(255, 255, 255, .55), inset -2px -2px 1px -1px rgba(255, 255, 255, .22),
            inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 22px rgba(255, 255, 255, .07);
  --r: 24px;
}

/* Letra más delgada (Juan, 27-oct): Poppins 300 para el texto, 400 para lo que antes era negrita media, 500 para títulos */
@font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-300.woff') format('woff'); font-weight: 300; font-display: swap; }
body { font-weight: 300; }
h1, .d-name, .hero-dec, .tile strong, .metric strong, #v-metricas .m-sec b { font-weight: 500; }
.q-name, .row-title, .tab, .btn, .link, .seg button, .pill, .chip, .kv strong, .row-val strong, .switch, .st-b b, .q-time { font-weight: 400; }
.hero-k, .step-t, .sub-t, .metric span, .tile span { font-weight: 400; }

html { background: var(--bg); }
body { background: transparent; color: var(--ink); }

/* ---------- Fondo: paisaje + velo ---------- */
#paisaje { position: fixed; inset: 0; z-index: -2; background: var(--bg) url(assets/fondo-playa.jpg) center 35% / cover no-repeat; }
@media (max-width: 860px) { #paisaje { background-image: url(assets/fondo-playa-movil.jpg); background-position: 18% 40%; } }
.velo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 22, 44, .34) 0%, rgba(4, 22, 44, .16) 50%, rgba(4, 22, 44, .30) 100%); }   /* la foto es de día: un velo azul suave para que el texto blanco se lea */
html.sin-fondo #paisaje, html.sin-fondo .velo { display: none; }
html.sin-fondo { background: radial-gradient(120% 90% at 70% 0%, #16323A 0%, var(--bg) 60%) fixed; }

/* Títulos y notas que quedan directamente sobre el paisaje */
.page-head h1, .queue-head h1, .d-name { text-shadow: 0 1px 2px rgba(0, 18, 36, .55); }
.note, .grp-t, .d-sub { text-shadow: 0 1px 1px rgba(0, 18, 36, .6); }
.hero, .tile, .group, .q-item.sel, .queue, .actions, .bar, .seg { text-shadow: var(--texto-sobre-vidrio); }

/* ---------- Vidrio: superficies principales ---------- */
.hero, .tile, .group, .queue, .seg, .actions, .savebar, .bar {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@supports (backdrop-filter: url(#lente)) {
  .hero, .tile, .group, .queue, .seg, .actions, .savebar, .bar { backdrop-filter: var(--glass-lente); }
}
.hero, .tile { background: var(--glass); border: 0; box-shadow: var(--shadow); position: relative; }
.group { background: var(--glass-deep); border: 0; box-shadow: var(--shadow); position: relative; }
/* Canto del vidrio: borde que brilla fuerte arriba a la izquierda y abajo a la derecha, y casi desaparece en el medio */
.hero::after, .tile::after, .group::after, .savebar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .18) 22%, rgba(255, 255, 255, .04) 50%,
                              rgba(255, 255, 255, .14) 78%, rgba(255, 255, 255, .55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.savebar { position: fixed; }
/* Reflejo de luz en la esquina superior, como un vidrio de verdad */
.hero::before, .tile::before, .group::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    /* dos franjas de reflejo en diagonal, como la luz de una ventana sobre el vidrio */
    linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .13) 24%, rgba(255, 255, 255, 0) 31%,
                            rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .07) 62%, rgba(255, 255, 255, 0) 67%),
    radial-gradient(70% 60% at 6% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 50%);
}
.hero > *, .tile > *, .group > * { position: relative; }
.queue { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
  border-right: 1px solid var(--glass-edge); }
.q-item:hover { background: rgba(255, 255, 255, .08); }
.q-item.sel { background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px var(--glass-edge), 0 8px 24px rgba(0, 0, 0, .18); }
.row-btn:hover { background: rgba(255, 255, 255, .07); }
.row { border-top-color: rgba(255, 255, 255, .14); }
.metric { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .26); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45); border-radius: 16px; }

/* Barra superior */
.tab { color: var(--ink2); }
.tab:hover, .tab.active { color: var(--ink); }
.icon-btn { color: var(--ink2); }
.icon-btn:hover { color: var(--ink); }
.bar { background: var(--glass-bar); border-bottom: 1px solid var(--sep); }
.avatar { background: rgba(255, 255, 255, .14); }
.icon-btn .dot { box-shadow: 0 0 0 2px rgba(6, 16, 22, .9); }

/* Controles */
.seg { background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid var(--glass-edge); }
.seg button.on { background: rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(0, 0, 0, .2); }
.btn.ghost:hover { background: rgba(255, 255, 255, .16); }
.btn.danger:hover { background: rgba(255, 116, 104, .28); }
select, .field { background: rgba(255, 255, 255, .08); border-color: var(--glass-edge); }
.search { background: rgba(255, 255, 255, .10); color: var(--ink); border: 1px solid var(--glass-edge); }
.search::placeholder { color: var(--ink3); }
.pbar { background: rgba(255, 255, 255, .14); }
.ring { background: conic-gradient(var(--c, var(--green)) calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); }
.ring::after { background: var(--ring-hole); }
.switch i { background: rgba(255, 255, 255, .22); }
.actions { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)), linear-gradient(rgba(8, 20, 26, .16), rgba(8, 20, 26, .16)); border-top: 1px solid var(--glass-edge); }
.savebar { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); color: var(--ink); }

/* Mensajes, flujos y textos */
.tipo.cobranza { background: var(--amber-bg); }
.chip:hover { background: rgba(16, 200, 141, .30); }
.prev { background: rgba(255, 255, 255, .06); }
.bub.wa { background: #D9FDD3; color: #111B21; }      /* así se ve en WhatsApp */
.bub.mail { background: #FFFFFF; color: #1D1D1F; }
.bub.mail p { color: #55555A; }
.st.ia .st-i { background: rgba(170, 150, 255, .22); }
.st.humano .st-i, .st.alerta .st-i { background: var(--amber-bg); }
.set-err.warn { color: var(--amber); }
.tx-item { border-top-color: var(--sep); }
.tx-id { color: var(--ink3); }

/* Métricas: el borde verde se queda, el relleno pasa a vidrio verde */
#v-metricas .tile { background: rgba(16, 200, 141, .10); border: 1.5px solid rgba(16, 200, 141, .70); box-shadow: var(--shadow); }
#v-metricas .tile.pend { background: var(--glass); border-color: rgba(16, 200, 141, .45); box-shadow: none; }

/* Botón para apagar o prender el paisaje */
.icon-btn.fondo svg { width: 20px; height: 20px; }
.icon-btn.fondo[aria-pressed="false"] { color: rgba(255, 255, 255, .45); }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .bar { background: rgba(6, 16, 22, .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabs { background: rgba(8, 20, 26, .74); border-top: 1px solid var(--sep); }
  .tab { color: var(--ink3); }
  .tab.active { color: var(--green-ink); }
  .queue { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-head .law { white-space: normal; height: auto; min-height: 28px; padding-block: 4px; }   /* el aviso de horario no se corta */
}

/* Sin desenfoque disponible, o si la persona pidió menos transparencia: superficies sólidas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero, .tile, .group, .queue, .seg, .actions, .savebar { background: rgba(16, 32, 38, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .hero, .tile, .group, .queue, .seg, .actions, .savebar, .bar { background: #142A31; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Chips, etiquetas e íconos de estado: llevan un fondo oscuro debajo del color para que se lean
   aunque detrás pase la parte más clara del amanecer */
.chip, .pill, .row-ico, .bin, .chip.no, .pill.warn, .pill.late, .pill.red, .pill.gray,
.row-ico.g, .row-ico.r, .row-ico.a, .bin.b1, .bin.b0 { background-color: rgba(8, 20, 26, .55); }
.chip { background-image: linear-gradient(var(--green-bg), var(--green-bg)); }
.chip.no, .pill.late, .pill.red, .row-ico.r, .bin.b0 { background-image: linear-gradient(var(--red-bg), var(--red-bg)); }
.pill { background-image: linear-gradient(var(--green-bg), var(--green-bg)); }
.pill.warn, .row-ico.a { background-image: linear-gradient(var(--amber-bg), var(--amber-bg)); }
.pill.gray, .row-ico { background-image: linear-gradient(var(--fill), var(--fill)); }
.row-ico.g, .bin.b1 { background-image: linear-gradient(var(--green-bg), var(--green-bg)); }

/* Con la foto de día: la lista de pendientes y la barra de acciones llevan un tinte azul para leerse
   sobre las nubes y la arena; los botones, un fondo propio para no perderse */
.queue { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)), linear-gradient(rgba(4, 22, 44, .38), rgba(4, 22, 44, .38)); }
.actions { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)), linear-gradient(rgba(4, 22, 44, .50), rgba(4, 22, 44, .50)); }
.btn.ghost { background: rgba(255, 255, 255, .20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn.ghost:hover { background: rgba(255, 255, 255, .30); }
.btn.danger { background: linear-gradient(rgba(255, 116, 104, .32), rgba(255, 116, 104, .32)), rgba(40, 8, 10, .45); color: #FFD3CF; box-shadow: inset 0 0 0 1px rgba(255, 140, 130, .45); }
.btn.danger:hover { background: linear-gradient(rgba(255, 116, 104, .45), rgba(255, 116, 104, .45)), rgba(40, 8, 10, .45); }
.btn.primary:disabled { background: rgba(255, 255, 255, .14); color: rgba(240, 245, 243, .70); }

/* ============================================
   2-nov-2026 (Juan): TODO el vidrio pasa a ESMERILADO, transparente y SIN COLOR.
   El fondo (playa + velo) se conserva. Se quita el lente que doblaba la imagen
   y los tintes azules/verdes de las superficies; queda un vidrio blanco neutro
   con desenfoque fuerte, canto de luz y sombra suave.
   ============================================ */
:root {
  --frost: rgba(255, 255, 255, .14);
  --frost-deep: rgba(255, 255, 255, .18);
  --frost-blur: blur(22px) saturate(120%);
  --glass: var(--frost);
  --glass-deep: var(--frost-deep);
  --glass-bar: rgba(255, 255, 255, .12);
  --glass-blur: var(--frost-blur);
  --glass-lente: var(--frost-blur);
}
.hero, .tile, .group, .queue, .seg, .actions, .savebar, .bar, .metric, .q-item.sel, .search, select, .field, .btn.ghost {
  -webkit-backdrop-filter: var(--frost-blur) !important; backdrop-filter: var(--frost-blur) !important;
}
.hero, .tile, .savebar { background: var(--frost); }
.group { background: var(--frost-deep); }
.hero::before, .tile::before, .group::before { background: radial-gradient(70% 60% at 6% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%); }
.queue { background: rgba(255, 255, 255, .10); }
.actions { background: rgba(255, 255, 255, .14); }
.bar { background: rgba(255, 255, 255, .12); }
.metric { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .30); }
.q-item.sel { background: rgba(255, 255, 255, .22); }
.seg { background: rgba(255, 255, 255, .12); }
#v-metricas .tile, #v-metricas .tile.pend { background: var(--frost); border: 1px solid rgba(255, 255, 255, .30); }
.chip, .pill, .row-ico, .bin { background-color: rgba(255, 255, 255, .12); }
.btn.ghost { background: rgba(255, 255, 255, .18); }
.btn.danger { background: rgba(255, 255, 255, .16); color: #FFD3CF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30); }
@media (max-width: 860px) {
  .bar { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
  .tabs { background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
  .queue { -webkit-backdrop-filter: var(--frost-blur) !important; backdrop-filter: var(--frost-blur) !important; }
}
/* 2-nov-2026 (Juan): la franja de arriba (Solicitudes, Cartera, Clientes...) va en NEGRO sólido */
.bar, .bar.bar { background: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }