/* ===========================================================================
   Pronti · catálogo de interfaz
   ---------------------------------------------------------------------------
   Los bloques con los que se arman TODAS las pantallas de TODOS los módulos.
   Un agente compone con esto; no escribe CSS propio. Si falta una pieza, se
   agrega aquí una vez, con cuidado, y queda para siempre.

   Depende de los tokens del kit (--pr-*). Este archivo no define colores
   nuevos: solo les da trabajo.

   Decisiones que gobiernan todo lo de abajo:

   · DENSIDAD MEDIA-ALTA. Esto es una herramienta de trabajo, no una página de
     ventas. Una fila mide 44px: entran muchas sin que se vuelva ilegible. El
     aire generoso de la web de Pronti aquí estorba.

   · EL COLOR SIGNIFICA ALGO. Nada es de color por decorar. Verde: se logró.
     Magenta: se rompió. Naranja: está en proceso. Morado: es un dato.
     Negro: la estructura. Una pantalla en la que todo tiene color es una
     pantalla en la que nada resalta.

   · JERARQUÍA POR PESO Y TAMAÑO, no por color. Así la pantalla sigue
     funcionando en blanco y negro, y para quien no distingue colores.

   · NÚMEROS TABULARES en toda cifra. Sin esto las columnas de dinero no
     alinean y el sistema se siente barato aunque el dato sea correcto.

   · EL TECLADO IMPORTA. En captura, quien trabaja rápido no usa el mouse.
     Foco siempre visible, orden lógico, nada que solo se pueda hacer
     apuntando.

   · MÓVIL NO ES LA TABLA ENCOGIDA. Debajo de 720px las filas se vuelven
     tarjetas. Una tabla con scroll lateral en un teléfono es una tabla que
     nadie lee.
   ========================================================================= */

:root {
  --ui-fuente: 'Aktiv Grotesk', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- roles: qué significa cada color aquí --- */
  --ui-tinta:        var(--pr-negro-500);
  --ui-tinta-suave:  var(--pr-neutro-600);
  /* neutro-400 daba 3.31:1 sobre blanco y no pasa AA. Este color rotula las
     columnas de las tablas y las etiquetas de los numeros: si no se lee, la
     tabla no se entiende. neutro-500 da 5.29:1. */
  --ui-tinta-tenue:  var(--pr-neutro-500);
  --ui-fondo:        var(--pr-neutro-50);
  --ui-superficie:   #ffffff;
  --ui-borde:        var(--pr-neutro-200);
  --ui-borde-fuerte: var(--pr-neutro-300);

  --ui-logrado:      var(--pr-verde-800);      /* texto verde legible sobre claro */
  --ui-logrado-f:    var(--pr-verde-50);
  --ui-roto:         var(--pr-magenta-800);
  --ui-roto-f:       var(--pr-magenta-50);
  --ui-proceso:      var(--pr-naranja-800);
  --ui-proceso-f:    var(--pr-naranja-50);
  --ui-dato:         var(--pr-morado-700);
  --ui-dato-f:       var(--pr-morado-50);

  --ui-accion:       var(--pr-verde-500);      /* el botón principal */
  --ui-accion-hover: var(--pr-verde-600);
  --ui-sobre-accion: var(--pr-negro-500);      /* tinta NEGRA sobre verde: el blanco da 1.88:1 */

  /* --- medidas --- */
  --ui-fila: 44px;
  --ui-r-sm: 8px;
  --ui-r-md: 14px;
  --ui-r-lg: 22px;
  --ui-r-full: 999px;

  --ui-lateral: 224px;
  --ui-lateral-min: 68px;
  --ui-cabecera: 56px;

  --ui-sombra-menu: 0 4px 12px rgba(32,30,31,.09), 0 12px 32px rgba(32,30,31,.10);
  --ui-sombra-dialogo: 0 12px 24px rgba(32,30,31,.14), 0 32px 64px rgba(32,30,31,.18);

  --ui-paso: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

body.ui {
  margin: 0;
  font-family: var(--ui-fuente);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-tinta);
  background: var(--ui-fondo);
  -webkit-font-smoothing: antialiased;
}

/* Todo lo que sea cifra se alinea. Se aplica a mano donde toca. */
.ui-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* El foco NUNCA se quita. Se hace bonito, que es distinto. */
.ui :focus-visible {
  outline: 2px solid var(--pr-verde-800);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================================================================
   ARMAZÓN
   ---------------------------------------------------------------------------
   La barra lateral es la pieza que más se mira y la que más se sufre. Reglas:

   · ANCHA DE VERDAD (264px). Estrecharla para "ganar espacio" es falso ahorro:
     el nombre de un módulo se corta, el usuario deja de leer y empieza a
     adivinar por el icono.
   · SE PLIEGA A ICONOS (68px) y recuerda la decisión. Quien trabaja todo el
     día en una pantalla de 13" agradece los 200px de vuelta; quien no, ni la
     toca.
   · UN SOLO ACENTO. El activo se marca con una barra verde y un fondo apenas
     levantado, no con un bloque blanco que le grita a la cara.
   · TODOS LOS ICONOS DEL MISMO JUEGO (iconos.svg). Mezclar dos familias de
     iconos es lo que hace que un producto se vea armado con retazos.
   ========================================================================= */
.ui-app {
  display: grid;
  grid-template-columns: var(--ui-lateral) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .2s var(--ui-paso);
}
.ui-app.plegada { grid-template-columns: var(--ui-lateral-min) 1fr; }

.ui-lateral {
  background: var(--pr-negro-500);
  color: var(--pr-neutro-100);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}

/* --- marca --- */
.ui-lateral-marca {
  min-height: var(--ui-cabecera); display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 14px; flex: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ui-lateral-marca .iso { width: 26px; height: 26px; flex: none; }
/* Un nombre largo se parte en DOS RENGLONES. Las otras dos salidas son peores:
   cortarlo con puntos suspensivos deja al cliente sin su nombre completo en su
   propio sistema, y ensanchar la barra para que quepa desperdicia el espacio de
   todos los demas. "Ferreteria El Tornillo" cabe en dos lineas sin robarle
   nada al contenido. */
.ui-lateral-marca .nombre {
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: #fff;
  line-height: 1.18; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* --- navegación --- */
.ui-nav {
  padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ui-nav::-webkit-scrollbar { width: 6px; }
.ui-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

/* neutro-400 y no neutro-500: sobre el negro de la barra, el 500 daba 3.08:1 y
   hace falta 4.5:1 (10px, aunque vaya en negrita). El 400 da 5.01:1 y sigue
   siendo más apagado que los enlaces —neutro-200, 6.05:1—, que es lo que tiene
   que pasar: el rótulo del grupo ordena, no compite. Medido por el portero. */
.ui-nav-grupo {
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--pr-neutro-400); padding: 16px 10px 7px; white-space: nowrap;
}

.ui-nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 11px; border-radius: 10px;
  text-decoration: none; color: var(--pr-neutro-200);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s var(--ui-paso), color .15s var(--ui-paso);
}
.ui-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }

/* El activo: fondo apenas levantado, texto blanco, icono verde y una barra
   verde a la izquierda. Un bloque blanco sólido se lee como un error de
   contraste, no como un estado. */
.ui-nav a.activo { background: rgba(255,255,255,.10); color: #fff; font-weight: 700; }
.ui-nav a.activo::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--pr-verde-500);
}
.ui-nav a.activo .ui-ico { color: var(--pr-verde-400); }

.ui-ico { width: 20px; height: 20px; flex: none; }

/* la etiqueta desaparece al plegar, sin que el ancho salte */
.ui-nav a .txt, .ui-lateral-marca .nombre, .ui-usuario .quien,
.ui-nav-grupo, .ui-plegar .txt { transition: opacity .12s var(--ui-paso); }

/* display:none, no opacity:0. Invisible NO es quitado: con opacity el texto
   sigue ocupando su ancho y empuja el icono a la izquierda, con lo que la
   barra plegada queda descuadrada. */
.ui-app.plegada .ui-nav a .txt,
.ui-app.plegada .ui-lateral-marca .nombre,
.ui-app.plegada .ui-usuario .quien,
.ui-app.plegada .ui-plegar .txt { display: none; }
/* Plegada, el rotulo del grupo se convierte en una linea. Ocultarlo del todo
   deja los iconos en una lista corrida sin agrupar; dejar el texto lo desborda. */
.ui-app.plegada .ui-nav-grupo {
  font-size: 0; height: 1px; padding: 0; margin: 13px 12px;
  background: rgba(255,255,255,.11); overflow: hidden;
}
.ui-app.plegada .ui-nav a,
.ui-app.plegada .ui-plegar { justify-content: center; padding: 0; gap: 0; }
.ui-app.plegada .ui-lateral-marca { padding: 0; justify-content: center; }

/* Plegada, el nombre del módulo se enseña al pasar por encima. Sin esto,
   plegar convierte la barra en una adivinanza. */
/* La ayuda de los iconos plegados NO va con ::after: la barra necesita
   overflow para su scroll, y ese overflow recorta cualquier cosa que quiera
   salirse. Se dibuja en un elemento suelto del body, colocado con JS
   (UI.plegable lo engancha solo). Ver .ui-tip mas abajo. */

/* --- pie: plegar y usuario --- */
.ui-lateral-pie {
  margin-top: auto; padding: 10px 12px 12px; flex: none;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 4px;
}
.ui-plegar {
  display: flex; align-items: center; gap: 12px;
  height: 36px; padding: 0 11px; border-radius: 10px;
  background: none; border: none; cursor: pointer; width: 100%;
  font-family: var(--ui-fuente); font-size: 12.5px; font-weight: 500;
  color: var(--pr-neutro-400); white-space: nowrap;
  transition: background .15s var(--ui-paso), color .15s var(--ui-paso);
}
.ui-plegar { position: relative; }
.ui-plegar:hover { background: rgba(255,255,255,.06); color: #fff; }

.ui-plegar .i-desplegar { display: none; }
.ui-app.plegada .ui-plegar .i-plegar { display: none; }
.ui-app.plegada .ui-plegar .i-desplegar { display: block; }

.ui-usuario {
  display: flex; align-items: center; gap: 11px; padding: 7px 8px;
  border-radius: 10px; text-decoration: none; color: inherit; min-width: 0;
}
.ui-usuario:hover { background: rgba(255,255,255,.06); }
.ui-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--pr-verde-500); color: var(--pr-negro-500);
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
  letter-spacing: .02em;
}
.ui-usuario .quien { display: flex; flex-direction: column; min-width: 0; }
.ui-usuario .quien b {
  font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-usuario .quien em {
  font-size: 11px; font-style: normal; color: var(--pr-neutro-400); line-height: 1.3;
}
.ui-app.plegada .ui-usuario { justify-content: center; padding: 7px 0; }

.ui-principal { min-width: 0; display: flex; flex-direction: column; }

/* El velo va SIEMPRE fixed: como hijo de un grid sin position propia ocupaba
   la segunda columna y empujaba el contenido fuera de la pantalla. */
.ui-velo {
  position: fixed; inset: 0; background: rgba(32,30,31,.45); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ui-paso);
}
.ui-velo.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .ui-velo { display: none; } }

.ui-cabecera {
  height: var(--ui-cabecera); background: var(--ui-superficie);
  border-bottom: 1px solid var(--ui-borde);
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  position: sticky; top: 0; z-index: 30;
}
.ui-cabecera h1 { font-size: 16px; font-weight: 700; letter-spacing: -.018em; margin: 0; }
.ui-cabecera-der { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.ui-contenido { padding: 20px 22px 44px; flex: 1; min-width: 0; }

/* --- móvil: la barra se vuelve cajón y NUNCA se pliega --- */
.ui-btn.ui-menu-btn { display: none; }
@media (max-width: 900px) {
  .ui-app, .ui-app.plegada { grid-template-columns: 1fr; }
  .ui-lateral {
    position: fixed; z-index: 60; width: var(--ui-lateral);
    left: calc(var(--ui-lateral) * -1);
    transition: left .22s var(--ui-paso);
  }
  .ui-lateral.abierto { left: 0; box-shadow: var(--ui-sombra-dialogo); }
  .ui-btn.ui-menu-btn { display: inline-flex; }
  .ui-plegar { display: none; }
  .ui-contenido { padding: 14px 14px 40px; }
  .ui-cabecera { padding: 0 14px; gap: 10px; }
  .ui-cabecera h1 {
    font-size: 15px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* En la cabecera de un teléfono cabe UNA acción. Las demás desbordan la
     pantalla — medido: dos botones a 390px se salen 5px y sacan scroll
     lateral. Las acciones secundarias van en .ui-pag-cab, no aquí. */
  .ui-cabecera-der { min-width: 0; }
  .ui-cabecera-der > .ui-btn:not(:last-child) { display: none; }
  /* en el cajón se ve todo: plegar ahí no tiene sentido */
  .ui-app.plegada .ui-nav a .txt,
  .ui-app.plegada .ui-plegar .txt { display: block; }
  .ui-app.plegada .ui-lateral-marca .nombre { display: block; }
  .ui-app.plegada .ui-usuario .quien { display: flex; }
  .ui-app.plegada .ui-nav a { justify-content: flex-start; padding: 0 11px; }
  .ui-app.plegada .ui-lateral-marca { justify-content: flex-start; padding: 0 14px 0 18px; }
  .ui-app.plegada .ui-nav-grupo { opacity: 1; height: auto; padding: 16px 10px 7px; }
}

/* ===========================================================================
   BOTONES
   ---------------------------------------------------------------------------
   Píldora, como en la web de Pronti. Es la forma de la marca; un botón de
   esquinas cuadradas en esta app se lee como de otro producto.
   ========================================================================= */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ui-fuente); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.005em; line-height: 1;
  padding: 0 20px; height: 38px; border-radius: var(--ui-r-full);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; background: none; color: var(--ui-tinta);
  transition: background .15s var(--ui-paso), border-color .15s var(--ui-paso),
              color .15s var(--ui-paso);
}
.ui-btn .ui-ico { width: 17px; height: 17px; }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tinta NEGRA sobre el verde: el blanco da 1.88:1 y no pasa. */
.ui-btn-principal { background: var(--ui-accion); color: var(--ui-sobre-accion); }
.ui-btn-principal:hover:not(:disabled) { background: var(--ui-accion-hover); }

.ui-btn-normal { background: var(--ui-superficie); border-color: var(--ui-borde-fuerte); }
.ui-btn-normal:hover:not(:disabled) { border-color: var(--pr-negro-500); }

.ui-btn-plano { color: var(--ui-tinta-suave); }
.ui-btn-plano:hover:not(:disabled) { background: var(--pr-neutro-100); color: var(--ui-tinta); }

/* Rojo SOLO para lo que destruye. Si todo es rojo, nada asusta. */
.ui-btn-peligro { background: var(--pr-magenta-700); color: #fff; }
.ui-btn-peligro:hover:not(:disabled) { background: var(--pr-magenta-800); }

.ui-btn-chico { height: 32px; padding: 0 15px; font-size: 12.5px; }
.ui-btn-icono { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.ui-btn-icono .ui-ico { width: 19px; height: 19px; }

/* ===========================================================================
   PÁGINA · cabecera de contenido
   ========================================================================= */
.ui-pag-cab {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ui-pag-cab h2 { font-size: 21px; font-weight: 900; letter-spacing: -.028em; margin: 0; }
.ui-pag-cab p {
  margin: 3px 0 0; font-size: 13px; color: var(--ui-tinta-suave); max-width: 62ch;
}
.ui-pag-cab-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   BARRA DE HERRAMIENTAS · buscar y filtrar
   ========================================================================= */
.ui-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.ui-buscador { position: relative; flex: 1 1 260px; max-width: 380px; }
.ui-buscador input {
  width: 100%; height: 38px; padding: 0 14px 0 36px;
  border: 1px solid var(--ui-borde); border-radius: var(--ui-r-sm);
  background: var(--ui-superficie); font-family: var(--ui-fuente); font-size: 13.5px;
  color: var(--ui-tinta);
}
.ui-buscador input:focus { outline: none; border-color: var(--pr-verde-800);
  box-shadow: 0 0 0 3px rgba(10,113,88,.10); }
.ui-buscador svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ui-tinta-tenue); pointer-events: none;
}

.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border: 1px solid var(--ui-borde); border-radius: var(--ui-r-full);
  background: var(--ui-superficie); font-family: var(--ui-fuente); font-size: 12.5px;
  font-weight: 500; color: var(--ui-tinta-suave); cursor: pointer; white-space: nowrap;
  transition: border-color .15s var(--ui-paso);
}
.ui-chip:hover { border-color: var(--ui-borde-fuerte); }
.ui-chip.on { background: var(--pr-negro-500); border-color: var(--pr-negro-500); color: #fff; }
.ui-chip .cuenta {
  font-size: 11px; font-weight: 700; color: var(--ui-tinta-tenue);
}
.ui-chip.on .cuenta { color: rgba(255,255,255,.65); }

/* ===========================================================================
   TABLA
   ========================================================================= */
.ui-tabla-caja {
  background: var(--ui-superficie); border: 1px solid var(--ui-borde);
  border-radius: var(--ui-r-md); overflow: hidden;
}
.ui-tabla { width: 100%; border-collapse: collapse; }

.ui-tabla thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ui-tinta-tenue);
  padding: 0 14px; height: 38px; background: var(--pr-neutro-50);
  border-bottom: 1px solid var(--ui-borde); white-space: nowrap;
}
.ui-tabla thead th.orden { cursor: pointer; user-select: none; }
.ui-tabla thead th.orden:hover { color: var(--ui-tinta); }
.ui-tabla thead th .flecha { opacity: 0; margin-left: 4px; }
.ui-tabla thead th.asc .flecha, .ui-tabla thead th.desc .flecha { opacity: 1; }
.ui-tabla thead th.desc .flecha { display: inline-block; transform: rotate(180deg); }

.ui-tabla tbody td {
  padding: 0 14px; height: var(--ui-fila);
  border-bottom: 1px solid var(--pr-neutro-100); font-size: 13.5px;
}
.ui-tabla tbody tr:last-child td { border-bottom: none; }
.ui-tabla tbody tr:hover td { background: var(--pr-neutro-50); }
.ui-tabla tbody tr.clicable { cursor: pointer; }

/* La columna que identifica la fila va en negrita: es el ancla de lectura. */
.ui-tabla .principal { font-weight: 600; }
.ui-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-tabla .tenue { color: var(--ui-tinta-suave); }
.ui-tabla .acciones { width: 1%; white-space: nowrap; text-align: right; }

/* Las acciones de fila aparecen al pasar por encima, pero SIEMPRE están en el
   DOM y son alcanzables con teclado: esconder no es quitar. */
.ui-tabla .acciones .ui-btn { opacity: 0; transition: opacity .12s var(--ui-paso); }
.ui-tabla tr:hover .acciones .ui-btn,
.ui-tabla .acciones .ui-btn:focus-visible { opacity: 1; }
@media (hover: none) { .ui-tabla .acciones .ui-btn { opacity: 1; } }

.ui-tabla-pie {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--ui-borde); background: var(--pr-neutro-50);
  font-size: 12.5px; color: var(--ui-tinta-suave);
}
.ui-tabla-pie .paginas { margin-left: auto; display: flex; gap: 4px; }

/* --- móvil: cada fila es una tarjeta --- */
@media (max-width: 720px) {
  .ui-tabla-caja { border: none; background: none; overflow: visible; }
  .ui-tabla, .ui-tabla tbody, .ui-tabla tr, .ui-tabla td { display: block; width: 100%; }
  .ui-tabla thead { display: none; }
  .ui-tabla tbody tr {
    background: var(--ui-superficie); border: 1px solid var(--ui-borde);
    border-radius: var(--ui-r-md); margin-bottom: 8px; padding: 10px 14px;
  }
  .ui-tabla tbody td {
    height: auto; padding: 3px 0; border: none;
    display: flex; align-items: baseline; gap: 10px;
  }
  /* la etiqueta de la columna se recupera del atributo */
  .ui-tabla tbody td::before {
    content: attr(data-et); flex: none; width: 38%;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ui-tinta-tenue);
  }
  .ui-tabla tbody td.principal { font-size: 15px; margin-bottom: 4px; }
  .ui-tabla tbody td.principal::before { display: none; }
  .ui-tabla .num { text-align: left; }
  .ui-tabla .acciones { text-align: left; margin-top: 8px; }
  .ui-tabla .acciones::before { display: none; }
  /* en tarjeta no hay "pasar el mouse por encima": la accion se ve siempre */
  .ui-tabla .acciones .ui-btn { opacity: 1; }
}

/* ===========================================================================
   PASTILLAS DE ESTADO
   ========================================================================= */
.ui-pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--ui-r-full);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ui-pastilla::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.ui-p-logrado { background: var(--ui-logrado-f); color: var(--ui-logrado); }
.ui-p-roto    { background: var(--ui-roto-f);    color: var(--ui-roto); }
.ui-p-proceso { background: var(--ui-proceso-f); color: var(--ui-proceso); }
.ui-p-dato    { background: var(--ui-dato-f);    color: var(--ui-dato); }
.ui-p-quieto  { background: var(--pr-neutro-100); color: var(--ui-tinta-suave); }

/* ===========================================================================
   FORMULARIO
   ========================================================================= */
.ui-form { max-width: 720px; }
.ui-form-grupo {
  background: var(--ui-superficie); border: 1px solid var(--ui-borde);
  border-radius: var(--ui-r-md); padding: 18px 20px; margin-bottom: 12px;
}
.ui-form-grupo > h3 {
  font-size: 14px; font-weight: 700; margin: 0 0 3px;
}
.ui-form-grupo > .ayuda-grupo {
  font-size: 12.5px; color: var(--ui-tinta-suave); margin: 0 0 16px;
}

.ui-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ui-campos .ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .ui-campos { grid-template-columns: 1fr; } }

.ui-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ui-campo > label {
  font-size: 12.5px; font-weight: 700; color: var(--ui-tinta);
}
.ui-campo > label .opcional {
  font-weight: 400; color: var(--ui-tinta-tenue); margin-left: 5px;
}
.ui-campo .ayuda { font-size: 12px; color: var(--ui-tinta-suave); }

.ui-campo input[type=text], .ui-campo input[type=email], .ui-campo input[type=tel],
.ui-campo input[type=number], .ui-campo input[type=date], .ui-campo input[type=password],
.ui-campo select, .ui-campo textarea {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--ui-borde-fuerte); border-radius: var(--ui-r-sm);
  background: var(--ui-superficie); font-family: var(--ui-fuente); font-size: 13.5px;
  color: var(--ui-tinta);
  transition: border-color .15s var(--ui-paso), box-shadow .15s var(--ui-paso);
}
.ui-campo textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical;
                     line-height: 1.5; }
.ui-campo input:focus, .ui-campo select:focus, .ui-campo textarea:focus {
  outline: none; border-color: var(--pr-verde-800); box-shadow: 0 0 0 3px rgba(10,113,88,.10);
}
.ui-campo input::placeholder, .ui-campo textarea::placeholder { color: var(--ui-tinta-tenue); }
.ui-campo input[readonly], .ui-campo input:disabled {
  background: var(--pr-neutro-50); color: var(--ui-tinta-suave);
}

/* Dinero: el símbolo va dentro y la cifra alineada a la derecha. */
.ui-money { position: relative; }
.ui-money input { padding-left: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.ui-money::before {
  content: attr(data-moneda); position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); font-size: 13px; color: var(--ui-tinta-tenue);
  pointer-events: none;
}

/* El error va DEBAJO del campo y con texto, nunca solo con color rojo. */
.ui-campo .error { font-size: 12px; font-weight: 500; color: var(--ui-roto); }
.ui-campo.mal input, .ui-campo.mal select, .ui-campo.mal textarea {
  border-color: var(--pr-magenta-500);
}

/* ---------------------------------------------------------------------------
   16px donde se toca con el dedo.

   En iOS, tocar un campo de menos de 16px hace que Safari ACERQUE la pantalla,
   y de ahí no se sale solo: el resto del formulario se llena con la página
   encogida. Lo encontró el portero midiendo, en los seis campos del catálogo y
   en el buscador.

   Va por consulta y no a secas porque el problema es del dedo, no del ancho:
   en el mostrador, con ratón, 13.5px es la densidad que hace que una pantalla
   de ocho horas al día no canse. La regla honesta es «si se toca, 16px», y por
   eso son dos condiciones: un tablet ancho también se toca.

   Va DESPUÉS de las reglas que corrige. Misma especificidad, gana la última.
   --------------------------------------------------------------------------- */
@media (max-width: 640px), (pointer: coarse) {
  .ui-campo input[type=text], .ui-campo input[type=email], .ui-campo input[type=tel],
  .ui-campo input[type=number], .ui-campo input[type=date], .ui-campo input[type=password],
  .ui-campo select, .ui-campo textarea,
  .ui-buscador input {
    font-size: 16px;
    height: 44px;          /* 16px de texto en 38px de alto queda apretado */
  }
  .ui-campo textarea { height: auto; }
}

/* sí/no */
.ui-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-switch .pista {
  width: 40px; height: 23px; border-radius: var(--ui-r-full);
  background: var(--pr-neutro-300); position: relative;
  transition: background .18s var(--ui-paso); flex: none;
}
.ui-switch .pista::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .18s var(--ui-paso);
}
.ui-switch input:checked + .pista { background: var(--pr-verde-600); }
.ui-switch input:checked + .pista::after { transform: translateX(17px); }
.ui-switch input:focus-visible + .pista { outline: 2px solid var(--pr-verde-800); outline-offset: 2px; }

/* opciones en píldora, como en la web */
.ui-ops { display: flex; flex-wrap: wrap; gap: 7px; }
.ui-ops label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--ui-borde-fuerte); border-radius: var(--ui-r-full);
  background: var(--ui-superficie); padding: 7px 14px; font-size: 13px;
  transition: border-color .15s var(--ui-paso), background .15s var(--ui-paso);
}
.ui-ops label:hover { border-color: var(--pr-neutro-400); }
.ui-ops input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-ops label.marcada { background: var(--pr-negro-500); border-color: var(--pr-negro-500); color: #fff; }

.ui-form-pie {
  display: flex; gap: 8px; align-items: center; padding-top: 4px;
}
.ui-form-pie .der { margin-left: auto; display: flex; gap: 8px; }

/* ===========================================================================
   TARJETAS DE NÚMERO
   ========================================================================= */
.ui-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.ui-numero {
  background: var(--ui-superficie); border: 1px solid var(--ui-borde);
  border-radius: var(--ui-r-md); padding: 14px 16px;
}
.ui-numero .et {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ui-tinta-tenue); display: block; margin-bottom: 6px;
}
.ui-numero .n {
  font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.ui-numero .cambio { font-size: 12px; font-weight: 500; margin-top: 6px; display: block; }
.ui-numero .cambio.sube { color: var(--ui-logrado); }
.ui-numero .cambio.baja { color: var(--ui-roto); }

/* ===========================================================================
   ESTADOS
   ========================================================================= */
.ui-vacio {
  background: var(--ui-superficie); border: 1px solid var(--ui-borde);
  border-radius: var(--ui-r-md); padding: 52px 28px; text-align: center;
}
.ui-vacio img { width: 44px; height: 44px; opacity: .5; margin-bottom: 14px; }
.ui-vacio h3 { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
/* El estado vacío ENSEÑA qué hacer. No se disculpa. */
.ui-vacio p { font-size: 13.5px; color: var(--ui-tinta-suave); margin: 0 auto 18px; max-width: 44ch; }

.ui-esqueleto {
  background: linear-gradient(90deg, var(--pr-neutro-100) 25%,
              var(--pr-neutro-50) 50%, var(--pr-neutro-100) 75%);
  background-size: 200% 100%; border-radius: 5px; height: 13px;
  animation: ui-brillo 1.3s ease-in-out infinite;
}
@keyframes ui-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-esqueleto { animation: none; } }

.ui-aviso {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px;
  border-radius: var(--ui-r-sm); font-size: 13px; margin-bottom: 12px;
  border-left: 3px solid;
}
.ui-aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.ui-a-logrado { background: var(--ui-logrado-f); color: var(--ui-logrado); border-color: var(--pr-verde-500); }
.ui-a-roto    { background: var(--ui-roto-f);    color: var(--ui-roto);    border-color: var(--pr-magenta-500); }
.ui-a-proceso { background: var(--ui-proceso-f); color: var(--ui-proceso); border-color: var(--pr-naranja-500); }
.ui-a-dato    { background: var(--ui-dato-f);    color: var(--ui-dato);    border-color: var(--pr-morado-500); }

/* ===========================================================================
   DIÁLOGO
   ========================================================================= */
.ui-dialogo {
  border: none; border-radius: var(--ui-r-lg); padding: 0; max-width: 440px; width: calc(100% - 32px);
  box-shadow: var(--ui-sombra-dialogo); color: var(--ui-tinta);
}
.ui-dialogo::backdrop { background: rgba(32,30,31,.45); }
.ui-dialogo-cuerpo { padding: 24px 26px 20px; }
.ui-dialogo h3 { font-size: 17px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 7px; }
.ui-dialogo p { font-size: 13.5px; color: var(--ui-tinta-suave); margin: 0; line-height: 1.55; }
.ui-dialogo-pie {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 26px 20px;
}

/* ===========================================================================
   MENSAJE FLOTANTE
   ========================================================================= */
.ui-mensajes {
  position: fixed; bottom: 18px; right: 18px; z-index: 90;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.ui-mensaje {
  display: flex; align-items: center; gap: 10px;
  background: var(--pr-negro-500); color: #fff; padding: 12px 17px;
  border-radius: var(--ui-r-sm); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--ui-sombra-menu); pointer-events: auto;
  animation: ui-entra .22s var(--ui-paso);
}
.ui-mensaje.malo { background: var(--pr-magenta-800); }
.ui-mensaje .deshacer {
  margin-left: 6px; color: var(--pr-verde-400); font-weight: 700; cursor: pointer;
  background: none; border: none; font-family: var(--ui-fuente); font-size: 13.5px;
}
@keyframes ui-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ui-mensaje { animation: none; } }
@media (max-width: 560px) { .ui-mensajes { left: 14px; right: 14px; bottom: 14px; } }

/* ===========================================================================
   FECHA
   ---------------------------------------------------------------------------
   En iOS el <input type="date"> NO respeta el CSS: Safari le impone su propio
   alto, su tipografía y su alineación desde el shadow DOM, y no hay forma de
   ganarle. Pelearse con eso es perder la tarde.

   La salida: el input nativo se queda (su calendario es el que la gente ya
   sabe usar, y en móvil es mucho mejor que cualquiera que hagamos), pero
   INVISIBLE y estirado encima de una caja nuestra que sí se ve. Se toca el
   input de verdad; se ve lo nuestro.
   ========================================================================= */
.ui-fecha {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--ui-borde-fuerte); border-radius: var(--ui-r-full);
  background: var(--ui-superficie); cursor: pointer; min-width: 150px;
  transition: border-color .15s var(--ui-paso), box-shadow .15s var(--ui-paso);
}
.ui-fecha:hover { border-color: var(--pr-neutro-400); }
.ui-fecha:focus-within {
  border-color: var(--pr-verde-800); box-shadow: 0 0 0 3px rgba(10,113,88,.10);
}
.ui-fecha .ui-ico { width: 16px; height: 16px; color: var(--ui-tinta-tenue); flex: none; }
.ui-fecha .txt {
  font-size: 13.5px; font-weight: 500; color: var(--ui-tinta);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ui-fecha .txt.vacia { color: var(--ui-tinta-tenue); font-weight: 400; }

/* El input de verdad: invisible, encima de todo y del tamaño de la caja.
   opacity:0 y NO display:none — tiene que seguir recibiendo el toque. */
.ui-fecha input[type=date] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer;
  font-size: 16px;   /* menos de 16px hace que iOS acerque la pantalla al tocar */
  -webkit-appearance: none; appearance: none; background: transparent;
}

/* --- rango --- */
.ui-rango { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-rango .hasta { font-size: 12.5px; color: var(--ui-tinta-tenue); }

.ui-atajos { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ui-atajo {
  height: 32px; padding: 0 13px; border-radius: var(--ui-r-full);
  border: 1px solid var(--ui-borde); background: var(--ui-superficie);
  font-family: var(--ui-fuente); font-size: 12.5px; font-weight: 500;
  color: var(--ui-tinta-suave); cursor: pointer; white-space: nowrap;
  transition: border-color .15s var(--ui-paso), background .15s var(--ui-paso);
}
.ui-atajo:hover { border-color: var(--ui-borde-fuerte); }
.ui-atajo.on { background: var(--pr-negro-500); border-color: var(--pr-negro-500); color: #fff; }

@media (max-width: 560px) {
  /* Las dos fechas y el "hasta" en una sola linea. El min-width de la caja
     las hacia no caber y el "hasta" se descolgaba solo al final. */
  .ui-rango { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .ui-rango .ui-fecha { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .ui-rango .ui-fecha .txt { overflow: hidden; text-overflow: ellipsis; }
  .ui-rango .hasta { flex: none; }
}

/* ===========================================================================
   AYUDA FLOTANTE  ·  el nombre del icono cuando la barra está plegada
   ========================================================================= */
.ui-tip {
  position: fixed; z-index: 95; pointer-events: none;
  background: var(--pr-negro-500); color: #fff;
  padding: 8px 13px; border-radius: 9px;
  font-family: var(--ui-fuente); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; box-shadow: var(--ui-sombra-menu);
  border: 1px solid rgba(255,255,255,.13);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .12s var(--ui-paso), transform .12s var(--ui-paso);
}
.ui-tip.visible { opacity: 1; transform: translateX(0); }
/* la puntita que lo ancla al icono */
.ui-tip::before {
  content: ''; position: absolute; left: -5px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; background: var(--pr-negro-500);
  border-left: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { .ui-tip { transition: none; } }