/* Estilos mobile-first: primero pensado para celular, botones grandes y letra clara. */

:root {
  --azul: #1F4E79;
  --azul-claro: #E8F0F8;
  --verde-wa: #1FA855;
  --rojo: #D92D20;
  --amarillo: #FFF4C2;
  --amarillo-borde: #F5B800;
  --gris: #667085;
  --gris-claro: #F2F4F7;
  --borde: #D0D5DD;
  --texto: #101828;
  --superficie: #fff;          /* fondo de tarjetas, campos y menú */
  --azul-texto: var(--azul);   /* azul usado como color de letra */
  --ok-fondo: #E7F8EE;  --ok-texto: #05603A;
  --error-fondo: #FEE4E2; --error-texto: #912018;
  --seguimiento-texto: #7A5A00;
  --naranja: #B54708;
  --verde: #079455;
  --gris-oscuro: #475467;
  --velo: rgba(255, 255, 255, .94);
  --sombra: rgba(16, 24, 40, .1);
  --radio: 14px;
  --logo: #1F4E79;             /* el micrófono del logo (templates/_logo.html) */
  --marca-arriba: #1F4E79;     /* "Presupuestos" en el logo grande */
  --marca-abajo: #2E6DA4;      /* "por Voz" */
  color-scheme: light;
}

/* Modo oscuro: se activa con el botón de la barra (atributo data-tema en <html>) */
:root[data-tema="oscuro"] {
  --azul: #2E6DA4;
  --azul-claro: #1C2B3D;
  --azul-texto: #7DB3E8;
  --verde-wa: #1A9A4D;
  --rojo: #F04438;
  --amarillo: #3D3310;
  --amarillo-borde: #A37C00;
  --gris: #98A2B3;
  --gris-claro: #0F1419;
  --borde: #344054;
  --texto: #E6E9EE;
  --superficie: #1A2129;
  --ok-fondo: #0B3B24;  --ok-texto: #75E0A7;
  --error-fondo: #4A1410; --error-texto: #FDA29B;
  --seguimiento-texto: #FEDF89;
  --naranja: #FDB022;
  --gris-oscuro: #667085;
  --velo: rgba(15, 20, 25, .94);
  --sombra: rgba(0, 0, 0, .4);
  --logo: #3B7BBF;
  --marca-arriba: #E6E9EE;
  --marca-abajo: #7DB3E8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* lo oculto, siempre oculto (aunque sea un .boton) */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--gris-claro);
  padding-bottom: 90px; /* lugar para el menú de abajo */
}

a { color: var(--azul-texto); }

h1 { font-size: 1.5rem; margin: 8px 0 12px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }

/* ---------- Barra superior y menú inferior ---------- */

.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--azul); color: #fff;
}
.marca {
  color: #fff; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px;
  font-size: clamp(14px, 4.6vw, 18px); white-space: nowrap; /* en un celular chico no se parte en dos */
}

/* Logo (templates/_logo.html): micrófono con renglones */
.logo { --logo-forma: var(--logo); --logo-renglon: #F5B800; flex-shrink: 0; }
.logo-blanco { --logo-forma: #fff; --logo-renglon: var(--azul); flex-shrink: 0; }
.logo-forma { fill: var(--logo-forma); }
.logo-renglon { fill: var(--logo-renglon); }
.logo-trazo { fill: none; stroke: var(--logo-forma); stroke-width: 4.5; stroke-linecap: round; }
.marca-grande { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 6px; }
.marca-grande svg { width: clamp(50px, 17vw, 68px); height: auto; }
.marca-grande span {
  display: flex; flex-direction: column;
  font-size: clamp(1.35rem, 8.5vw, 1.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.5px;
  color: var(--marca-arriba);
}
.marca-grande small { font-size: inherit; font-weight: 700; color: var(--marca-abajo); }
.salir { color: #fff; font-size: 0.9rem; }
.barra-derecha { display: flex; align-items: center; gap: 14px; }
.boton-tema {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5); background: transparent;
  color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contenido { max-width: 640px; margin: 0 auto; padding: 12px 16px; }

.menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center; background: var(--superficie); border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.menu a {
  /* El espacio que sobra se reparte parejo entre todos, así "Seguimiento" y "Recordatorios" no quedan
     pegados. En la tablet no se desparraman */
  flex: 1 1 auto; max-width: 130px;
  text-align: center; padding: 8px 1px 10px;
  font-size: clamp(0.62rem, 3.1vw, 0.75rem); /* en un celular chico, "Seguimiento" entra justo */
  color: var(--gris); text-decoration: none;
}
.menu a.activo { color: var(--azul-texto); font-weight: 700; }
.menu .icono { display: block; font-size: 1.4rem; line-height: 1.3; position: relative; }
/* Cuántas cosas hay para hoy en "Para hacer" */
.burbuja {
  position: absolute; top: -2px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rojo); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 18px;
}

/* ---------- Tarjetas, formularios y botones ---------- */

.tarjeta {
  background: var(--superficie); border-radius: var(--radio);
  padding: 16px; margin-bottom: 14px;
  box-shadow: 0 1px 3px var(--sombra);
}
.angosta { max-width: 420px; margin: 24px auto; }
.centro { text-align: center; }
.ayuda { color: var(--gris); font-size: 0.9rem; }

label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.95rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 14px; font-size: 18px; /* 16px o más evita el zoom automático en iPhone */
  border: 1.5px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--texto); font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); }
textarea { resize: vertical; }
.oficio-otro[hidden] { display: none; } /* "label" tiene display:block y si no, le gana a "hidden" */
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.check input { width: auto; margin: 0; }

.boton {
  display: block; width: 100%;
  padding: 16px; margin-bottom: 10px;
  font-size: 1.1rem; font-weight: 700; text-align: center; text-decoration: none;
  border: none; border-radius: 12px; cursor: pointer;
}
.boton-principal { background: var(--azul); color: #fff; }
.boton-secundario { background: var(--azul-claro); color: var(--azul-texto); }
.boton-whatsapp { background: var(--verde-wa); color: #fff; }
.boton-link {
  background: none; border: none; color: var(--azul-texto);
  font-size: 1rem; text-decoration: underline; padding: 12px; cursor: pointer;
}
.peligro { color: var(--rojo); }
.archivo { cursor: pointer; }

/* ---------- Avisos ---------- */

.aviso {
  display: block; padding: 12px 14px; border-radius: 10px;
  margin-bottom: 12px; font-size: 0.95rem; text-decoration: none;
}
.aviso-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso-error { background: var(--error-fondo); color: var(--error-texto); }
.aviso-seguimiento { background: var(--amarillo); color: var(--seguimiento-texto); font-weight: 700; }
.aviso-recordatorio { background: var(--azul-claro); color: var(--azul-texto); }

/* ---------- Micrófono ---------- */

.microfono {
  width: 160px; height: 160px; border-radius: 50%;
  border: none; margin: 10px auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul); color: #fff; cursor: pointer;
  box-shadow: 0 6px 20px rgba(31, 78, 121, .35);
  -webkit-tap-highlight-color: transparent;
}
.microfono.grabando { background: var(--rojo); animation: latido 1.2s infinite; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, .5); }
  70%  { box-shadow: 0 0 0 26px rgba(217, 45, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}
.estado-grabacion { font-weight: 700; font-size: 1.1rem; margin: 6px 0; }
.cronometro { font-size: 1.6rem; font-variant-numeric: tabular-nums; margin: 0; color: var(--rojo); }

.cargando {
  position: fixed; inset: 0; z-index: 50;
  background: var(--velo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; font-weight: 700;
}
.cargando[hidden] { display: none; }
.ruedita {
  width: 56px; height: 56px; border-radius: 50%;
  border: 6px solid var(--azul-claro); border-top-color: var(--azul);
  animation: girar 0.9s linear infinite; margin-bottom: 16px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Revisión ---------- */

.faltantes {
  background: var(--amarillo); border: 1.5px solid var(--amarillo-borde);
  border-radius: var(--radio); padding: 12px 16px; margin-bottom: 14px;
}
.faltantes ul { margin: 6px 0; padding-left: 20px; }
.falta { background: var(--amarillo) !important; border-color: var(--amarillo-borde) !important; }

.item {
  border: 1.5px solid var(--borde); border-radius: 12px;
  padding: 10px; margin-bottom: 12px;
}
.item-fila { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
.item-fila input, .item-fila select { margin-top: 4px; }
.item-desc { flex: 1; }
.mini { margin: 0; font-size: 0.8rem; width: 80px; flex-shrink: 0; }
.mini.crece { flex: 1; width: auto; }
.item-fila select { flex: 1; }
.item-subtotal { font-weight: 700; white-space: nowrap; padding-bottom: 14px; }
.btn-quitar {
  width: 48px; height: 52px; flex-shrink: 0;
  border: none; border-radius: 10px;
  background: var(--error-fondo); color: var(--rojo); font-size: 1.6rem; cursor: pointer;
}
.total-caja {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--azul); color: #fff; border-radius: 12px;
  padding: 14px 16px; margin-top: 6px; font-size: 1.2rem;
}
.transcripcion { font-style: italic; color: var(--gris); }
summary { cursor: pointer; font-weight: 600; }

.acciones-fijas {
  position: sticky; bottom: 78px;
  display: flex; gap: 8px;
  background: var(--gris-claro); padding: 8px 0;
}
.acciones-fijas .boton { margin: 0; }

/* ---------- Ver presupuesto ---------- */

.cliente-grande { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; }
.total-grande { font-size: 2rem; font-weight: 800; color: var(--azul-texto); margin: 10px 0 0; }

/* ---------- Lista y estados ---------- */

.filtros { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.filtros a {
  flex-shrink: 0; padding: 8px 14px; border-radius: 20px;
  background: var(--superficie); border: 1px solid var(--borde);
  text-decoration: none; color: var(--texto); font-size: 0.9rem;
}
.filtros a.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

.presupuesto-link { text-decoration: none; color: inherit; display: block; }
.presupuesto-arriba { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--gris); }
.numero { font-weight: 700; }
.dias { color: var(--naranja); font-weight: 700; }
.cliente { font-size: 1.15rem; font-weight: 700; margin: 4px 0 0; }
.trabajo { margin: 0; color: var(--gris); }
.monto { font-size: 1.3rem; font-weight: 800; color: var(--azul-texto); margin: 6px 0 10px; }

.estados { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 70px; padding: 10px 6px;
  border-radius: 20px; border: 1.5px solid var(--borde);
  background: var(--superficie); color: var(--gris);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.chip-borrador.activo { background: var(--gris-oscuro); border-color: var(--gris-oscuro); color: #fff; }
.chip-enviado.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip-aceptado.activo { background: var(--verde); border-color: var(--verde); color: #fff; }
.chip-rechazado.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.seguimiento .chip-aceptado, .chip-aceptado:hover { border-color: var(--verde); }

.logo-actual { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.logo-actual img { max-width: 120px; max-height: 70px; border: 1px solid var(--borde); border-radius: 8px; padding: 4px; }

/* ---------- Cómo funciona (login y Mis presupuestos) ---------- */

h3 { font-size: 1rem; margin: 0 0 8px; }
.pasos { margin: 0 0 18px; padding-left: 22px; }
.pasos li { margin-bottom: 8px; }
.ejemplo-rotulo { font-weight: 700; font-size: 0.9rem; color: var(--gris); margin: 12px 0 6px; }
.ejemplo-dicho {
  margin: 0; padding: 12px 14px;
  background: var(--azul-claro); border-left: 4px solid var(--azul);
  border-radius: 10px; font-style: italic;
}
.ejemplo-presupuesto { border: 1.5px solid var(--borde); border-radius: 12px; padding: 12px; }
.ejemplo-items { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.ejemplo-items td { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.ejemplo-items td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 10px; }
.ejemplo-presupuesto .ayuda { margin: 8px 0 0; }
.como-funciona summary { color: var(--azul-texto); }
.como-funciona[open] summary { margin-bottom: 12px; }

/* ---------- Planes y cupo ---------- */

.cupo { margin: 0 0 12px; font-size: 0.95rem; }
.plan { position: relative; }
.plan h2 { margin-bottom: 4px; }
.plan-precio { font-size: 1.8rem; font-weight: 800; color: var(--azul-texto); margin: 0; }
.plan-precio span { font-size: 0.9rem; font-weight: 600; color: var(--gris); }
.plan-cantidad { font-weight: 700; margin: 4px 0; }
.plan-recordatorios { margin: 0 0 4px; font-size: 0.95rem; }
.plan .ayuda { margin: 0 0 12px; }
.plan .boton { margin: 0; }
.plan-actual { box-shadow: 0 0 0 2px var(--azul); }
.plan-etiqueta {
  position: absolute; top: 14px; right: 14px; margin: 0;
  padding: 2px 10px; border-radius: 20px;
  background: var(--azul); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.boton:disabled { opacity: 0.6; cursor: default; }

/* ---------- Para hacer (recordatorios) ---------- */

.microfono-chico { width: 110px; height: 110px; }
.microfono:disabled:not(.ocupado) { background: var(--gris); box-shadow: none; cursor: default; }
.al-terminar { margin: 4px 0 8px; }
/* Mientras anota (Para hacer no tapa la pantalla): el micrófono queda quieto con un aro que gira */
.microfono.ocupado { position: relative; opacity: .75; cursor: default; }
.microfono.ocupado::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 4px solid transparent; border-top-color: var(--azul);
  animation: girar 0.9s linear infinite;
}
.anotar-texto { display: flex; gap: 8px; margin-top: 12px; }
.anotar-texto input { margin: 0; flex: 1; min-width: 0; }
.anotar-texto .boton { width: auto; margin: 0; padding: 14px 18px; }
@media (max-width: 359px) {
  .anotar-texto { flex-direction: column; } /* en un celular chico, el botón va abajo del campo */
  .anotar-texto .boton { width: 100%; }
}

.dia h2 { font-size: 1.05rem; margin: 0 0 8px; }
.dia-hoy h2 { color: var(--azul-texto); }
.dia-atrasados h2, .dia-atrasados .tarea-cuando { color: var(--rojo); }
.dia .ayuda { margin: 0; }

.tareas { list-style: none; margin: 0; padding: 0; }
.hechos { margin-top: 10px; }
.tarea { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--borde); }
.tarea:first-child { border-top: none; }
.tarea form { margin: 0; }
.tilde {
  width: 34px; height: 34px; flex-shrink: 0; padding: 0;
  border-radius: 50%; border: 2px solid var(--borde); background: var(--superficie);
  color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tilde:hover { border-color: var(--verde); }
.tilde-hecha { background: var(--verde); border-color: var(--verde); }
.tarea-cuerpo { flex: 1; min-width: 0; padding-top: 5px; }
.tarea-texto { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.tarea-cuando { display: block; font-size: 0.85rem; color: var(--gris); }
.hecha .tarea-texto { text-decoration: line-through; color: var(--gris); }
/* Una lista ("Traer del supermercado"): el título se toca y se abren las cosas */
.tarea-lista summary { list-style: none; font-weight: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tarea-lista summary::-webkit-details-marker { display: none; }
.tarea-lista summary .tarea-texto { display: inline; }
.tarea-lista summary::before { content: "▸"; color: var(--azul-texto); font-size: 1.25rem; line-height: 1; }
.tarea-lista[open] summary::before { content: "▾"; }
.tarea-cuenta { font-size: 0.85rem; color: var(--gris); }
/* El cartel de los avisos con el celular bloqueado (static/js/avisos.js) */
.avisos p { margin: 0 0 10px; font-size: 0.95rem; }
.avisos .boton { margin: 0; }
.avisos .boton-link { padding: 4px 0; font-size: 0.95rem; }

/* La hora ("16:00") delante de la tarea, y a qué hora suena su alarma */
.tarea-hora { font-weight: 700; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.tarea-alarma {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 0.85rem; font-weight: 600; color: var(--azul-texto);
}

/* ---------- La alarma sonando (static/js/alarmas.js) ---------- */

/* La pantalla cambia de azul a amarillo para que se vea de lejos aunque no se escuche (personas
   sordas, taller con ruido). Despacio y con fundido, para que no maree: cada color queda casi un
   segundo y pasa al otro en 0,3 segundos (un cambio cada 2 segundos, lejos del límite de 3 por
   segundo que se considera riesgoso para la epilepsia). */
.alarma {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px 24px calc(80px + env(safe-area-inset-bottom)); text-align: center;
  background: #1F4E79; color: #fff;
  animation: alarma-luz 2s ease-in-out infinite;
}
@keyframes alarma-luz {
  0%, 35% { background: #1F4E79; color: #fff; }
  50%, 85% { background: #FFD000; color: #10233A; }
  100% { background: #1F4E79; color: #fff; }
}
.alarma-hora { margin: 0; font-size: 3.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.alarma-texto { margin: 0 0 24px; font-size: 1.6rem; font-weight: 700; overflow-wrap: anywhere; }
.alarma-listo { max-width: 320px; background: #fff; color: #1F4E79; animation: alarma-luz-boton 2s ease-in-out infinite; }
@keyframes alarma-luz-boton {
  0%, 35% { background: #fff; color: #1F4E79; }
  50%, 85% { background: #10233A; color: #FFD000; }
  100% { background: #fff; color: #1F4E79; }
}
.alarma-hecho { color: inherit; }
/* El logo chiquito abajo, en una línea: micrófono + "Presupuestos por Voz" */
.alarma-marca {
  position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1rem; font-weight: 800;
}
.alarma-marca .logo-forma { fill: currentColor; }
.alarma-marca .logo-trazo { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; }
.alarma-marca .logo-renglon { animation: alarma-luz-renglon 2s ease-in-out infinite; }
@keyframes alarma-luz-renglon {
  0%, 35% { fill: #F5B800; }
  50%, 85% { fill: #FFD000; }
  100% { fill: #F5B800; }
}
/* Quien pidió menos movimiento en el celular: el mismo cambio de luz, el doble de lento */
@media (prefers-reduced-motion: reduce) {
  .alarma, .alarma-listo, .alarma-marca .logo-renglon { animation-duration: 4s; }
}
.alarma-activar {
  position: fixed; left: 12px; right: 12px; bottom: 92px; z-index: 90;
  padding: 14px; border: none; border-radius: 12px;
  background: var(--amarillo); color: var(--seguimiento-texto);
  font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 14px var(--sombra);
}
.cosas { list-style: none; margin: 8px 0 4px; padding: 0; }
.cosa { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.tilde-chico { width: 30px; height: 30px; font-size: 0.95rem; }
.cosa-texto { overflow-wrap: anywhere; }
.cosa-hecha .cosa-texto { text-decoration: line-through; color: var(--gris); }
.tarea-cambiar summary { font-size: 0.85rem; color: var(--azul-texto); margin-top: 4px; }
.tarea-cambiar[open] summary { margin-bottom: 10px; }
.tarea-cambiar .boton-link { padding: 4px 0; }

/* Celulares muy angostos (por ejemplo, un plegable cerrado): la barra de arriba un poco más compacta */
@media (max-width: 340px) {
  .barra { padding: 10px 12px; }
  .barra-derecha { gap: 10px; }
  .boton-tema { width: 36px; height: 36px; }
}

/* En pantallas grandes, un poco más de aire */
@media (min-width: 700px) {
  body { font-size: 17px; }
  .acciones { display: flex; gap: 10px; }
  .acciones form { flex: 1; } /* el botón Duplicar va dentro de un form */
  .planes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* ---------- En la compu: todo a lo ancho ---------- */
/* El menú de abajo pasa a la izquierda y cada pantalla reparte sus partes en columnas, así no quedan
   espacios vacíos a los costados. En el celular y la tablet no cambia nada. */
@media (min-width: 1000px) {
  .contenido { max-width: 1400px; padding: 24px 28px 40px; }

  /* El menú, a la izquierda, debajo de la barra de arriba (que mide 64px) */
  body.con-menu {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr;
    min-height: 100vh; padding-bottom: 0;
  }
  body.con-menu .barra { grid-column: 1 / -1; }
  body.con-menu .contenido { grid-column: 2; grid-row: 2; width: 100%; }
  .menu {
    grid-column: 1; grid-row: 2;
    position: sticky; top: 64px; bottom: auto; left: auto; right: auto; align-self: start;
    height: calc(100vh - 64px);
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 20px 10px; border-top: none; border-right: 1px solid var(--borde);
  }
  .menu a {
    flex: none; max-width: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 0.95rem; white-space: nowrap;
  }
  .menu a:hover { background: var(--gris-claro); color: var(--texto); }
  .menu a.activo { background: var(--azul-claro); }
  .menu .icono { width: 26px; flex-shrink: 0; text-align: center; font-size: 1.3rem; }
  .burbuja { top: -6px; left: 14px; }

  /* Mis presupuestos y Seguimiento: las tarjetas de a varias por renglón */
  .grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .grilla > .tarjeta { margin: 0; }
  .grilla .estados { gap: 4px; }
  .grilla .chip { min-width: 0; padding: 9px 2px; font-size: 0.8rem; } /* "Rechazado" entra entero */

  /* Cómo funciona: los pasos y el ejemplo, uno al lado del otro (cuando hay lugar) */
  .como-funciona { container-type: inline-size; }
  @container (min-width: 640px) {
    .como-funciona-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  }

  /* Login y registro: el logo y Cómo funciona a la izquierda, el formulario a la derecha */
  .portada {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr;
    grid-template-areas: "marca form" "como form"; gap: 0 32px; align-items: start;
  }
  .portada .marca-grande { grid-area: marca; justify-content: flex-start; margin: 4px 0 20px; }
  .portada-form { grid-area: form; max-width: none; margin: 0; position: sticky; top: 88px; }
  .portada-como { grid-area: como; max-width: none; margin: 0; }

  /* Nuevo: el micrófono a la izquierda; subir un audio y escribirlo, a la derecha */
  .formas {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 16px;
    grid-template-areas: "mic audio" "mic texto"; margin-bottom: 8px;
  }
  .formas > .tarjeta { margin: 0; }
  .forma-microfono { grid-area: mic; display: flex; flex-direction: column; justify-content: center; }

  /* Revisar: los datos de a dos por renglón y los botones a la derecha */
  .campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .validez-notas { display: grid; grid-template-columns: 200px 1fr; gap: 0 16px; }
  #lista-items { container-type: inline-size; }
  .acciones-fijas { bottom: 0; justify-content: flex-end; }
  .acciones-fijas .boton { width: auto; padding: 14px 32px; }

  /* Ver: el resumen y el estado a la izquierda, los botones a la derecha */
  .ver {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr;
    gap: 0 20px; align-items: start;
  }
  .ver-resumen { grid-column: 1; grid-row: 1; }
  .ver-estado { grid-column: 1; grid-row: 2; }
  .ver .acciones { grid-column: 2; grid-row: 1 / 3; display: block; }
  .ver #aviso-compartir { grid-column: 2; grid-row: 3; }

  /* Para hacer: dictar a la izquierda, los días a la derecha */
  .para-hacer { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }

  /* Perfil: el formulario en dos columnas y el plan al costado */
  .perfil { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
  .perfil-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; }
  .perfil-form > :not(label), .perfil-form > .completo { grid-column: 1 / -1; }
  .perfil-form > .boton { justify-self: start; width: auto; padding: 14px 28px; }

  /* Planes: los cuatro en un renglón, con el botón abajo de todo */
  .planes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .plan { display: flex; flex-direction: column; }
  .planes .plan .boton { margin-top: auto; }

  /* El cartel para activar el sonido de las alarmas: abajo a la derecha */
  .alarma-activar { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

/* Revisar, en la compu: cada ítem en dos renglones (la descripción, y abajo cantidad, precio, tipo y
   subtotal) y, si hay lugar, en uno solo */
@container (min-width: 560px) {
  .item {
    display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 120px 48px;
    gap: 6px 10px; align-items: end;
  }
  .item-fila { display: contents; }
  .item .item-desc { grid-column: 1 / 5; }
  .item .mini { width: auto; }
  .item-subtotal { grid-column: 4 / 6; text-align: right; }
}
@container (min-width: 820px) {
  .item { grid-template-columns: minmax(0, 1fr) 90px 150px 170px 120px 48px; gap: 0 10px; }
  .item .item-desc, .item-subtotal { grid-column: auto; }
  .item .btn-quitar { order: 1; }
}