/* Interfaz Asocaleta (2026-10-04): iOS 27 + One UI 9.
 *
 * Capa encima del estilo de cada pantalla: si se quita el <link>, la pantalla
 * vuelve a como estaba. Todo va bajo html.ui27 (lo pone ui-asocaleta.js).
 *
 * De Apple (iOS 26/27, Liquid Glass ya corregido en el 27):
 *   - el vidrio solo en lo que flota (menú, barra de arriba, barra de abajo);
 *     el contenido va sobre superficies sólidas, que se leen mejor;
 *   - título grande que se encoge al bajar; botones en cápsula; esquinas que
 *     encajan unas dentro de otras; texto secundario por opacidad, no por color.
 * De Samsung (One UI 7-9):
 *   - arriba se mira, abajo se toca: en el teléfono la navegación va en una
 *     barra abajo, al alcance del pulgar, y el menú completo sale desde abajo;
 *   - tarjetas grandes y redondas, poco color, mucho aire.
 * Para no cansar la vista (las dos marcas coinciden):
 *   - oscuro que no es negro puro y texto que no es blanco puro;
 *   - colores menos saturados en el modo oscuro (vibran menos);
 *   - color solo cuando dice algo: rojo de la marca para lo activo y lo que se
 *     borra, verde para confirmar; lo demás en grises con un toque de tinta;
 *   - pocos pesos de letra (400/500/600/700) y una escala fija de tamaños.
 */

/* ---------- colores ---------- */
html.ui27 body {
  --u-bg: #0c0d10;
  --u-card: #16171b;
  --u-card-2: #1d1e23;
  --u-fill: rgba(118, 118, 128, .2);
  --u-fill-2: rgba(118, 118, 128, .12);
  --u-sep: rgba(255, 255, 255, .075);
  --u-text: #ececf1;
  --u-text-2: rgba(235, 235, 245, .62);
  --u-text-3: rgba(235, 235, 245, .36);
  --u-accent: #e5484d;
  --u-accent-tint: rgba(229, 72, 77, .15);
  --u-blue: #8bacff;
  --u-blue-tint: rgba(110, 146, 245, .17);
  --u-blue-solid: #3d6be0;
  --u-green: #2f8f5b;
  --u-green-text: #5fc98f;
  --u-green-tint: rgba(76, 195, 138, .15);
  --u-orange: #f0a83a;
  --u-orange-tint: rgba(240, 168, 58, .15);
  --u-glass: rgba(24, 25, 30, .72);
  --u-glass-line: rgba(255, 255, 255, .09);
  --u-sombra: 0 12px 34px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2);
  --u-sombra-card: none;
  /* lo que ya usaba la pantalla, apuntando a lo nuevo */
  --bg: var(--u-bg); --card-bg: var(--u-card); --card-border: var(--u-sep);
  --glass: var(--u-fill-2); --glass-border: var(--u-sep);
  --text: var(--u-text); --text-muted: var(--u-text-2);
  --inner-bg: var(--u-fill-2); --inner-border: var(--u-sep); --inner-text: var(--u-text);
  --modal-bg: var(--u-card); --sidebar: var(--u-glass); --panel: var(--u-card);
  --accent: var(--u-accent);
  --green: var(--u-green-text); --orange: var(--u-orange); --red: #ef6b70; --blue: var(--u-blue);
  background: var(--u-bg);
  color: var(--u-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
}
html.ui27 body.tema-claro, html.ui27[data-pag="presidente"] body.claro {
  --u-bg: #f2f2f7;
  --u-card: #ffffff;
  --u-card-2: #f7f7fa;
  --u-fill: rgba(118, 118, 128, .14);
  --u-fill-2: rgba(118, 118, 128, .08);
  --u-sep: rgba(60, 60, 67, .12);
  --u-text: #1c1c1e;
  --u-text-2: rgba(60, 60, 67, .64);
  --u-text-3: rgba(60, 60, 67, .38);
  --u-accent: #c1121f;
  --u-accent-tint: rgba(193, 18, 31, .09);
  --u-blue: #2d5bd1;
  --u-blue-tint: rgba(45, 91, 209, .1);
  --u-blue-solid: #2d5bd1;
  --u-green: #1f8a55;
  --u-green-text: #1b7a4b;
  --u-green-tint: rgba(31, 138, 85, .1);
  --u-orange: #b26b00;
  --u-orange-tint: rgba(214, 133, 0, .12);
  --u-glass: rgba(255, 255, 255, .72);
  --u-glass-line: rgba(0, 0, 0, .06);
  --u-sombra: 0 12px 34px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .05);
  --u-sombra-card: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .04);
  --red: #c42b33;
}
/* adornos que ya no van: brillo de fondo, franja de colores, resplandor del nombre */
html.ui27 body::before, html.ui27 .top-accent { display: none !important; }
html.ui27 ::selection { background: var(--u-blue-tint); }

/* ---------- vidrio (solo lo que flota) ---------- */
html.ui27 .u-vidrio {
  background: var(--u-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--u-glass-line);
  box-shadow: var(--u-sombra);
}

/* ---------- menú lateral (PC): panel de vidrio flotante ---------- */
@media (min-width: 851px) {
  html.ui27 .sidebar {
    /* env(): la franja de la hora y la de los botones del teléfono (app de
       borde a borde, Fold abierto, iPhone en la pantalla de inicio); en la PC es 0 */
    margin: calc(12px + env(safe-area-inset-top, 0px)) 0 calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    width: 252px; min-width: 252px; max-width: 252px; box-sizing: border-box;
    border-radius: 26px; padding: 14px 10px 18px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--u-glass);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--u-glass-line); box-shadow: var(--u-sombra);
    scrollbar-width: thin; scrollbar-color: var(--u-fill) transparent;
  }
}
html.ui27 .sidebar h2 {
  display: flex; align-items: center; gap: 10px; text-align: left;
  margin: 2px 6px 2px; padding: 4px 6px; font-size: 17px; font-weight: 700;
  letter-spacing: .02em; color: var(--u-text) !important; text-shadow: none;
}
html.ui27 .sidebar h2::before {
  content: ""; width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: url(/icon2/apple-touch-icon-180.png) center/cover no-repeat;
  box-shadow: 0 0 0 .5px var(--u-sep);
}
html.ui27 #etiqueta-usuario { text-align: left !important; color: var(--u-text-2) !important; font-size: 12.5px !important; margin: 0 12px 6px !important; }
html.ui27 .nav-section {
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--u-text-3); opacity: 1; padding: 16px 12px 5px;
}
html.ui27 .nav-divider { display: none; }
html.ui27 .tab-btn, html.ui27 .menu-config {
  display: flex; align-items: center; gap: 11px; width: 100%; max-width: 100%;
  margin: 1px 0; padding: 9px 12px; min-height: 40px; box-sizing: border-box;
  border: none; border-radius: 12px; background: transparent; box-shadow: none;
  color: var(--u-text); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; text-align: left;
  transform: none !important;
  transition: background-color .2s ease, color .2s ease;
}
html.ui27 .menu-config { justify-content: space-between; }
html.ui27 .menu-config > span:first-child { display: inline-flex; align-items: center; gap: 11px; }
html.ui27 .tab-btn:hover, html.ui27 .menu-config:hover { background: var(--u-fill-2); color: var(--u-text); }
html.ui27 .tab-btn.activa {
  background: var(--u-accent-tint); color: var(--u-accent); font-weight: 600;
  box-shadow: none; border: none;
}
html.ui27 .tab-btn .navic, html.ui27 .menu-config .navic { width: 19px; height: 19px; margin: 0; opacity: 1; color: var(--u-text-2); vertical-align: middle; }
html.ui27 .tab-btn .ic { display: inline-flex; transform: none !important; }
html.ui27 .tab-btn.activa .navic { color: var(--u-accent); }
html.ui27 .sub-menu { margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--u-sep); }
html.ui27 .sub-menu .tab-btn { margin: 1px 0; padding: 8px 10px; min-height: 36px; font-size: 13.5px; }
html.ui27 .sidebar > div[style*="border-top"] { border-top: 1px solid var(--u-sep) !important; margin: 10px 4px 0 !important; padding-top: 8px !important; }
html.ui27 .tab-btn[onclick*="cerrarSesion"] { color: var(--u-accent) !important; }
html.ui27 .tab-btn[onclick*="cerrarSesion"] .navic { color: var(--u-accent); }

/* ---------- encabezado: título grande que se encoge al bajar ---------- */
html.ui27 .header-top {
  padding: calc(22px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) 12px 32px; align-items: flex-end; gap: 16px;
  transition: padding .35s cubic-bezier(.32,.72,0,1), background-color .25s ease, box-shadow .25s ease;
}
html.ui27 #titulo-seccion {
  font-size: 32px !important; font-weight: 700 !important; letter-spacing: -.025em; line-height: 1.12;
  color: var(--u-text) !important;
  transition: font-size .35s cubic-bezier(.32,.72,0,1);
}
html.ui27 .header-top.u-compacto { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; box-shadow: 0 1px 0 var(--u-sep); }
html.ui27 .header-top.u-compacto #titulo-seccion { font-size: 20px !important; }
html.ui27 .btn-ir-secretaria {
  height: 36px; padding: 0 14px; border-radius: 999px; border: none;
  background: var(--u-fill-2); color: var(--u-text); font-size: 13.5px; font-weight: 600; box-shadow: none;
}
html.ui27 .btn-ir-secretaria:hover { background: var(--u-fill); border: none; transform: none; }
html.ui27 .btn-ir-secretaria .bis-ic { color: var(--u-accent); }
html.ui27 .stats-header {
  background: var(--u-card); border: 1px solid var(--u-sep); box-shadow: var(--u-sombra-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 999px; padding: 7px 18px; gap: 20px; font-size: 12.5px; font-weight: 500; color: var(--u-text-2);
}
html.ui27 .stats-header span { color: var(--u-text); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 6px; }
html.ui27 .btn-tema-flotante, html.ui27 .btn-tema-top {
  width: 36px; height: 36px; border-radius: 50%; border: none; box-shadow: none;
  background: var(--u-fill-2); color: var(--u-text);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ui27 .btn-tema-flotante { top: calc(24px + env(safe-area-inset-top, 0px)); right: calc(30px + env(safe-area-inset-right, 0px)); }

/* ---------- contenido y tarjetas ---------- */
html.ui27 .contenido { padding: 6px calc(32px + env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) 32px; scrollbar-width: thin; scrollbar-color: var(--u-fill) transparent; }
html.ui27 .tab-btn:focus-visible, html.ui27 .menu-config:focus-visible, html.ui27 button:focus-visible { outline: 2px solid var(--u-blue); outline-offset: 2px; }
html.ui27 .caja {
  background: var(--u-card); border: 1px solid var(--u-sep) !important;
  border-radius: 22px; padding: 20px 22px; box-shadow: var(--u-sombra-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ui27 body.tema-claro .caja { border-color: transparent !important; }
html.ui27 .caja:hover { border-color: var(--u-sep) !important; box-shadow: var(--u-sombra-card); }
html.ui27 body.tema-claro .caja:hover { border-color: transparent !important; }
@supports (corner-shape: squircle) {
  /* esquina continua (como la de Apple) donde el navegador la sabe dibujar */
  html.ui27 .caja { corner-shape: squircle; border-radius: 34px; }
  html.ui27 .sidebar { corner-shape: squircle; }
}
html.ui27 h3, html.ui27 .caja h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 14px; color: var(--u-text) !important; }
html.ui27 h4 { font-weight: 600; letter-spacing: -.01em; }
html.ui27 .uic { opacity: 1; color: var(--u-text-2); }
html.ui27 .caja h3 .uic svg { width: 17px; height: 17px; }
html.ui27 .info-btn { border-color: var(--u-text-3); color: var(--u-text-2); }
html.ui27 .info-texto { color: var(--u-text-2); }
html.ui27 .label, html.ui27 .nu-l, html.ui27 .cc-campo { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--u-text-2); }

/* ---------- pestañas de dentro: control segmentado (iOS) ---------- */
html.ui27 .subtabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 18px; max-width: 100%; box-sizing: border-box;
  background: var(--u-fill-2); border: none; border-radius: 999px;
  /* muchas pestañas (el Operativo tiene 9): una sola fila que se desliza, no dos */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html.ui27 .subtabs::-webkit-scrollbar { display: none; }
html.ui27 .subtab {
  flex: none; white-space: nowrap; min-height: 34px; padding: 7px 18px; border: none; border-radius: 999px; background: transparent;
  color: var(--u-text-2); font-size: 13.5px; font-weight: 600; box-shadow: none;
  transition: background-color .25s ease, color .2s ease, box-shadow .25s ease;
}
html.ui27 .subtab:hover { background: transparent; color: var(--u-text); }
html.ui27 .subtab.activa { background: var(--u-card-2); color: var(--u-text); border: none; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px var(--u-sep); }
html.ui27 body.tema-claro .subtab.activa { background: var(--u-card); box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04); }
@media (max-width: 700px) {
  html.ui27 .subtabs { display: grid; width: 100%; border-radius: 16px; padding: 3px; gap: 3px; overflow: visible; }
  html.ui27 .subtab { border-radius: 13px; min-height: 44px; padding: 8px 10px; background: transparent; border: none; white-space: normal; }
  html.ui27 .subtab.activa { color: var(--u-text); }
  html.ui27 .subtab.activa .op-badge { background: var(--u-accent); color: #fff; border-color: var(--u-bg); }
}

/* ---------- campos ---------- */
html.ui27 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.ui27 select, html.ui27 textarea {
  background: var(--u-fill-2); border: 1px solid transparent; border-radius: 12px;
  min-height: 44px; padding: 11px 14px; font-size: 15px; color: var(--u-text);
  box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
html.ui27 textarea { min-height: 88px; }
html.ui27 input::placeholder, html.ui27 textarea::placeholder { color: var(--u-text-3); }
html.ui27 input:focus, html.ui27 select:focus, html.ui27 textarea:focus {
  outline: none; background: var(--u-fill-2); border-color: var(--u-blue);
  box-shadow: 0 0 0 4px var(--u-blue-tint);
}
html.ui27 body.tema-claro input:not([type="checkbox"]):not([type="radio"]), html.ui27 body.tema-claro select { background: var(--u-fill-2); border-color: transparent; }
html.ui27 body.tema-claro input:focus, html.ui27 body.tema-claro select:focus { background: var(--u-card); border-color: var(--u-blue); }
html.ui27 input[type="checkbox"], html.ui27 input[type="radio"] { accent-color: var(--u-green); }
html.ui27 .aso-campo { background: var(--u-fill-2); border-color: transparent; border-radius: 12px; min-height: 44px; color: var(--u-text); font-family: inherit !important; }
html.ui27 .aso-campo.abierto, html.ui27 .aso-campo:focus-visible { border-color: var(--u-blue); box-shadow: 0 0 0 4px var(--u-blue-tint); }
html.ui27 .aso-seg button { border-radius: 999px; border-color: transparent; background: var(--u-fill-2); color: var(--u-text); font-weight: 600; }
html.ui27 .aso-seg button.on { background: var(--u-text); border-color: var(--u-text); color: var(--u-card); }

/* ---------- botones: cápsula, color solo si dice algo ---------- */
html.ui27 button { letter-spacing: -.005em; }
html.ui27 .btn-azul, html.ui27 .btn-dorado, html.ui27 .btn-verde, html.ui27 .btn-rojo,
html.ui27 .btn-oscuro, html.ui27 .btn-gris, html.ui27 .btn-orange {
  border-radius: 999px; min-height: 44px; font-size: 14.5px; font-weight: 600;
  box-shadow: none !important; border: none; transform: none;
  transition: background-color .2s ease, filter .2s ease, scale .3s cubic-bezier(.34,1.56,.64,1);
}
html.ui27 .btn-verde { background: var(--u-green) !important; color: #fff !important; }
html.ui27 .btn-azul, html.ui27 .btn-dorado { background: var(--u-blue-tint) !important; color: var(--u-blue) !important; }
html.ui27 .btn-oscuro, html.ui27 .btn-gris { background: var(--u-fill) !important; color: var(--u-text) !important; }
html.ui27 .btn-rojo { background: var(--u-accent-tint) !important; color: var(--u-accent) !important; }
html.ui27 .btn-orange { background: var(--u-orange-tint) !important; color: var(--u-orange) !important; }
html.ui27 .btn-azul:hover, html.ui27 .btn-dorado:hover, html.ui27 .btn-oscuro:hover, html.ui27 .btn-gris:hover,
html.ui27 .btn-rojo:hover, html.ui27 .btn-orange:hover, html.ui27 .btn-verde:hover { filter: brightness(1.08); transform: none; box-shadow: none; }
html.ui27 body.tema-claro .btn-azul:hover, html.ui27 body.tema-claro .btn-oscuro:hover, html.ui27 body.tema-claro .btn-rojo:hover { filter: brightness(.96); }
html.ui27 button:disabled { opacity: .45; filter: none; }
/* la acción principal de la pantalla: llena (como el botón azul de iOS) */
html.ui27 button[onclick="despachar()"], html.ui27 button[onclick^="despacharArdil()"], html.ui27 .u-primario {
  background: var(--u-blue-solid) !important; color: #fff !important;
}
html.ui27 .btn-ajustes-ardil { background: var(--u-fill-2); color: var(--u-text-2); border: none; box-shadow: none; }
html.ui27 .btn-ajustes-ardil[aria-pressed="true"] { background: var(--u-accent-tint); color: var(--u-accent); }
/* ---------- al pasar el mouse: se levanta un poco (como "-- Seleccionar --") ---------- */
/* Solo con mouse (en el teléfono no hay "pasar por encima"). Botones, listas,
   secciones que se abren y tarjetas de opción. Con resorte, sin exagerar. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ui27 :is(.btn-azul, .btn-dorado, .btn-verde, .btn-rojo, .btn-oscuro, .btn-gris, .btn-orange, .aso-campo, .btn-ir-secretaria,
      .btn, .btn-ghost, button.accion, .bk-btn, .tbtn, .rnc-btn, .cant-chips button, .aso-seg button,
      details.sec > summary, details.conduces-dia > summary, .mini-cierre-bar button, .btn-logout) {
    transition: translate .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background-color .2s ease, filter .2s ease, color .2s ease;
  }
  html.ui27 :is(.btn-azul, .btn-dorado, .btn-verde, .btn-rojo, .btn-oscuro, .btn-gris, .btn-orange, .aso-campo, .btn-ir-secretaria,
      .btn, .btn-ghost, button.accion, .bk-btn, .tbtn, .rnc-btn, .cant-chips button, .aso-seg button,
      details.sec > summary, details.conduces-dia > summary, .mini-cierre-bar button, .btn-logout):hover:not(:disabled) {
    transform: none !important; translate: 0 -2px; box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important;
  }
  html.ui27 body.tema-claro :is(.btn-azul, .btn-dorado, .btn-verde, .btn-rojo, .btn-oscuro, .btn-gris, .btn-orange, .aso-campo, .btn-ir-secretaria,
      .btn, .btn-ghost, button.accion, .bk-btn, .tbtn, .rnc-btn, .cant-chips button, .aso-seg button,
      details.sec > summary, details.conduces-dia > summary, .mini-cierre-bar button, .btn-logout):hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10) !important;
  }
  html.ui27 :is(.btn-azul, .btn-dorado, .btn-verde, .btn-rojo, .btn-oscuro, .btn-gris, .btn-orange, .aso-campo, .btn-ir-secretaria,
      .btn, .btn-ghost, button.accion, .bk-btn, .tbtn, .rnc-btn, .cant-chips button, .aso-seg button,
      details.sec > summary, details.conduces-dia > summary, .mini-cierre-bar button, .btn-logout):active { translate: 0 0; }
  /* filas del menú y de las listas: se aclaran (en iPhone/Mac las filas no se levantan) */
  html.ui27 .lista-clientes li { transition: background-color .2s ease; }
  html.ui27 .lista-clientes li:hover { background: var(--u-fill-2); }
}

/* ---------- cuenta regresiva del despacho y cantidad de furgones (Organización/Secretaría) ---------- */
html.ui27 .reloj-desp { background: var(--u-blue-tint); color: var(--u-blue); }
html.ui27 .reloj-desp.urgente { background: var(--u-accent-tint); color: var(--u-accent); }
html.ui27 .reloj-desp.pausa { background: var(--u-fill-2); color: var(--u-text-2); }
html.ui27 .cant-chips button { background: var(--u-fill-2); border: none; border-radius: 14px; color: var(--u-text); }
html.ui27 .cant-chips button.on { background: var(--u-text); color: var(--u-card); }

/* ---------- listas: filas agrupadas en una tarjeta (Ajustes de iPhone/Galaxy) ---------- */
html.ui27 ul.lista-clientes { background: var(--u-card-2); border-radius: 16px; padding: 0 14px; }
html.ui27 body.tema-claro ul.lista-clientes { background: var(--u-card); }
html.ui27 ul.lista-clientes:empty { display: none; }
html.ui27 .lista-clientes li {
  background: transparent; border: none; border-radius: 0; margin: 0; padding: 12px 2px; gap: 12px;
  border-bottom: 1px solid var(--u-sep); min-height: 56px; box-sizing: border-box;
}
html.ui27 .lista-clientes li:last-child { border-bottom: none; }
html.ui27 .lista-clientes li:hover { background: transparent; border-color: var(--u-sep); }
html.ui27 .lista-clientes li > div:first-child { min-width: 0; }
/* fila con nombre arriba, detalle debajo y las acciones a la derecha, todas iguales */
html.ui27 .fila-lista .fl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui27 .fila-lista .fl-txt b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
html.ui27 .fila-lista .fl-txt small { font-size: 13px; color: var(--u-text-2); font-variant-numeric: tabular-nums; }
html.ui27 .lista-clientes li > div:last-child:not(:first-child), html.ui27 .fila-lista .fl-acc { display: flex; gap: 8px; flex: none; align-items: center; }
html.ui27 .lista-clientes li button {
  width: auto !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important;
  padding: 0 10px !important; margin: 0 !important; border-radius: 999px !important; font-size: 12.5px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; line-height: 1 !important;
}
html.ui27 .lista-clientes li button svg, html.ui27 .lista-clientes li button .uic svg { width: 16px; height: 16px; }
html.ui27 .lista-clientes li button .uic { margin: 0; color: inherit; }
/* los botoncitos de las filas */
html.ui27 .lista-clientes li button, html.ui27 .viaje-card button, html.ui27 .tabla-reporte td button {
  border-radius: 999px !important; font-size: 12px !important; padding: 6px 12px !important; min-height: 30px !important;
}

/* ---------- piezas del despacho ---------- */
html.ui27 .mini-cierre-bar {
  background: var(--u-card); border: 1px solid var(--u-sep); box-shadow: var(--u-sombra-card);
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 6px 6px 18px;
}
html.ui27 body.tema-claro .mini-cierre-bar { border-color: transparent; }
html.ui27 .mini-cierre-bar input { background: var(--u-fill-2); min-height: 38px; border-radius: 999px; }
html.ui27 .mini-cierre-bar button { min-height: 38px; box-shadow: none; }
html.ui27 .mini-pizarra { background: var(--u-fill-2); border: none; border-radius: 18px; }
html.ui27 .mini-turno {
  background: var(--u-card-2); color: var(--u-text-3); border: 1px solid transparent;
  border-radius: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
html.ui27 body.tema-claro .mini-turno { background: var(--u-card); color: var(--u-text-3); border-color: transparent; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
html.ui27 body.tema-claro .mini-pizarra { background: var(--u-fill-2); }
html.ui27 .viaje-card { background: var(--u-card-2); border: 1px solid var(--u-sep); border-radius: 16px; }
html.ui27 .acciones-rapidas-movil button { min-height: 40px; }

/* ---------- ventanas y avisos ---------- */
html.ui27 .modal-contenido { background: var(--u-card); border: 1px solid var(--u-sep); border-radius: 28px; box-shadow: var(--u-sombra); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui27 .toast {
  background: var(--u-glass); color: var(--u-text);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--u-glass-line) !important; border-left: 1px solid var(--u-glass-line) !important;
  border-radius: 18px; box-shadow: var(--u-sombra); font-weight: 500; font-size: 14px;
}
html.ui27 details.conduces-dia { background: var(--u-card-2); border-color: var(--u-sep); border-radius: 16px; }
html.ui27 details.conduces-dia summary { background: transparent; font-weight: 600; letter-spacing: -.01em; font-size: 14px; }
html.ui27 details.conduces-dia[open] summary { background: transparent; border-bottom-color: var(--u-sep); }
html.ui27 .tabla-reporte th, html.ui27 table th { color: var(--u-text-2); font-weight: 600; }

/* ---------- barra de abajo (teléfono) ---------- */
html.ui27 .u-tabbar { display: none; }
html.ui27 .u-velo { display: none; }
@media (max-width: 850px) {
  html.ui27 body { padding-bottom: 0; }
  html.ui27 .topbar-movil {
    /* border-box: si no, la franja de la hora se sumaba dos veces (alto +
       relleno) y la barra se comía media pantalla al bajar en el Fold cerrado */
    box-sizing: border-box; height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0;
    background: transparent; border-bottom: 1px solid transparent; gap: 10px;
    pointer-events: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background-color .25s ease, border-color .25s ease;
  }
  html.ui27 body.u-bajo .topbar-movil {
    background: var(--u-glass); border-bottom-color: var(--u-sep);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  }
  html.ui27 .topbar-movil .tb-titulo {
    color: var(--u-text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    transition: opacity .2s ease;
  }
  html.ui27 .topbar-movil button { pointer-events: auto; }
  /* arriba del todo la barra va vacía (sin "Asocaleta"): el nombre de la
     pantalla sale con el título grande y aparece arriba solo al bajar */
  html.ui27 .topbar-movil .tb-titulo { opacity: 0; }
  html.ui27 body.u-bajo .topbar-movil .tb-titulo { opacity: 1; }
  html.ui27 .topbar-movil .tb-user { display: none; }
  html.ui27 body.u-con-tabbar .topbar-movil .ham { visibility: hidden; }
  html.ui27 .main-content { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  /* con la barra de abajo (sin botón de menú arriba) el título grande sube a
     la fila del botón del tema: no se gasta una fila en una barra vacía */
  /* 10 px más pegado a la hora (pedido del usuario); el botón del tema sube
     igual en reposo (ui-asocaleta.js, SUBE) y baja a su sitio al encogerse */
  html.ui27 body.u-con-tabbar .main-content { padding-top: max(0px, calc(env(safe-area-inset-top, 0px) - 6px)); }
  html.ui27 body.u-con-tabbar #titulo-seccion {
    padding-right: 52px; font-size: 28px !important; letter-spacing: -.022em;
    /* lo mueve el dedo (ui-asocaleta.js, morfo): achicarse hacia la izquierda */
    transform-origin: left center; transition: none !important; will-change: translate, scale, opacity;
  }
  html.ui27 body.u-con-tabbar .topbar-movil .btn-tema-top { margin-left: auto; transition: none; }
  /* .header-top es hijo flex con z-index 5 (eso ya lo hace capa aunque sea
     static) y subía la fila de botones por encima del velo: aquí sin capa,
     y solo el título por encima */
  html.ui27 body.u-con-tabbar .header-top { z-index: auto; }
  html.ui27 body.u-con-tabbar #titulo-seccion { position: relative; z-index: 3; }
  /* el vidrio de la barra lo pone el velo (dentro del contenido, debajo del
     título que se achica); la barra queda transparente con sus botones */
  html.ui27 body.u-con-tabbar .u-velo {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
    height: calc(52px + env(safe-area-inset-top, 0px));
    /* más tupido que el vidrio de siempre: lo de abajo pasa justo por detrás del título */
    background: color-mix(in srgb, var(--u-bg) 88%, transparent); border-bottom: 1px solid var(--u-sep);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    opacity: 0;
  }
  html.ui27 body.u-con-tabbar.u-bajo .topbar-movil { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.ui27 body.u-con-tabbar .topbar-movil .tb-titulo {
    position: absolute; left: 18px; right: 64px; top: env(safe-area-inset-top, 0px); height: 52px; line-height: 52px;
    text-align: left; font-size: 17px; font-weight: 700; letter-spacing: -.01em; transition: none;
  }
  html.ui27 .header-top { padding: 6px 18px 12px; align-items: stretch; }
  html.ui27 #titulo-seccion { font-size: 32px !important; }
  html.ui27 .contenido { padding: 4px 16px calc(110px + env(safe-area-inset-bottom, 0px)); }
  html.ui27 .caja { padding: 18px; border-radius: 22px; }
  html.ui27 .u-tabbar {
    display: flex; position: fixed; z-index: 240;
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px; padding: 0 6px; border-radius: 32px; box-sizing: border-box;
    align-items: center; justify-content: space-around;
  }
  html.ui27 .u-tabbar button {
    flex: 1 1 0; min-width: 0; height: 56px; margin: 0; padding: 4px 2px 2px; width: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: none; border-radius: 26px; box-shadow: none;
    color: var(--u-text-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1.1;
    -webkit-tap-highlight-color: transparent; transform: none;
    transition: color .2s ease, background-color .25s ease;
  }
  html.ui27 .u-tabbar button svg { width: 23px; height: 23px; stroke-width: 1.8; }
  html.ui27 .u-tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui27 .u-tabbar button.on { color: var(--u-accent); background: var(--u-accent-tint); }
  html.ui27 body.menu-abierto .u-tabbar { opacity: 0; pointer-events: none; }
  /* menú completo: hoja que sube desde abajo (One UI), no cajón de la izquierda */
  html.ui27[data-pag="organizacion"] .sidebar {
    top: auto !important; bottom: 0; left: 0; right: 0; width: 100% !important; max-width: none !important;
    height: auto !important; max-height: 88dvh !important;
    transform: translateY(105%) !important; border-radius: 28px 28px 0 0; border: none !important;
    background: var(--u-card) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 8px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
    transition: transform .5s cubic-bezier(.32,.72,0,1) !important;
  }
  html.ui27[data-pag="organizacion"] body.menu-abierto .sidebar { transform: translateY(0) !important; }
  html.ui27[data-pag="organizacion"] .sidebar::before {
    content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; margin: 2px auto 8px;
    background: var(--u-text-3); flex: none;
  }
  html.ui27[data-pag="organizacion"] .sidebar h2 { margin-top: 0; }
  /* cada sección es una tarjeta con sus filas separadas por una línea fina
     (las listas agrupadas de Ajustes en iPhone y en Galaxy) */
  html.ui27[data-pag="organizacion"] .sidebar { background: var(--u-bg) !important; }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn, html.ui27[data-pag="organizacion"] .sidebar .menu-config {
    min-height: 50px; font-size: 16px; margin: 0; border-radius: 0; background: var(--u-card); position: relative; overflow: visible;
  }
  html.ui27[data-pag="organizacion"] .sidebar .nav-section { padding: 18px 16px 7px; font-size: 13px; }
  html.ui27[data-pag="organizacion"] .sidebar .nav-section + .tab-btn { border-radius: 16px 16px 0 0; }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn:has(+ .nav-divider), html.ui27 #botones-principales > .tab-btn:last-child { border-radius: 0 0 16px 16px; }
  html.ui27[data-pag="organizacion"] .sidebar .nav-section + .tab-btn:has(+ .nav-divider) { border-radius: 16px; }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn + .tab-btn::before {
    content: ""; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: var(--u-sep); pointer-events: none;
  }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn.activa { background: var(--u-card); color: var(--u-accent); }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn.activa::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--u-accent);
  }
  html.ui27[data-pag="organizacion"] .sidebar .menu-config { border-radius: 16px; }
  html.ui27[data-pag="organizacion"] .sidebar > div[style*="border-top"] { border-top: none !important; margin: 14px 0 0 !important; padding-top: 0 !important; }
  html.ui27[data-pag="organizacion"] .sidebar .sub-menu { margin: 6px 0 0; padding: 0; border: none; }
  html.ui27[data-pag="organizacion"] .sidebar .sub-menu .tab-btn { min-height: 46px; font-size: 15px; padding: 8px 14px; }
  html.ui27[data-pag="organizacion"] .sidebar .sub-menu .tab-btn:first-child { border-radius: 16px 16px 0 0; }
  html.ui27[data-pag="organizacion"] .sidebar .sub-menu .tab-btn:last-child { border-radius: 0 0 16px 16px; }
  html.ui27[data-pag="organizacion"] .sidebar .tab-btn[onclick*="cerrarSesion"] { border-radius: 16px; justify-content: center; }
  html.ui27 .menu-backdrop { background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---------- Apariencia: Claro / Oscuro / Como el teléfono ---------- */
html.ui27 .u-tema-pop {
  position: fixed; z-index: 100020; min-width: 220px; padding: 6px; border-radius: 18px;
  background: var(--u-glass); border: 1px solid var(--u-glass-line); box-shadow: var(--u-sombra);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  transform-origin: top right; animation: u-tema-entra .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes u-tema-entra { from { opacity: 0; scale: .92; } }
html.ui27 .u-tema-tit { font-size: 12px; font-weight: 600; color: var(--u-text-3); padding: 8px 12px 6px; }
html.ui27 .u-tema-pop button {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0 12px; min-height: 44px;
  border: none; border-radius: 12px; background: transparent; color: var(--u-text); box-shadow: none;
  font-size: 15px; font-weight: 500; text-align: left; letter-spacing: -.01em;
}
html.ui27 .u-tema-pop button:hover { background: var(--u-fill-2); transform: none; }
html.ui27 .u-tema-pop button svg { width: 20px; height: 20px; flex: none; color: var(--u-text-2); }
html.ui27 .u-tema-pop button span { flex: 1; }
html.ui27 .u-tema-pop button b { color: var(--u-accent); font-weight: 700; }
html.ui27 .u-tema-pop button.sel svg { color: var(--u-accent); }
@media (prefers-reduced-motion: reduce) { html.ui27 .u-tema-pop { animation: none; } }
/* Cambio de tema con animación (ui-asocaleta.js, aplicar): durante el cambio
   la foto vieja se queda quieta debajo y la nueva la anima el JS (círculo
   desde el botón o fundido). Se anulan los fundidos entre páginas de
   movimiento.css, que si no también se aplicarían aquí. */
html.u-tema-vt::view-transition-old(root),
html.u-tema-vt::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; }
html.u-tema-vt::view-transition-old(root) { z-index: 1; }
html.u-tema-vt::view-transition-new(root) { z-index: 2; }

/* ---------- editor de la barra de abajo ---------- */
html.ui27 .u-editar-barra { display: none; }
@media (max-width: 850px) {
  html.ui27 .u-editar-barra {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 12px 14px; min-height: 50px;
    background: var(--u-blue-tint); color: var(--u-blue); border: none; border-radius: 16px; box-shadow: none;
    font-size: 15px; font-weight: 600; text-align: left;
  }
  html.ui27 .u-editar-barra svg { width: 20px; height: 20px; }
}
html.ui27 .u-editor-capa { position: fixed; inset: 0; z-index: 100010; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .3s ease; }
html.ui27 .u-editor-capa.abierta { opacity: 1; }
html.ui27 .u-editor {
  position: fixed; z-index: 100011; left: 0; right: 0; bottom: 0; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--u-bg); color: var(--u-text); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  transform: translateY(105%); transition: transform .5s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 851px) { html.ui27 .u-editor { left: 50%; right: auto; width: 440px; margin-left: -220px; bottom: 24px; border-radius: 28px; } }
html.ui27 .u-editor.abierta { transform: translateY(0); }
html.ui27 .u-ed-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--u-text-3); margin: 2px auto 10px; flex: none; }
html.ui27 .u-ed-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
html.ui27 .u-ed-cab b { font-size: 17px; font-weight: 600; }
html.ui27 .u-ed-cab button { width: auto; margin: 0; min-height: 36px; padding: 0 14px; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: none; }
html.ui27 .u-ed-txt { background: transparent; color: var(--u-blue); }
html.ui27 .u-ed-listo { background: var(--u-blue-solid); color: #fff; }
html.ui27 .u-ed-ayuda { margin: 10px 2px 12px; font-size: 13.5px; color: var(--u-text-2); line-height: 1.4; flex: none; }
html.ui27 .u-ed-prev {
  display: flex; gap: 4px; padding: 10px 6px 6px; border-radius: 30px; flex: none; overflow: visible;
  background: var(--u-glass); border: 1px solid var(--u-glass-line); box-shadow: var(--u-sombra);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
html.ui27 .u-ed-prev.lleno-aviso { animation: u-temblor .4s ease; }
@keyframes u-temblor { 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
html.ui27 .u-ed-hueco {
  position: relative; flex: 1 1 0; min-width: 0; height: 54px; margin: 0; padding: 4px 2px; width: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; border-radius: 24px; background: transparent; box-shadow: none; color: var(--u-text);
  font-size: 10.5px; font-weight: 600; line-height: 1.1; overflow: visible;
}
html.ui27 .u-ed-hueco svg { width: 22px; height: 22px; }
html.ui27 .u-ed-hueco span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui27 .u-ed-hueco.vacio { border: 1.5px dashed var(--u-text-3); color: var(--u-text-3); }
html.ui27 .u-ed-hueco.menu { color: var(--u-text-3); flex: 0 0 56px; }
html.ui27 .u-ed-hueco.lleno { background: var(--u-fill-2); animation: u-entra .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes u-entra { from { scale: .8; opacity: 0; } }
html.ui27 .u-ed-hueco i {
  position: absolute; top: -4px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--u-accent); color: #fff; font: 700 16px/1 system-ui, sans-serif; font-style: normal;
  display: flex; align-items: center; justify-content: center; padding-bottom: 2px; box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--u-bg);
}
html.ui27 .u-ed-lista { overflow-y: auto; overscroll-behavior: contain; margin: 8px -4px 0; padding: 0 4px 6px; flex: 1; min-height: 0; }
html.ui27 .u-ed-sec { font-size: 13px; font-weight: 600; color: var(--u-text-3); padding: 14px 6px 6px; }
html.ui27 .u-ed-grupo { background: var(--u-card); border-radius: 16px; overflow: hidden; }
html.ui27 .u-ed-fila {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0 14px; min-height: 50px;
  background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--u-text); font-size: 15.5px; font-weight: 500; text-align: left;
}
html.ui27 .u-ed-fila + .u-ed-fila::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: var(--u-sep); }
html.ui27 .u-ed-fila svg { width: 20px; height: 20px; flex: none; color: var(--u-text-2); }
html.ui27 .u-ed-fila span { flex: 1; min-width: 0; }
html.ui27 .u-ed-fila b {
  width: 24px; height: 24px; border-radius: 50%; flex: none; box-sizing: border-box; border: 1.5px solid var(--u-text-3);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff;
}
html.ui27 .u-ed-fila.on b { background: var(--u-accent); border-color: var(--u-accent); }
html.ui27 .u-ed-fila.on svg { color: var(--u-accent); }

/* =====================================================================
   Las demás pantallas (2026-10-04). Lo común (colores, campos, botones,
   listas, avisos) ya les llega de arriba; aquí lo propio de cada una.
   ===================================================================== */
/* piezas que se llaman distinto pero son lo mismo */
html.ui27 .card {
  background: var(--u-card); border: 1px solid var(--u-sep) !important; border-radius: 22px;
  box-shadow: var(--u-sombra-card); -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ui27 body.tema-claro .card { border-color: transparent !important; }
html.ui27 .modal-box { background: var(--u-card) !important; border: 1px solid var(--u-sep); border-radius: 28px !important; box-shadow: var(--u-sombra); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- Secretaría ---------- */
html.ui27[data-pag="secretaria"] body { padding: calc(18px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); }
html.ui27[data-pag="secretaria"] .topbar { margin-bottom: 18px; align-items: flex-end; }
html.ui27[data-pag="secretaria"] .topbar h1 {
  color: var(--u-text); font-size: 32px; font-weight: 700; letter-spacing: -.025em; text-transform: none; line-height: 1.1;
  display: flex; align-items: center; gap: 10px;
}
html.ui27[data-pag="secretaria"] .topbar-right button { min-height: 38px; border-radius: 999px; }
html.ui27[data-pag="secretaria"] .icon-btn, html.ui27[data-pag="secretaria"] .btn-ir-otra {
  width: 38px !important; min-width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; border: none !important; flex: none;
  background: var(--u-fill-2); color: var(--u-text); display: inline-flex; align-items: center; justify-content: center; box-shadow: none;
}
html.ui27[data-pag="secretaria"] .btn-ir-otra .bio-ic, html.ui27[data-pag="secretaria"] .btn-ir-otra .uic { margin: 0; display: inline-flex; }
html.ui27[data-pag="secretaria"] .btn-ir-otra:hover { transform: none; background: var(--u-fill); }
html.ui27[data-pag="secretaria"] .topbar-right .btn-rojo { padding: 0 16px; }
html.ui27[data-pag="secretaria"] .card { padding: 18px 20px; margin-bottom: 14px; }
html.ui27[data-pag="secretaria"] details.sec summary {
  background: var(--u-card); border: 1px solid var(--u-sep); border-radius: 16px; padding: 14px 16px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; box-shadow: var(--u-sombra-card);
}
html.ui27[data-pag="secretaria"] body.tema-claro details.sec summary { border-color: transparent; }
html.ui27[data-pag="secretaria"] details.sec[open] summary { border-radius: 16px 16px 0 0; background: var(--u-card); box-shadow: none; border-bottom: 1px solid var(--u-sep); }
html.ui27[data-pag="secretaria"] details.sec .sec-body { background: var(--u-card); border: 1px solid var(--u-sep); border-top: none; border-radius: 0 0 16px 16px; padding: 16px; }
html.ui27[data-pag="secretaria"] body.tema-claro details.sec .sec-body { border-color: transparent; }
html.ui27[data-pag="secretaria"] .confirm-chip { border-radius: 999px; background: var(--u-fill-2); border-width: 1.5px; font-weight: 700; }
html.ui27[data-pag="secretaria"] .confirm-chip.selected { background: var(--u-green-tint); color: var(--u-green-text); border-color: transparent; }
html.ui27[data-pag="secretaria"] .tbl th { font-size: 11.5px; color: var(--u-text-2); letter-spacing: 0; border-bottom-color: var(--u-sep); }
html.ui27[data-pag="secretaria"] .tbl td { border-bottom-color: var(--u-sep); font-size: 13px; }
html.ui27[data-pag="secretaria"] .tbl td button { border-radius: 999px !important; min-height: 28px; }
html.ui27[data-pag="secretaria"] .badge { border-radius: 999px; padding: 3px 9px; text-transform: none; font-size: 11px; font-weight: 600; }
html.ui27[data-pag="secretaria"] .stat-row { background: var(--u-fill-2); border: none; border-radius: 14px; }
html.ui27[data-pag="secretaria"] .mini-pizarra { background: var(--u-fill-2); border: none; border-radius: 18px; }
@media (max-width: 900px) {
  html.ui27[data-pag="secretaria"] body { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 40px; }
  html.ui27[data-pag="secretaria"] .topbar { flex-direction: row !important; align-items: center; gap: 10px; }
  html.ui27[data-pag="secretaria"] .topbar h1 { font-size: 28px; min-width: 0; }
}

/* en el teléfono los campos a 16 px: con menos, Safari del iPhone acerca la pantalla al tocar */
@media (max-width: 850px) {
  html.ui27 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.ui27 select, html.ui27 textarea, html.ui27 .aso-campo { font-size: 16px; }
}

/* ---------- Gasoil ---------- */
html.ui27[data-pag="gasoil"] .layout { background: var(--u-bg); }
html.ui27[data-pag="gasoil"] .sidebar { background: var(--u-glass); position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)); padding: 16px 10px; }
html.ui27[data-pag="gasoil"] .brand { border-bottom: none; padding: 4px 8px 10px; margin-bottom: 6px; }
html.ui27[data-pag="gasoil"] .brand .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--u-accent-tint); color: var(--u-accent); }
html.ui27[data-pag="gasoil"] .brand .tt { color: var(--u-text); letter-spacing: .04em; }
html.ui27[data-pag="gasoil"] .brand .su { color: var(--u-text-2); }
html.ui27[data-pag="gasoil"] nav.menu { gap: 2px; }
html.ui27[data-pag="gasoil"] .nav-btn {
  border-left: none; border-radius: 12px; padding: 10px 12px; min-height: 42px; color: var(--u-text); font-size: 14.5px; font-weight: 500;
}
html.ui27[data-pag="gasoil"] .nav-btn .ic { color: var(--u-text-2); }
html.ui27[data-pag="gasoil"] .nav-btn:hover { background: var(--u-fill-2); }
html.ui27[data-pag="gasoil"] .nav-btn.active { background: var(--u-accent-tint); color: var(--u-accent); font-weight: 600; }
html.ui27[data-pag="gasoil"] .nav-btn.active .ic { color: var(--u-accent); }
html.ui27[data-pag="gasoil"] .nav-foot { border-top: 1px solid var(--u-sep); }
html.ui27[data-pag="gasoil"] .btn-logout { background: var(--u-accent-tint) !important; color: var(--u-accent) !important; border: none !important; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html.ui27[data-pag="gasoil"] .mobile-logout { min-height: 38px; }
html.ui27[data-pag="gasoil"] .main-content { padding: calc(22px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) 32px; }
html.ui27[data-pag="gasoil"] .module-title { font-size: 32px; font-weight: 700; letter-spacing: -.025em; }
html.ui27[data-pag="gasoil"] .pill { background: var(--u-card); border: 1px solid var(--u-sep); border-radius: 999px; padding: 8px 16px; box-shadow: var(--u-sombra-card); font-variant-numeric: tabular-nums; }
html.ui27[data-pag="gasoil"] body.tema-claro .pill { border-color: transparent; }
html.ui27[data-pag="gasoil"] .pill .pl { color: var(--u-text-2); letter-spacing: 0; }
html.ui27[data-pag="gasoil"] .tema-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--u-fill-2); color: var(--u-text); }
html.ui27[data-pag="gasoil"] .caja { padding: 22px; }
html.ui27[data-pag="gasoil"] .caja-main { box-shadow: var(--u-sombra-card); }
html.ui27[data-pag="gasoil"] .sub-help { color: var(--u-text-2); }
html.ui27[data-pag="gasoil"] label { color: var(--u-text-2); font-weight: 500; }
html.ui27[data-pag="gasoil"] button.accion {
  border-radius: 999px; min-height: 54px; padding: 16px; box-shadow: none; font-weight: 600; background: var(--u-green); color: #fff;
}
html.ui27[data-pag="gasoil"] button.accion.azul { background: var(--u-blue-solid); }
html.ui27[data-pag="gasoil"] .stat, html.ui27[data-pag="gasoil"] .rep-card, html.ui27[data-pag="gasoil"] .total-box {
  border: none; border-radius: 18px; background: var(--u-fill-2);
}
html.ui27[data-pag="gasoil"] .stat.b, html.ui27[data-pag="gasoil"] .stat.c { border-bottom: none; }
html.ui27[data-pag="gasoil"] .stat .l, html.ui27[data-pag="gasoil"] .rep-card .l, html.ui27[data-pag="gasoil"] .total-box .l { letter-spacing: .02em; color: var(--u-text-2); font-weight: 600; }
html.ui27[data-pag="gasoil"] .stat .v, html.ui27[data-pag="gasoil"] .rep-card .m { font-weight: 700; font-variant-numeric: tabular-nums; }
html.ui27[data-pag="gasoil"] .rep-card.efectivo, html.ui27[data-pag="gasoil"] .total-box { background: var(--u-green-tint); }
html.ui27[data-pag="gasoil"] .rep-card.transfer { background: var(--u-blue-tint); }
html.ui27[data-pag="gasoil"] .rep-card.credito { background: var(--u-orange-tint); }
html.ui27[data-pag="gasoil"] .rep-card.total { background: var(--u-fill); }
html.ui27[data-pag="gasoil"] .lista-venta .reimp { background: var(--u-orange-tint) !important; color: var(--u-orange) !important; border-radius: 999px; }
html.ui27[data-pag="gasoil"] .lista-venta .anul { background: var(--u-accent-tint) !important; color: var(--u-accent) !important; border: none; border-radius: 999px; }
html.ui27[data-pag="gasoil"] .lista-venta .cobrar { border-radius: 999px; }
@media (max-width: 860px) {
  html.ui27[data-pag="gasoil"] .main-content { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px)); }
  html.ui27[data-pag="gasoil"] .module-title { font-size: 30px; }
  /* barra de abajo flotante de vidrio, como la de Organización */
  html.ui27[data-pag="gasoil"] .bottom-nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 64px; padding: 0 6px;
    border-radius: 32px; align-items: center; border: 1px solid var(--u-glass-line) !important;
    background: var(--u-glass) !important; box-shadow: var(--u-sombra);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  }
  html.ui27[data-pag="gasoil"] .bn-btn { height: 56px; border-radius: 26px; color: var(--u-text-2); font-size: 10.5px; font-weight: 600; justify-content: center; }
  html.ui27[data-pag="gasoil"] .bn-btn.active { color: var(--u-accent); background: var(--u-accent-tint); }
}

/* ---------- Facturación ---------- */
html.ui27[data-pag="facturacion"] body {
  --surface: var(--u-card); --surface-2: var(--u-fill-2); --border: var(--u-sep); --border-2: var(--u-fill);
  --muted: var(--u-text-2); --faint: var(--u-text-3); --accent-soft: var(--u-accent-tint);
  --navy-soft: var(--u-blue-tint); --navy-2: var(--u-blue); --green-soft: var(--u-green-tint);
}
html.ui27[data-pag="facturacion"] .top {
  background: var(--u-glass) !important; border-bottom: 1px solid var(--u-sep);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
}
html.ui27[data-pag="facturacion"] .top h1 { font-size: 17px; font-weight: 600; }
html.ui27[data-pag="facturacion"] .top .tbtn { border: none; background: var(--u-fill-2); color: var(--u-text); border-radius: 999px; min-height: 36px; }
html.ui27[data-pag="facturacion"] .top .tbtn:hover { background: var(--u-fill); }
html.ui27[data-pag="facturacion"] .top .tbtn.icon-only { width: 36px; padding: 0; justify-content: center; }
html.ui27[data-pag="facturacion"] .tabs {
  gap: 2px; padding: 3px; margin: 16px auto 0; width: max-content; max-width: calc(100% - 32px);
  background: var(--u-fill-2); border-radius: 999px; scrollbar-width: none;
}
html.ui27[data-pag="facturacion"] .tabs::-webkit-scrollbar { display: none; }
html.ui27[data-pag="facturacion"] .tab { border: none; border-radius: 999px; padding: 8px 16px; min-height: 36px; color: var(--u-text-2); font-weight: 600; }
html.ui27[data-pag="facturacion"] .tab:hover { background: transparent; color: var(--u-text); }
html.ui27[data-pag="facturacion"] .tab.on, html.ui27[data-pag="facturacion"] body.tema-claro .tab.on {
  background: var(--u-card-2); color: var(--u-text); border: none; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px var(--u-sep);
}
html.ui27[data-pag="facturacion"] body.tema-claro .tab.on { background: var(--u-card); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
html.ui27[data-pag="facturacion"] .tab.on svg, html.ui27[data-pag="facturacion"] body.tema-claro .tab.on svg { color: var(--u-accent); }
html.ui27[data-pag="facturacion"] .card { padding: 22px; }
html.ui27[data-pag="facturacion"] .card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
html.ui27[data-pag="facturacion"] label { font-weight: 500; color: var(--u-text-2); }
html.ui27[data-pag="facturacion"] .btn { border-radius: 999px; min-height: 44px; font-size: 14.5px; }
html.ui27[data-pag="facturacion"] .btn-primary { background: var(--u-blue-solid); color: #fff; }
html.ui27[data-pag="facturacion"] .btn-ghost { background: var(--u-fill-2); border: none; color: var(--u-text); }
html.ui27[data-pag="facturacion"] .btn-rojo { background: var(--u-accent-tint) !important; border: none; }
html.ui27[data-pag="facturacion"] .ibtn { border: none; background: var(--u-fill-2); border-radius: 50%; width: 36px; height: 36px; color: var(--u-text-2); }
html.ui27[data-pag="facturacion"] .ibtn:hover { background: var(--u-fill); color: var(--u-text); }
html.ui27[data-pag="facturacion"] .ibtn.del { color: var(--u-accent); background: var(--u-accent-tint); }
html.ui27[data-pag="facturacion"] .ibtn.on { background: var(--u-blue-tint); color: var(--u-blue); }
html.ui27[data-pag="facturacion"] .lin { border: none; border-radius: 16px; background: var(--u-fill-2); }
html.ui27[data-pag="facturacion"] .lin-main input { background: var(--u-card); }
html.ui27[data-pag="facturacion"] .tot-box { border: none; border-radius: 16px; }
html.ui27[data-pag="facturacion"] .rnc-btn { border: none; background: var(--u-fill); border-radius: 999px; }
html.ui27[data-pag="facturacion"] .chip { border: none; background: var(--u-fill); border-radius: 999px; }
html.ui27[data-pag="facturacion"] .refpanel { border: none; background: var(--u-fill-2); border-radius: 14px; }
html.ui27[data-pag="facturacion"] th { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--u-text-2); }
html.ui27[data-pag="facturacion"] .lin-head { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--u-text-2); }
html.ui27[data-pag="facturacion"] .aviso { border: none; border-radius: 14px; }
html.ui27[data-pag="facturacion"] .ovm .card { border-radius: 28px; }
html.ui27[data-pag="facturacion"] .top .tbtn { flex: none; }
@media (max-width: 640px) {
  /* renglón de la factura: la descripción en su fila; debajo cantidad, precio, importe y botones */
  html.ui27[data-pag="facturacion"] .lin-head, html.ui27[data-pag="facturacion"] .lin-main { grid-template-columns: 60px 1fr 1fr 80px !important; gap: 8px; }
  html.ui27[data-pag="facturacion"] .lin-head { padding: 0 9px; margin-bottom: 4px; }
  html.ui27[data-pag="facturacion"] .lin-head > :first-child { display: none; }
  html.ui27[data-pag="facturacion"] .lin-main > :first-child { grid-column: 1 / -1; }
  html.ui27[data-pag="facturacion"] .lin-main input { min-height: 42px; padding: 9px 11px; }
  html.ui27[data-pag="facturacion"] .lin .imp { padding: 9px 4px; font-size: 14px; }
  html.ui27[data-pag="facturacion"] .top { gap: 8px; padding-left: 14px; padding-right: 14px; }
  html.ui27[data-pag="facturacion"] .top h1 { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui27[data-pag="facturacion"] .hist tr { border: none; border-radius: 18px; background: var(--u-card); box-shadow: var(--u-sombra-card); padding: 14px; }
  html.ui27[data-pag="facturacion"] .tabs { margin: 12px 16px 0; width: auto; max-width: none; justify-content: flex-start; overflow-x: auto; }
}

/* ---------- Presidente ---------- */
html.ui27[data-pag="presidente"] body {
  --fondo: var(--u-bg); --vidrio: var(--u-card); --vidrio-alto: var(--u-card-2); --borde: var(--u-sep); --borde-alto: var(--u-fill);
  --texto: var(--u-text); --suave: var(--u-text-2); --verde: var(--u-green-text); --rojo: var(--red); --azul: var(--u-blue);
  --acento: var(--u-accent); --sombra: var(--u-sombra-card);
}
html.ui27[data-pag="presidente"] body.claro { --vidrio-alto: #ffffff; }
html.ui27[data-pag="presidente"] body::after { display: none; }
html.ui27[data-pag="presidente"] .barra {
  background: var(--u-glass); border-bottom: 1px solid var(--u-sep);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
html.ui27[data-pag="presidente"] .marca { color: var(--u-text); letter-spacing: .04em; font-weight: 700; }
html.ui27[data-pag="presidente"] .btn-tema, html.ui27[data-pag="presidente"] .btn-salir, html.ui27[data-pag="presidente"] .bk-btn, html.ui27[data-pag="presidente"] .rango {
  border: none; background: var(--u-fill-2); border-radius: 999px; box-shadow: none;
}
html.ui27[data-pag="presidente"] .btn-tema { border-radius: 50%; }
html.ui27[data-pag="presidente"] .btn-salir { color: var(--u-accent); background: var(--u-accent-tint); }
/* tarjetas sólidas: el vidrio solo en lo que flota (la corrección de iOS 27) */
html.ui27[data-pag="presidente"] .cifra, html.ui27[data-pag="presidente"] .tarjeta, html.ui27[data-pag="presidente"] .area {
  background: var(--u-card); border: 1px solid var(--u-sep); border-radius: 22px; box-shadow: var(--u-sombra-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ui27[data-pag="presidente"] body.claro .cifra, html.ui27[data-pag="presidente"] body.claro .tarjeta, html.ui27[data-pag="presidente"] body.claro .area { border-color: transparent; }
html.ui27[data-pag="presidente"] .pestanas { background: var(--u-fill-2); border: none; border-radius: 999px; padding: 3px; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ui27[data-pag="presidente"] .indicador { top: 3px; bottom: 3px; border-radius: 999px; background: var(--u-card-2); border: none; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px var(--u-sep); }
html.ui27[data-pag="presidente"] body.claro .indicador { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
html.ui27[data-pag="presidente"] .pestana { border-radius: 999px; font-weight: 600; }
html.ui27[data-pag="presidente"] .area-btn { letter-spacing: .02em; font-weight: 700; }
html.ui27[data-pag="presidente"] .aviso-pasado { border: none; background: var(--u-fill-2); border-radius: 14px; }
html.ui27[data-pag="presidente"] .valor { font-weight: 700; }

/* ---------- Inicio (la portada pública: solo la barra y el botón) ---------- */
html.ui27[data-pag="inicio"] .header { background: var(--u-glass); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-bottom-color: var(--u-sep); }
html.ui27[data-pag="inicio"] .menu-btn-hdr { border: none; background: var(--u-fill-2); border-radius: 999px; }
html.ui27[data-pag="inicio"] .menu-btn-hdr:hover { background: var(--u-fill); }

/* ---------- Operativo y Despacho: la forma nueva, el contraste de siempre ---------- */
html.ui27c .card { border-radius: 20px; }
html.ui27c .btn { border-radius: 20px; }
html.ui27c .chip { border-radius: 999px; }
html.ui27c .pestanas button { border-radius: 16px; }
html.ui27c input, html.ui27c select, html.ui27c .aso-campo { border-radius: 14px; }
html.ui27c .opciones, html.ui27c .cliente, html.ui27c .nota-reg { border-radius: 16px; }
html.ui27c .rotulos button { border-radius: 999px; }

/* =====================================================================
   Plegables (Galaxy Z Fold 8, 2026-10-04). Abierto, la pantalla de adentro es
   ancha y bajita (4:3 acostada: ~820-930 x 620-700 puntos) y caía entre el
   modo teléfono (≤850) y el de PC. Afuera (10:16, ~450 de ancho) ya iba bien.
   ===================================================================== */
/* PC angosto (Fold abierto con letra normal): menú más angosto, título que no
   se parte y las dos columnas del despacho una debajo de otra (la mini pizarra
   quedaba en 2 columnas de turnos). */
@media (min-width: 851px) and (max-width: 1180px) {
  html.ui27[data-pag="organizacion"] .sidebar { width: 220px; min-width: 220px; max-width: 220px; }
  html.ui27[data-pag="organizacion"] .header-top { flex-wrap: wrap; padding: calc(16px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) 10px 24px; row-gap: 10px; }
  html.ui27[data-pag="organizacion"] #titulo-seccion { font-size: 28px !important; white-space: nowrap; }
  html.ui27[data-pag="organizacion"] .header-top > div:last-child { margin-right: 52px; flex-wrap: wrap; }
  html.ui27[data-pag="organizacion"] .stats-header { gap: 14px; padding: 6px 14px; }
  html.ui27[data-pag="organizacion"] .contenido { padding: 4px 24px 40px; }
  html.ui27[data-pag="organizacion"] .grid-fijo, html.ui27[data-pag="organizacion"] #grid-despacho-principal { grid-template-columns: 1fr !important; }
  html.ui27[data-pag="gasoil"] .sidebar { width: 210px; flex-basis: 210px; }
}
/* Teléfono ancho (Fold abierto con letra grande, tableta): la barra de abajo,
   el menú y el editor centrados y de un ancho cómodo, no de lado a lado. */
@media (min-width: 640px) and (max-width: 850px) {
  html.ui27[data-pag="organizacion"] .u-tabbar { left: 50%; right: auto; width: min(560px, calc(100% - 24px)); translate: -50% 0; }
  html.ui27[data-pag="organizacion"] .sidebar { left: 50% !important; right: auto !important; width: min(620px, 100%) !important; translate: -50% 0; }
  html.ui27 .u-editor { left: 50%; right: auto; width: min(560px, 100%); translate: -50% 0; }
  html.ui27[data-pag="organizacion"] .contenido { max-width: 780px; margin: 0 auto; width: 100%; }
  html.ui27[data-pag="organizacion"] .header-top { max-width: 780px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}
@media (min-width: 640px) and (max-width: 860px) {
  html.ui27[data-pag="gasoil"] .bottom-nav { left: 50%; right: auto; width: min(520px, calc(100% - 24px)); translate: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui27 .header-top, html.ui27 #titulo-seccion, html.ui27 .sidebar, html.ui27 .u-tabbar button { transition: none !important; }
}