/* ════════════════════════════════════════════════════════════
   CEVADA ARQUITECTOS — Capa de refinamiento UX/UI v1
   Se carga al final del <head> en todos los módulos.
   Unifica tipografía, microinteracciones, foco, scroll y motion
   sin alterar el layout de cada pantalla.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO — un solo criterio para las doce pantallas
   Agregado el 10-ago-2026, aprobado sobre la propuesta visual.

   EL PROBLEMA QUE RESUELVE: cada pantalla traía su propio juego de
   variables, con nombres distintos para lo mismo. Había CINCO:

     --yellow/--surface/--border/--text/--muted   gastos, bitácora
     --y/--s/--s2/--b/--t/--t2                    proyectos, proveedores, agregados
     --y/--card/--t1/--t2/--t3/--sep              dashboard, obras-terminadas
     --y/--card/--sep/--t/--t2                    daniel
     --am/--card2/--inp/--brd/--txt/--hueso       cotizaciones

   Y tres pantallas —index, recibos, reportes— sin variables, con los
   colores escritos a mano. Consecuencias visibles: el amarillo de Cevada
   tenía DOS valores (#FFCF00 y #F5C800 en cotizaciones) y las esquinas
   iban de 10 a 16px según dónde estuvieras. No eran doce pantallas de una
   app: eran doce apps parecidas.

   POR QUÉ SE ARREGLA DESDE AQUÍ: este archivo se carga DESPUÉS del
   <style> de cada pantalla, así que redefinir :root aquí gana. Los cinco
   juegos de nombres se convierten en alias de un solo valor. Cambiar el
   sistema es cambiar este bloque, no doce archivos.
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Color ──
     Los grises llevan una pizca de amarillo dentro (no son neutros puros):
     así el acento se siente parte de la casa y no pegado encima. */
  /* TEMA CLARO / OSCURO (1-oct-2026, Fase 2). Cada color toma su valor de
     cevada-tema.css (la paleta única, que cambia con <html data-theme>).
     El valor después de la coma es el de siempre, en oscuro: lo usa la
     pantalla que TODAVÍA no carga cevada-tema.css, y por eso se ve igual
     que antes hasta que le toca su turno. */
  --cv-fondo:    var(--cv-bg, #0D0D0B);          /* fondo de página */
  --cv-sup:      var(--cv-surface, #161512);     /* superficie: tarjetas */
  --cv-sup-2:    var(--cv-surface-2, #1F1E1A);   /* superficie elevada: campos */
  --cv-linea:    var(--cv-line, #2B2924);        /* borde, sólo donde de verdad hace falta */
  --cv-txt:      var(--cv-ink, #F4F2EC);         /* texto principal: blanco cálido, no #FFF */
  --cv-txt-2:    var(--cv-muted, #A5A199);       /* secundario */
  --cv-txt-3:    var(--cv-muted-2, #6E6B64);     /* terciario y placeholders */

  --cv-y:        var(--cv-accent, #FFCF00);      /* el amarillo de Cevada, como RELLENO */
  /* El amarillo como TEXTO o ICONO. Sobre crema o blanco el #FFCF00 no se
     lee: en claro esta variable es un ocre oscuro; en oscuro, el amarillo. */
  --cv-y-tinta:  var(--cv-accent-ink, #FFCF00);
  --cv-y-sup:    var(--cv-accent-soft, rgba(255,207,0,.10));
  --cv-y-borde:  var(--cv-accent-line, rgba(255,207,0,.32));
  --cv-sobre-y:  #141310;   /* texto sobre amarillo */

  /* Botón de acción: negro en claro, amarillo en oscuro (igual que Pendientes). */
  --cv-primario-bg: var(--cv-primary-bg, #FFCF00);
  --cv-primario-fg: var(--cv-primary-fg, #141310);

  /* Semánticos: para significado, nunca para decorar. Los -sup son su fondo suave. */
  --cv-bien:     var(--cv-ok, #3DD68C);
  --cv-ojo:      var(--cv-warn, #FFA53D);
  --cv-mal:      var(--cv-danger, #FF5A5A);
  --cv-bien-sup: var(--cv-ok-soft, rgba(61,214,140,.14));
  --cv-ojo-sup:  var(--cv-warn-soft, rgba(255,165,61,.14));
  --cv-mal-sup:  var(--cv-danger-soft, rgba(255,90,90,.14));

  --cv-sombra:   var(--cv-shadow, none);                       /* tarjetas */
  --cv-sombra-flotante: 0 18px 40px rgba(0,0,0,.6);            /* desplegables */
  --cv-velo:     var(--cv-scrim, rgba(0,0,0,.8));              /* detrás de un modal */

  /* ── Medidas ── */
  --cv-e1:4px; --cv-e2:8px; --cv-e3:12px; --cv-e4:16px;
  --cv-e5:24px; --cv-e6:32px; --cv-e7:48px;

  /* A mayor superficie, mayor radio. */
  --cv-r-ch:  10px;   /* chips, etiquetas */
  --cv-r-md:  14px;   /* campos, botones */
  --cv-r-gr:  20px;   /* tarjetas */
  --cv-r-pill: 999px;

  --cv-ease: cubic-bezier(.25, .8, .3, 1);

  /* ══ ALIAS ══
     Los nombres viejos apuntan aquí. Ninguna pantalla se reescribe. */

  /* gastos · bitácora */
  --yellow: var(--cv-y);
  --bg: var(--cv-fondo);
  --surface: var(--cv-sup);
  --surface2: var(--cv-sup-2);
  --border: var(--cv-linea);
  --text: var(--cv-txt);
  --muted: var(--cv-muted, #8B8880);   /* punto medio: era #555 aquí y #aaa en cotizaciones */
  --muted2: var(--cv-txt-2);
  --radius: var(--cv-r-md);
  --success: var(--cv-bien);
  --error: var(--cv-mal);

  /* proyectos · proveedores · agregados */
  --y: var(--cv-y);
  --s: var(--cv-sup);
  --s2: var(--cv-sup-2);
  --b: var(--cv-linea);
  --t: var(--cv-txt);
  --t2: var(--cv-txt-2);
  --t3: var(--cv-txt-3);
  --r: var(--cv-r-gr);

  /* dashboard · obras-terminadas */
  --yb: #FFF5CC;
  --card: var(--cv-sup);
  --t1: var(--cv-txt);
  --sep: var(--cv-linea);
  --rs: var(--cv-r-md);

  /* daniel — usa --y, --bg, --card, --sep, --t, --t2, ya cubiertos */

  /* cotizaciones — traía su propio amarillo (#F5C800) y sus propios grises */
  --am: var(--cv-y);
  --am-dk: #D9AF00;
  --card2: var(--cv-sup-2);
  --inp: var(--cv-sup-2);
  --brd: var(--cv-linea);
  --txt: var(--cv-txt);
}
/* En claro la sombra de lo flotante es mucho más suave: una sombra negra al
   60% sobre crema se ve como una mancha. */
html[data-theme="light"] { --cv-sombra-flotante: 0 18px 40px -12px rgba(22,21,15,.28); }

/* ── Tipografía unificada ── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea {
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════
   NAVEGACIÓN SIN PARPADEO — 10-ago-2026

   EL PROBLEMA: la app son doce páginas HTML independientes. Cada vez que
   se cambia de herramienta, el navegador tira la pantalla actual, se queda
   un instante en blanco/negro y arma la siguiente desde cero. Ese
   parpadeo es lo que más la separaba de una app de la App Store.

   LA SOLUCIÓN: transiciones de vista entre documentos. El navegador toma
   una foto de la pantalla que se va, otra de la que llega, y funde una en
   otra. Por dentro sigue siendo una carga de página; por fuera se ve como
   una app que desliza entre pantallas.

   Es estándar del navegador, no un truco: no hay que reescribir las doce
   páginas ni juntarlas en una sola. Donde no esté soportado (navegadores
   viejos) simplemente se ve como hasta ahora — nada se rompe.
   ════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: cvSale .18s var(--cv-ease) both;
}
::view-transition-new(root) {
  animation: cvEntra .26s var(--cv-ease) both;
}
@keyframes cvSale  { to   { opacity: 0; } }
@keyframes cvEntra { from { opacity: 0; } }

/* ── Entrada de página para navegadores sin transiciones de vista ──
   Sin transform en body: un transform (aunque sea identidad) rompe
   position:fixed de sus descendientes (el botón flotante de Sara quedaba
   anclado al documento). */
@keyframes cvPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: cvPageIn .32s var(--cv-ease) both; }

/* Con transiciones de vista, la animación del body sobra: son dos
   desvanecidos encima del otro y se ve un doble parpadeo. */
@supports (view-transition-name: none) {
  body { animation: none; }
}

/* ── Tap / press feedback consistente ── */
* { -webkit-tap-highlight-color: transparent; }
button, [role="button"], a.btn, .btn {
  transition-property: transform, opacity, background-color, border-color, color, box-shadow;
  transition-duration: .16s;
  transition-timing-function: var(--cv-ease);
}
button:active, [role="button"]:active, a.btn:active, .btn:active {
  transform: scale(.97);
}
button:disabled { transform: none; }

/* ── Foco visible y elegante (teclado) ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cv-y-tinta);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--cv-y-tinta) !important;
  box-shadow: 0 0 0 3px var(--cv-y-sup);
}

/* ── Inputs: transición uniforme ── */
input, select, textarea {
  transition: border-color .16s var(--cv-ease), box-shadow .16s var(--cv-ease), background-color .16s var(--cv-ease);
  accent-color: var(--cv-y);
}

/* ── Scrollbars discretos ── */
* { scrollbar-width: thin; scrollbar-color: rgba(128,128,128,.35) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.5); }

/* ── Selección de texto en amarillo de marca ── */
::selection { background: rgba(255, 207, 0, .3); }

/* ── Imágenes y media nunca desbordan ── */
img, svg, video, canvas { max-width: 100%; height: auto; }
canvas { height: 100% !important; } /* Chart.js gestiona su alto */

/* ── Scroll suave en anclas ── */
html { scroll-behavior: smooth; }

/* ── Overlays y modales: aparición estándar ──
   Aplica a los patrones de clase usados en los módulos. */
@keyframes cvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[class*="overlay"].open, [class*="modal"].open, [class*="modal"].active,
[class*="sheet"].open, [class*="panel"].open {
  animation: cvModalIn .24s var(--cv-ease);
}

/* ── Tablas: hover de fila sutil ── */
tbody tr { transition: background-color .12s var(--cv-ease); }

/* ── Respeto a usuarios con motion reducido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VOLVER AL INICIO — arriba a la izquierda, igual en las 11 pantallas
   Reescrito el 6-ago-2026.

   PRIMER INTENTO (fallido): un botón de ancho completo al final del
   contenido, como el que tenía recibos. En escritorio se veía "muy grande,
   luego muy chiquito y mal acomodado", y con razón:

     CINCO de las once páginas tienen  display:flex  en el <body>
     (recibos, index, agregados, proyectos, reportes).

   En esas, un <a> de ancho completo deja de ser un bloque normal y se
   convierte en UN ELEMENTO FLEX MÁS: se estira o se encoge según lo que
   tenga al lado y según el align-items de cada página. De ahí que en cada
   pantalla saliera de un tamaño distinto. No era el botón: era que el mismo
   botón caía en cinco contextos de layout diferentes.

   AHORA: position:fixed arriba a la izquierda. Al salirse del flujo, el
   layout de la página deja de afectarlo por completo — se ve idéntico en
   las once, en escritorio y en celular. Es además donde lo espera cualquiera
   que haya usado una app.

   El body recibe un padding-top para que el botón no tape el contenido.

   La excepción se marca con class="sin-hueco-inicio" en el <body>. Hoy la
   llevan dos pantallas, por motivos distintos:
     · dashboard → ya trae su propia barra superior; el hueco dejaría una
                   franja negra encima de ella
     · index     → es el inicio, no lleva botón: reservarle sitio sería
                   dejar un hueco vacío sin razón

   Se hace con :not() y no con un override en cada página porque
   cevada-ui.css se carga DESPUÉS del <style> de cada pantalla: una regla
   body{...} suya siempre perdería. Con :not() la especificidad es mayor y
   deja de depender del orden de carga.
   ════════════════════════════════════════════════════════════ */
body:not(.sin-hueco-inicio) { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }

.btn-inicio {
  position: fixed;
  top:  calc(11px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 300;                 /* encima del contenido; debajo de los modales */

  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;                  /* NUNCA de ancho completo: eso lo rompía */
  min-height: 34px;
  padding: 0 14px 0 11px;
  box-sizing: border-box;

  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  color: var(--cv-y-tinta);
  /* Fondo con desenfoque: así se lee sobre cualquier pantalla, tenga arriba
     una tarjeta clara, una gráfica o el fondo negro. */
  background: rgba(22, 22, 22, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cv-y-borde);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s var(--cv-ease),
              border-color .16s var(--cv-ease),
              transform .16s var(--cv-ease);
}
.btn-inicio svg { flex: none; transition: transform .16s var(--cv-ease); }
.btn-inicio:hover {
  background: rgba(32, 32, 32, .86);
  border-color: rgba(255, 207, 0, .55);
}
/* En claro: pastilla blanca con texto oscuro, como los botones redondos de
   Pendientes. La versión oscura translúcida se vería como un parche negro. */
html[data-theme="light"] .btn-inicio,
html[data-theme="light"] .btn-tema {
  color: var(--cv-txt);
  background: rgba(255, 255, 255, .86);
  border-color: var(--cv-linea);
  box-shadow: 0 1px 2px rgba(22,21,15,.05), 0 8px 20px -10px rgba(22,21,15,.22);
}
html[data-theme="light"] .btn-inicio:hover,
html[data-theme="light"] .btn-tema:hover {
  background: #FFFFFF;
  border-color: var(--cv-txt-3);
}
.btn-inicio:hover svg { transform: translateX(-2px); }
.btn-inicio:active { transform: scale(.97); }
.btn-inicio:focus-visible,
.btn-tema:focus-visible {
  outline: 2px solid var(--cv-y-tinta);
  outline-offset: 2px;
}

/* ── Sol / luna: cambia entre tema claro y oscuro ──
   Gemelo del botón de inicio, en la esquina contraria. Lo conecta
   cevada-tema.js con sólo llevar el atributo data-cv-tema. */
.btn-tema {
  position: fixed;
  top:   calc(11px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--cv-y-tinta);
  background: rgba(22, 22, 22, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--cv-y-borde);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.btn-tema svg { width: 16px; height: 16px; flex: none; }
.btn-tema:hover { background: rgba(32, 32, 32, .86); border-color: rgba(255, 207, 0, .55); }

/* Las variantes viejas se ocultan desde aquí: así no hay que ir a rastrear
   cada una en su HTML, y si alguna se quedó, no aparecen dos botones. */
a.back { display: none !important; }


/* ════════════════════════════════════════════════════════════
   COMPONENTES — el mismo campo, el mismo botón, la misma tarjeta
   en las doce pantallas.

   La idea de fondo, tomada de las referencias (MonAi, Headspace) y
   traducida al oscuro: SEPARAR POR SUPERFICIE, NO POR LÍNEA.
   Hoy cada campo lleva un borde de 1px — son doce líneas en una sola
   pantalla, y es lo que la hace ver formulario web. Un campo se distingue
   porque su fondo es más claro que la tarjeta, no porque tenga marco.
   El borde vuelve sólo al enfocar, y entonces sí es amarillo y se ve.
   ════════════════════════════════════════════════════════════ */

body { background: var(--cv-fondo); color: var(--cv-txt); }

/* ── Etiquetas ──
   Estaban en 11px, MAYÚSCULAS y gris #888: se leían mal y gritaban.
   Sólo cambia la tipografía; nada de layout, para no mover nada de sitio. */
.field > label,
.grupo > label,
label.cv-lbl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cv-txt-2);
}

/* ── Campos ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.cbx-input {
  background-color: var(--cv-sup-2);
  border: 1px solid transparent;
  border-radius: var(--cv-r-md);
  color: var(--cv-txt);
  font-size: 15px;
  transition: border-color .16s var(--cv-ease), background-color .16s var(--cv-ease);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
.cbx-input {
  min-height: 46px;   /* altura cómoda para el dedo; estaban en 43-44 */
}
textarea { min-height: 92px; }

input::placeholder, textarea::placeholder, .cbx-input::placeholder {
  color: var(--cv-txt-3);
}

/* El foco se tiene que ver. Antes casi no se distinguía cuál estaba activo. */
input:focus, select:focus, textarea:focus, .cbx-input:focus {
  outline: none;
  border-color: var(--cv-y-tinta);
  background-color: var(--cv-sup);
}
.cbx.open .cbx-input { border-color: var(--cv-y-tinta); }

/* Foco visible también para quien navega con teclado. */
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cv-y-tinta);
  outline-offset: 2px;
}

/* ── Tarjetas ──
   Más redondeadas, sin marco, con la superficie haciendo la separación. */
.card, .tarjeta, .panel-card {
  background-color: var(--cv-sup);
  border-color: transparent;
  border-radius: var(--cv-r-gr);
}
/* En claro la tarjeta blanca se despega del crema con sombra, no con marco.
   (En oscuro no hay sombra: ahí separa el cambio de superficie.) */
html[data-theme="light"] .card,
html[data-theme="light"] .tarjeta,
html[data-theme="light"] .panel-card { box-shadow: var(--cv-sombra); }

/* ── Desplegable del combo ── */
.cbx-panel {
  background-color: var(--cv-sup-2);
  border: 1px solid var(--cv-linea);
  border-radius: var(--cv-r-md);
}
.cbx-opt { border-bottom-color: var(--cv-linea); }
.cbx-opt:hover, .cbx-opt.act { background-color: var(--cv-y-sup); color: var(--cv-y-tinta); }

/* ── Separadores ──
   Se quedan, pero se vuelven casi invisibles: marcan un cambio de bloque,
   no dibujan una reja. */
.divider, .sep, hr {
  background-color: var(--cv-linea);
  border-color: var(--cv-linea);
}

/* ── Botón principal ──
   Sólo el de acción; los de icono y los secundarios no se tocan. */
.btn, #submit-btn, .submit-btn, .btn-primario {
  border-radius: var(--cv-r-md);
  min-height: 48px;
  font-weight: 700;
  letter-spacing: -.005em;
}
#submit-btn, .submit-btn, .btn-primario {
  background-color: var(--cv-primario-bg);
  color: var(--cv-primario-fg);
  border: 0;
}
#submit-btn:hover, .submit-btn:hover, .btn-primario:hover { filter: brightness(1.06); }

/* ── Chips y pills ── */
.chip, .pill, .tag { border-radius: var(--cv-r-pill); }


/* ════════════════════════════════════════════════════════════
   DESPLEGABLES — el mismo en toda la app  (ver cevada-combo.js)

   Antes convivían dos cosas: un combo hecho a mano en gastos y recibos, y
   <select> nativos en todo lo demás. El nativo lo dibuja el sistema
   operativo: se ve cuadrado al abrirse y decide él solo si abre hacia
   arriba o hacia abajo según el espacio que le quede. De ahí que en
   reportes se abriera bien y en recibos hacia arriba, tapando el campo.

   Éste se abre SIEMPRE hacia abajo y se ve igual en las nueve pantallas.
   ════════════════════════════════════════════════════════════ */
.cvc { position: relative; }
.cvc-oculto {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important; height: 1px !important;
  min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important;
}

.cvc-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cv-e2);
  width: 100%;
  min-height: 46px;              /* la misma altura que los demás campos */
  padding: 11px 14px;
  background-color: var(--cv-sup-2);
  border: 1px solid transparent;
  border-radius: var(--cv-r-md);
  color: var(--cv-txt);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--cv-ease), background-color .16s var(--cv-ease);
}
.cvc-campo:hover { background-color: var(--cv-sup); }
.cvc-campo:focus-visible { outline: 2px solid var(--cv-y-tinta); outline-offset: 2px; }
/* Abierto: el campo se queda redondeado. El nativo se volvía cuadrado. */
.cvc.abierto .cvc-campo { border-color: var(--cv-y-tinta); background-color: var(--cv-sup); }

.cvc-valor {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvc-valor.cvc-placeholder { color: var(--cv-txt-3); }
.cvc-flecha {
  flex: none; display: flex; color: var(--cv-txt-3);
  transition: transform .18s var(--cv-ease);
}
.cvc.abierto .cvc-flecha { transform: rotate(180deg); color: var(--cv-y-tinta); }

.cvc-panel {
  /* Ya NO usa display:none/flex: así puede transicionar. Cerrado, se saca
     de la interacción con opacity+visibility+pointer-events, no con
     display — que no admite transición y por eso antes aparecía de golpe.
     Es el control más tocado de las doce pantallas (proveedor, partida,
     obra, forma de pago, mes...), así que este solo cambio se nota en
     TODA la app de un jalón. */
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 200;
  left: 0; right: 0;
  top: calc(100% + 6px);         /* SIEMPRE debajo, nunca encima del campo */
  background-color: var(--cv-sup-2);
  border: 1px solid var(--cv-linea);
  border-radius: var(--cv-r-md);
  box-shadow: var(--cv-sombra-flotante);
  overflow: hidden;
  /* Nace pegado al campo del que sale (siempre está justo debajo, a todo
     lo ancho): el origen del escalado es arriba, no el centro. */
  transform-origin: top;
  transform: scale(.96) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .16s var(--cv-ease), opacity .12s var(--cv-ease),
              visibility 0s linear .16s;
}
.cvc.abierto .cvc-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .16s var(--cv-ease), opacity .12s var(--cv-ease),
              visibility 0s linear;
}

.cvc-buscar {
  flex: none;
  width: 100%;
  min-height: 42px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cv-linea) !important;
  border-radius: 0 !important;
  background-color: var(--cv-sup) !important;
  color: var(--cv-txt);
  font-size: 14.5px;
  padding: 10px 14px;
}
.cvc-buscar:focus { outline: none; }

.cvc-lista {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;           /* deslizar hace scroll; tocar elige */
}
.cvc-opt {
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--cv-txt);
  cursor: pointer;
  border-bottom: 1px solid var(--cv-linea);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s var(--cv-ease), color .12s var(--cv-ease);
}
.cvc-opt:last-child { border-bottom: 0; }
.cvc-opt:hover { background-color: var(--cv-y-sup); color: var(--cv-y-tinta); }
.cvc-opt.act   { background-color: var(--cv-y-sup); color: var(--cv-y-tinta); font-weight: 600; }
.cvc-vacio { padding: 14px; font-size: 13.5px; color: var(--cv-txt-3); }

/* ── Campos de fecha ──
   El calendario nativo del teléfono es mejor que cualquiera que hagamos,
   así que se conserva. Lo que se arregla es el tamaño: en iOS el control
   trae su propio alto y su propio relleno, y al lado de un desplegable de
   46px se veía más grande y se cortaba. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  min-height: 46px;
  height: 46px;
  padding: 0 14px;
  -webkit-appearance: none;
  appearance: none;
  line-height: normal;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(60%) saturate(1200%) hue-rotate(1deg);
  cursor: pointer;
  opacity: .85;
}
/* En claro el icono del calendario se queda oscuro, como lo dibuja el sistema. */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }


/* ════════════════════════════════════════════════════════════
   ESCRITORIO — paso 4 del plan de diseño
   Agregado el 10-ago-2026.

   EL PROBLEMA, medido a 1440px de ancho:
     index      420px de contenido →  71% de pantalla vacía
     gastos     560px              →  61%
     proyectos  520px              →  64%
     recibos    520px              →  64%
     agregados  520px              →  64%
     reportes   620px              →  57%
     proveedores 620px             →  57%
     bitácora   620px              →  57%
     dashboard  960px              →  33%  (ya estaba bien)

   La app se diseñó para celular y se usa también en la oficina: en un
   monitor era una tira angosta flotando en negro. Eso es lo que la hacía
   sentir "formulario web" en vez de aplicación.

   Todo esto vive dentro de una media query: EN CELULAR NO CAMBIA NADA.
   ════════════════════════════════════════════════════════════ */

/* Ancho por defecto en celular: idéntico al que tenían escrito en línea. */
.cv-envoltura       { max-width: 560px; margin: 0 auto; }
.cv-envoltura-ancha { max-width: 620px; margin: 0 auto; }

@media (min-width: 900px) {

  /* ── Contenedores: dejar de desperdiciar la pantalla ── */
  .cv-envoltura       { max-width: 940px; }
  .cv-envoltura-ancha { max-width: 900px; }
  .card               { max-width: 780px; }
  /* Sólo el <div class="main"> de proveedores. El dashboard y
     obras-terminadas usan <main class="main"> y ya venían en 960px:
     una regla .main a secas los ENCOGÍA a 900. Nada debe achicarse. */
  div.main            { max-width: 900px; }

  /* ── REGISTRO DE GASTOS a dos columnas ──
     Es la pantalla que más se usa y la que más campos tiene: catorce
     seguidos en una sola columna obligaban a un scroll larguísimo.
     La tarjeta se vuelve una rejilla de dos columnas; lo que necesita
     ancho completo se marca abajo. */
  .cv-envoltura > .card {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cv-e4) var(--cv-e5);
    align-items: start;
  }
  /* Sólo estos cuatro ocupan el ancho completo. Al principio marqué también
     la fecha/monto y los interruptores, y el formulario quedó casi igual de
     largo que en celular (1082px contra 1072): si casi todo se extiende, no
     hay dos columnas que valgan. Con esta lista corta sí se emparejan. */
  .cv-envoltura > .card > .divider,
  .cv-envoltura > .card > .preview-box,
  .cv-envoltura > .card > .submit-btn,
  .cv-envoltura > .card > .field:has(textarea) {
    grid-column: 1 / -1;
  }
  /* Marcado explícito, por si el navegador no soporta :has(). */
  .cv-ancho-completo { grid-column: 1 / -1; }

  /* ── INICIO: las herramientas en rejilla ──
     Eran ocho tarjetas apiladas en una columna de 420px. En escritorio
     caben dos por fila y se ven todas sin bajar.
     El selector lleva [style*="flex"] porque el JavaScript enseña la
     pantalla con style.display='flex' escrito en línea, y un estilo en
     línea le gana a la hoja de estilos: así sólo se convierte en rejilla
     la pantalla que de verdad está visible, y la oculta sigue oculta. */
  .wrap { max-width: 880px; }
  .app-screen[style*="flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--cv-e3) var(--cv-e4);
    align-items: start;
  }
  .app-screen[style*="flex"] > .logo-wrap,
  .app-screen[style*="flex"] > .logo-box,
  .app-screen[style*="flex"] > .sec-label,
  .app-screen[style*="flex"] > .sep,
  .app-screen[style*="flex"] > .logout {
    grid-column: 1 / -1;
  }
}

/* En pantallas muy anchas el formulario no crece más: una línea de texto
   demasiado larga se vuelve incómoda de leer y de llenar. */
@media (min-width: 1400px) {
  .cv-envoltura { max-width: 1040px; }
  .wrap         { max-width: 960px; }
}