/* ═══════════════════════════════════════════════════════════════════════
   ENIGMA — CRM de gestión

   COPIA LITERAL de la identidad visual de Dilemma HERMES.

   Los valores salen tal cual de su globals.css:
     G:\CLAUDE CODE (IKER)\PROGRAMAS\SALESFORCE DILEMMA\Dilemma CRM\
     app\src\app\globals.css

   Y las medidas de los componentes, de sus ficheros shadcn:
     sidebar.tsx  menú h-8, p-2, gap-2, rounded-md, text-sm; grupo h-8 text-xs
                  al 70%; ancho 16rem; badge h-5 min-w-5 text-xs
     button.tsx   h-9 (36px), rounded-md, text-sm font-medium
     badge.tsx    rounded-full, px-2 py-0.5, text-xs font-medium
     (app)/layout.tsx  cabecera sticky h-12 con borde y desenfoque;
                  main con p-4 (16px) y md:p-6 (24px)

   Va en CSS plano en vez de Tailwind porque el CRM tiene que arrancar con un
   doble clic, sin compilar nada. Los valores son los mismos.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --radius: 0.625rem;

  /* Marca (en Hermes: --dilemma) */
  /* el azul de Enigma. En Hermes esta misma variable es su naranja
     (--dilemma: #ff6a00): lo que se clona es la estructura, no el tono. */
  --marca: #0f62fe;
  --marca-foreground: #ffffff;

  /* Base neutral (Notion) — idéntica a Hermes */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --success: oklch(0.62 0.17 149);
  --warning: oklch(0.72 0.17 70);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --sombra-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sombra-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  --fuente: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.dark {
  /* Marca un punto más viva en oscuro — el mismo par que usa Hermes */
  --marca: #4d8dff;
  --marca-foreground: #04101f;

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.245 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.32 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --success: oklch(0.7 0.17 149);
  --warning: oklch(0.79 0.16 70);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
  background: var(--background);
  color: var(--foreground);
  font: 14px/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 16rem 1fr;   /* SIDEBAR_WIDTH de shadcn */
  min-height: 100vh;
}

/* Cabecera sticky, como el (app)/layout.tsx de Hermes:
   h-12, border-b, bg-background/95 con desenfoque, px-3 */
header.barra-sup {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  height: 56px; flex-shrink: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(8px);
}
.contenido { display: flex; flex-direction: column; min-width: 0; }

/* ═══════════════════════════════════════════════════════ barra lateral ══ */
aside {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side-cab {
  height: 56px; flex: none; display: flex; align-items: center;
  padding: 0 12px; border-bottom: 1px solid var(--sidebar-border);
}
.marca { display: flex; align-items: center; gap: 8px; }
/* size-8 rounded-md bg-marca font-bold shadow-sm — su brand.tsx */
.marca .iso {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-md);
  background: var(--marca);
  color: var(--marca-foreground);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  box-shadow: var(--sombra-xs);
}
.marca .txt { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.marca .txt b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.marca .txt span { font-size: 10px; font-weight: 500; color: var(--muted-foreground); }

.side-cuerpo { flex: 1; overflow-y: auto; padding: 8px; }
.grupo { margin-bottom: 0; }

/* SidebarGroupLabel: h-8 rounded-md px-2 text-xs font-medium
   text-sidebar-foreground/70 */
.grupo > p {
  display: flex; align-items: center;
  height: 32px; padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: 12px; font-weight: 500;
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
}

/* SidebarMenuButton: h-8 w-full gap-2 rounded-md p-2 text-sm;
   hover y activo -> bg-sidebar-accent; activo -> font-medium */
nav a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 32px; padding: 8px;
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground); text-decoration: none;
  font-size: 14px; cursor: pointer; overflow: hidden;
  transition: background-color .15s, color .15s;
}
nav a:hover, nav a:active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
nav a.activo { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
nav a.activo .ico { color: var(--marca); }
nav a .ico { width: 16px; height: 16px; flex: none; display: inline-flex; }
/* lucide-react pinta size-4 con currentColor y grosor 2: igual que su
   [&_svg]:size-4 de sidebarMenuButtonVariants */
svg.lucide { width: 16px; height: 16px; display: block; }
.ico svg.lucide { pointer-events: none; }
nav a > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* SidebarMenuBadge: h-5 min-w-5 rounded-md px-1 text-xs font-medium tabular-nums */
nav a .cuenta {
  margin-left: auto; display: inline-flex; align-items: center;
  justify-content: center; height: 20px; min-width: 20px; padding: 0 4px;
  border-radius: var(--radius-md);
  font-size: 12px; font-weight: 500; color: var(--sidebar-foreground);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.side-pie {
  border-top: 1px solid var(--sidebar-border); padding: 8px;
}

/* ══════════════════════════════════════════════════════════ contenido ══ */
main { padding: 16px; min-width: 0; flex: 1; }
@media (min-width: 768px) { main { padding: 24px; } }

header.pag {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
header.pag h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
header.pag p { color: var(--muted-foreground); font-size: 14px; margin-top: 4px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ════════════════════════════════════════════════════════════ tarjetas ══ */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--sombra-sm);
}
.card-cab { padding: 16px 20px 0; }
.card-cab h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.card-cab p { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.card-cuerpo { padding: 20px; }

.rejilla { display: grid; gap: 14px; }
.r2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.r3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.r4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.r5 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.kpi { padding: 16px 18px; }
.kpi .et {
  font-size: 13px; color: var(--muted-foreground); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.kpi .num {
  font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .pie { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

/* ═════════════════════════════════════════════════════════════ botones ══ */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: 500 14px var(--fuente); cursor: pointer; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground);
  transition: background-color .15s, border-color .15s, opacity .15s;
}
button:hover, .btn:hover { opacity: .9; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(0.708 0 0 / .5); }
button.marca-btn { background: var(--marca); color: var(--marca-foreground); }
button.sec { background: var(--secondary); color: var(--secondary-foreground); }
button.contorno {
  background: var(--background); color: var(--foreground);
  border-color: var(--border); box-shadow: var(--sombra-xs);
}
button.contorno:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
button.fantasma { background: transparent; color: var(--foreground); }
button.fantasma:hover { background: var(--accent); opacity: 1; }
button.destructivo { background: var(--destructive); color: #fff; }
button.sm { height: 32px; padding: 0 12px; font-size: 13px; }
button.xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: var(--radius-sm); }
button.icono { width: 36px; padding: 0; }
button.icono.sm { width: 32px; }
button[disabled] { pointer-events: none; opacity: .5; }

/* ══════════════════════════════════════════════════════════ formulario ══ */
input, select, textarea {
  width: 100%; min-height: 36px; padding: 7px 12px;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius-md);
  font: 14px var(--fuente); box-shadow: var(--sombra-xs);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px oklch(0.708 0 0 / .5);
}
input[type=color] { padding: 3px; height: 36px; }
input[type=checkbox] { width: auto; min-height: auto; box-shadow: none; accent-color: var(--marca); }
select option, select optgroup {
  background-color: var(--popover); color: var(--popover-foreground);
}
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; line-height: 1; }
.campo { margin-bottom: 16px; }
.pista { font-size: 12px; color: var(--muted-foreground); margin-top: 5px; }

/* ═════════════════════════════════════════════════════════════ tablas ══ */
.tabla-caja {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: auto; background: var(--card); max-height: 74vh;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--card); color: var(--muted-foreground);
  font-size: 13px; font-weight: 500; text-align: left;
  height: 40px; padding: 0 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap; vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover { background: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tenue { color: var(--muted-foreground); }
.sub { font-size: 12px; color: var(--muted-foreground); margin-top: 1px; }

/* ═════════════════════════════════════════════════════════ etiquetas ══ */
.eti {
  display: inline-flex; width: fit-content; align-items: center;
  justify-content: center; gap: 4px;
  border-radius: 9999px; border: 1px solid transparent;
  padding: 2px 8px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.eti.pri { background: var(--primary); color: var(--primary-foreground); }
.eti.sec { background: var(--secondary); color: var(--secondary-foreground); }
.eti.contorno { border-color: var(--border); color: var(--foreground); }
.eti.marca { background: var(--marca); color: var(--marca-foreground); }
.eti.ok { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.eti.av { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
.eti.no { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 28%, transparent); }

.punto { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; flex: none; }

/* ═════════════════════════════════════════════════════════════ modal ══ */
.velo {
  position: fixed; inset: 0; z-index: 60;
  background: oklch(0 0 0 / .5);
  display: none; place-items: center; padding: 20px;
}
.velo.abierto { display: grid; }
.modal {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--sombra-lg);
  width: min(860px, 100%); max-height: 88vh; overflow: auto;
}
.modal > header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 20px 24px 12px;
  position: sticky; top: 0; background: var(--card); z-index: 2;
}
.modal > header h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal > header p { font-size: 13px; color: var(--muted-foreground); margin-top: 3px; }
.modal .cuerpo { padding: 4px 24px 20px; }
.modal > footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--card);
}

/* ══════════════════════════════════════════════════════ tabs sencillas ══ */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--muted); border-radius: var(--radius-lg); margin-bottom: 16px;
  flex-wrap: wrap;
}
.tabs button {
  height: 30px; padding: 0 12px; font-size: 14px; font-weight: 500;
  background: transparent; color: var(--muted-foreground);
  border-radius: var(--radius-md); border: 0;
}
.tabs button.activo {
  background: var(--background); color: var(--foreground);
  box-shadow: var(--sombra-xs);
}

/* ══════════════════════════════════════════════════════════ embudo ══ */
.embudo { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.etapa {
  flex: 1; min-width: 136px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 12px; background: var(--card); cursor: pointer;
}
.etapa:hover { border-color: var(--marca); }
.etapa .n { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.etapa .e { font-size: 12px; color: var(--muted-foreground); }
.etapa .imp { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.etapa.viva { border-color: var(--marca); }

/* ═══════════════════════════════════════════════════════════ agenda ══ */
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 16px; }
.mes h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; text-transform: capitalize; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dias .cab {
  font-size: 10px; color: var(--muted-foreground); text-align: center;
  font-weight: 500; padding-bottom: 3px;
}
.dia {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
  color: var(--muted-foreground); background: var(--muted);
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.dia:hover { border-color: var(--marca); }
.dia.vacio { background: transparent; cursor: default; }
.dia.finde { color: var(--foreground); }
.dia.confirmado { background: var(--success); color: #fff; font-weight: 600; }
.dia.reservado { background: var(--warning); color: #241800; font-weight: 600; }
.dia.nodisp {
  background: color-mix(in oklab, var(--destructive) 15%, transparent);
  color: var(--destructive);
}
.dia.hayfesta { box-shadow: inset 0 -3px 0 0 var(--marca); }

.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted-foreground); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.cuadro { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ═══════════════════════════════════════════════════════════ varios ══ */
.barra { height: 6px; background: var(--muted); border-radius: 9999px; overflow: hidden; min-width: 80px; }
.barra > i { display: block; height: 100%; border-radius: 9999px; }

.vacio-msg { text-align: center; padding: 56px 24px; }
.vacio-msg b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.vacio-msg p { color: var(--muted-foreground); max-width: 480px; margin: 0 auto; }

.nota {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 14px; font-size: 13px; display: flex; gap: 10px;
  align-items: flex-start;
}
.nota.av {
  border-color: color-mix(in oklab, var(--warning) 35%, transparent);
  background: color-mix(in oklab, var(--warning) 8%, transparent);
}
.nota.no {
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 7%, transparent);
}
.nota.ok {
  border-color: color-mix(in oklab, var(--success) 35%, transparent);
  background: color-mix(in oklab, var(--success) 8%, transparent);
}

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros input, .filtros select { width: auto; min-width: 140px; }
.filtros input[type=search] { min-width: 260px; }

.mono { font-family: var(--mono); font-size: 13px; }
.oculto { display: none !important; }
.sep { height: 1px; background: var(--border); margin: 20px 0; }
.fila { display: flex; align-items: center; gap: 10px; }
.crece { flex: 1; }

#avisos {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.aviso {
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--sombra-lg); padding: 12px 14px; font-size: 13px;
  animation: entra .18s ease-out;
}
.aviso.ok { border-color: color-mix(in oklab, var(--success) 40%, transparent); }
.aviso.no { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 9999px;
  border: 3px solid var(--background);
}
::-webkit-scrollbar-track { background: transparent; }

/* plegar el menú, como el SidebarTrigger de Hermes */
/* Ocultar el menú NO puede ser display:none. El body es una rejilla de dos
   columnas; al quitar el aside del flujo, el contenido caía en la PRIMERA
   columna, que mide 0, y la página se quedaba en 48 px de ancho. Se colapsa
   el ancho manteniéndolo en la rejilla, como hace su Sidebar con
   data-state=collapsed. */
/* SIN transición en grid-template-columns: animar una rejilla que mezcla
   píxeles y 1fr deja la primera columna clavada en 0 y la página se queda sin
   menú para siempre. Comprobado. La sensación de suavidad se consigue
   igualmente difuminando el contenido del aside. */
body.menu-oculto { grid-template-columns: 0 1fr; }
body.menu-oculto aside {
  overflow: hidden; border-right-width: 0; pointer-events: none;
}
body.menu-oculto aside > * { opacity: 0; transition: opacity .12s; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  aside { position: static; height: auto; }
  main { padding: 16px; }
}

.mini-barra { height: 8px; background: var(--muted); border-radius: 999px;
  overflow: hidden; }
.mini-barra i { display: block; height: 100%; background: var(--marca);
  border-radius: 999px; }

/* ──────────────── el bloque de usuario, como su user-menu.tsx ── */
/* Su SidebarMenuButton size="lg": h-12, p-2, avatar size-8 rounded-md. */
.side-pie { position: relative; }
.side-pie .usuario { display: flex; align-items: center; gap: 8px; width: 100%;
  height: 48px; padding: 8px; border: 0; background: transparent;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  color: var(--sidebar-foreground); }
.side-pie .usuario:hover,
.side-pie .usuario[aria-expanded="true"] { background: var(--sidebar-accent); }
.side-pie .avatar { display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--marca) 15%, transparent);
  color: var(--marca); font-size: 12px; font-weight: 600; }
.side-pie .usuario .txt { display: grid; flex: 1; min-width: 0;
  font-size: 14px; line-height: 1.2; }
.side-pie .usuario .txt b { font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.side-pie .usuario .txt span { font-size: 12px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-pie .usuario .ico { margin-left: auto; color: var(--muted-foreground); }

.menu-usuario { position: absolute; bottom: 54px; left: 8px; right: 8px;
  min-width: 224px; background: var(--popover, var(--card));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--sombra-lg); padding: 4px; z-index: 60; }
.menu-usuario .cabecera { padding: 8px; display: flex; flex-direction: column; }
.menu-usuario .cabecera b { font-size: 14px; font-weight: 500; }
.menu-usuario .cabecera span { font-size: 12px; color: var(--muted-foreground); }
.menu-usuario .sep { height: 1px; background: var(--border); margin: 4px -4px; }
.menu-usuario .rotulo { padding: 4px 8px; font-size: 12px;
  color: var(--muted-foreground); }
/* justify-content: flex-start hace falta porque la regla genérica de botón
   los centra, y en su DropdownMenuItem el icono y el texto van pegados a la
   izquierda. Sin esto quedaban flotando en medio. */
.menu-usuario button { display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; width: 100%; height: auto; min-height: 32px;
  padding: 6px 8px; border: 0; background: transparent; cursor: pointer;
  border-radius: 4px; font: 400 14px var(--fuente); color: var(--foreground);
  text-align: left; white-space: normal; }
.menu-usuario button .ico { flex: none; color: var(--muted-foreground); }
.menu-usuario button.peligro .ico { color: var(--destructive); }
.menu-usuario button:hover { background: var(--accent); }
.menu-usuario button.peligro { color: var(--destructive); }

/* un usuario desactivado se ve, pero apagado: no se borra para no perder
   quién hizo qué */
tr.apagada { opacity: .5; }

/* ─────────────── ARREGLOS DE DISEÑO (bloque único, no tocar a trozos) ── */

/* 1. La tarjeta tiene su propio margen interior. Antes lo ponían solo sus
   hijos .card-cab / .card-cuerpo, así que una tarjeta con contenido directo
   dejaba el texto pegado al borde. Donde ya hay hijos con padding, se anula
   el de la tarjeta para no duplicarlo. */
.card { padding: 20px; }
.card:has(> .card-cab), .card:has(> .card-cuerpo) { padding: 0; }
.card.kpi { padding: 16px 18px; }
.card.vacio-msg { padding: 36px 24px; }

/* 2. Los siete niveles de prioridad, por familias: azul lo mejor, verde bien,
   amarillo regular, gris lo que no compensa. Dentro de cada familia, el "+"
   va más saturado. */
.prio { display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 20px; padding: 0 7px; border-radius: 999px;
  font: 700 11px/1 var(--fuente); letter-spacing: .02em; flex: none; }
.prio.p-ap { background: #0b3fa8; color: #fff; }
.prio.p-a  { background: #4a8bf0; color: #fff; }
.prio.p-bp { background: #128a4a; color: #fff; }
.prio.p-b  { background: #93dcb4; color: #0a4429; }
.prio.p-c  { background: #f2c94c; color: #4a3805; }
.prio.p-d  { background: #fae5a3; color: #6b5310; }
.prio.p-e  { background: var(--muted); color: var(--muted-foreground); }

/* la del título del municipio: el MISMO color del ranking, un poco mayor */
.cabecera-muni h1.titulo-muni { margin: 0; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; line-height: 1.2; }
.cabecera-muni h1 .prio { height: 24px; min-width: 34px; font-size: 13px;
  padding: 0 10px; }

/* 4. las migas, con aire entre elementos */
.migas { display: flex; align-items: center; gap: 8px; }
.migas .sep { color: var(--border); }

/* tablas de ficha: la primera columna es la etiqueta y no debe estirarse */
.card table td:first-child { width: 1%; white-space: nowrap; padding-right: 20px; }
.card table td { padding: 9px 0; vertical-align: top; }
.card table tr + tr td { border-top: 1px solid var(--border); }
/* las de la festa major sí reparten: nombre, fecha y fuente */
.card table.reparte td:first-child { width: auto; }

/* el título de una tarjeta, separado de su contenido */
.card > b:first-child { display: block; margin-bottom: 4px; }
.card > b:first-child + table, .card > b:first-child + .tabla-caja { margin-top: 10px; }

/* ─────────────── LOS DOS CALENDARIOS (bloque único, no tocar a trozos) ── */

/* ── el globo de Disponibilidad ─────────────────────────────────────── */
.globo {
  position: fixed; z-index: 70; display: none; min-width: 320px; max-width: 420px;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / .28); padding: 12px 14px;
  font-size: 13px; animation: globo-entra .12s ease-out;
}
@keyframes globo-entra { from { opacity: 0; transform: translateY(-3px); } }
/* la flechita apunta al día del que cuelga */
.globo::before {
  content: ''; position: absolute; top: -5px; left: var(--flecha, 50%);
  margin-left: -5px; width: 9px; height: 9px; background: var(--popover);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.globo.abajo::before { top: auto; bottom: -5px; transform: rotate(225deg); }
.globo.fijado { border-color: var(--marca); }
.globo > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.globo > header b { font-size: 13px; }
.globo table { width: 100%; border-collapse: collapse; }
.globo td { padding: 5px 0; vertical-align: middle; border: 0; }
.globo td:first-child { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.globo td:nth-child(2) { width: 1%; padding: 5px 10px; white-space: nowrap; }
.globo td:last-child {
  text-align: right; max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
}
/* el artista del desplegable, marcado: el botón de abajo es para él */
.globo tr.yo td { background: color-mix(in oklab, var(--marca) 8%, transparent); }
.globo tr.yo td:first-child { font-weight: 600; border-radius: 4px 0 0 4px; }
.globo tr.yo td:last-child { border-radius: 0 4px 4px 0; }
.globo .globo-festa {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted-foreground); line-height: 1.5;
}
.globo .globo-festa b { color: var(--foreground); display: block; margin-bottom: 2px; }
.globo > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.globo > footer .tenue { font-size: 11px; }
/* con el globo abierto el día se queda marcado */
.dia[data-f]:hover { border-color: var(--marca); }

/* ── el año entero de Calendario y capacidad ────────────────────────── */
/* Esta vista no tenía CSS: los doce meses caían uno debajo de otro sin
   rejilla ni colores. Celdas grandes, que es como se veía antes. */
/* Doce meses. Las columnas tienen que DIVIDIR a 12, o queda una última fila
   coja: con 5 columnas salen 5+5+2. Por eso van fijas por tramos en vez de
   auto-fill, que era lo que había y repartía como le daba la gana. */
.calanyo {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; align-items: stretch;
}
@media (min-width: 900px)  { .calanyo { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .calanyo { grid-template-columns: repeat(6, 1fr); } }
.calanyo .mes {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 12px 14px;
}
.calanyo .mes h4 { font-size: 13px; margin-bottom: 8px; }
.calanyo .sem {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.calanyo .sem span {
  text-align: center; font-size: 11px; font-weight: 500;
  color: var(--muted-foreground);
}
.calanyo .dias { gap: 3px; }
.calanyo .d {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--muted); color: var(--muted-foreground);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: transform .08s ease;
}
.calanyo .d:hover { border-color: var(--marca); transform: scale(1.06); }
.calanyo .d.vacio { background: transparent; cursor: default; pointer-events: none; }
.calanyo .d.vacio:hover { border-color: transparent; transform: none; }
.calanyo .d.abierto { border-color: var(--foreground); border-width: 2px; }

.leyenda-cal {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--muted-foreground); margin-bottom: 14px;
}
.leyenda-cal span { display: flex; align-items: center; gap: 7px; }
.leyenda-cal i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.leyenda-cal .c-bolo { background: var(--success); }
.leyenda-cal .c-reserva { background: var(--warning); }
.leyenda-cal .c-no { background: color-mix(in oklab, var(--destructive) 25%, transparent); }
.leyenda-cal .c-lleno { background: var(--destructive); }
.leyenda-cal .c-festa { background: var(--muted); box-shadow: inset 0 -3px 0 0 var(--marca); }

/* ── la línea sí, línea no de la tabla de municipios ────────────────── */
/* La tabla lleva class="zebra" desde el principio pero la regla no existía. */
table.zebra tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--muted) 45%, transparent);
}
table.zebra tbody tr.clic:hover td { background: var(--muted); }

/* ─────────────── el globo, también en el calendario del año ───────────── */
/* Cuarta columna: el botón de "Ver" el bolo. En Disponibilidad casi siempre
   va vacía y no debe robar ancho. */
.globo td.acc { width: 1%; padding-left: 8px; text-align: right; }
.globo td.acc:empty { padding: 0; }
.calanyo .d[data-f] { cursor: pointer; }
/* ─────────────── desplegables largos, con buscador ───────────────────── */
.combo { position: relative; }
.combo .combo-txt { width: 100%; padding-right: 30px; }
.combo-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground); font-size: 12px; line-height: 1; padding: 0;
  border-radius: 4px;
}
.combo-x:hover { background: var(--muted); color: var(--foreground); }
.combo-lista {
  display: none; position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow-y: auto;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 28px -8px rgb(0 0 0 / .25); padding: 4px;
}
.combo.abierto .combo-lista { display: block; }
.combo-op {
  padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-op:hover, .combo-op.marcada { background: var(--muted); }
.combo-mas {
  padding: 8px 10px; font-size: 12px; color: var(--muted-foreground);
  border-top: 1px solid var(--border); margin-top: 4px;
}
/* ─────────────── el panel de filtros avanzados ────────────────────────── */
/* No tenía CSS y heredaba la rejilla de las tarjetas del panel de inicio:
   777px de alto al abrirlo, con la tabla expulsada de la pantalla. */
.panel-filtros { padding: 16px 18px; margin-bottom: 14px; }
.panel-filtros > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.panel-filtros .campos-f {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.panel-filtros .campos-f label,
.panel-filtros .interruptores label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted-foreground);
}
.panel-filtros .campos-f label.ancho { grid-column: span 2; }
.panel-filtros .campos-f input { width: 100%; height: 32px; font-size: 13px; }

.panel-filtros .interruptores {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.panel-filtros .interruptores label.check {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; color: var(--foreground); cursor: pointer;
  white-space: nowrap;
}
.panel-filtros .interruptores input { margin: 0; flex: none; }

@media (max-width: 700px) {
  .panel-filtros .campos-f label.ancho { grid-column: span 1; }
}

/* el color de cada artista en la leyenda de Disponibilidad */
.leyenda-cal .c-quien { border-radius: 50%; width: 9px; height: 9px; }

/* ─────────────── la ficha del artista ─────────────────────────────────── */
.cabecera-artista .quien { display: flex; align-items: center; gap: 16px; }
.cabecera-artista h1 { margin: 0; display: flex; align-items: center; gap: 10px; }
.cabecera-artista p { margin: 4px 0 0; }
.avatar-xl {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font: 600 20px/1 var(--fuente); letter-spacing: .02em;
}

/* ─────────────── los días, como estaban (bloque único) ──────────────── */
/* Los pasé a barritas por segmentos sin que me lo pidiera y no le gustaron:
   «queda horrible». Vuelve el día pintado entero con el subrayado azul de la
   festa major. El detalle de qué artista es cuál lo da el globo. */
.calanyo .d {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--muted); color: var(--muted-foreground);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: transform .08s ease;
}
.calanyo .d:hover { border-color: var(--marca); transform: scale(1.06); }
.calanyo .d.vacio { background: transparent; cursor: default; }
.calanyo .d.vacio:hover { border-color: transparent; transform: none; }
.calanyo .d.finde { color: var(--foreground); font-weight: 500; }
.calanyo .d.nodisp {
  background: color-mix(in oklab, var(--destructive) 15%, transparent);
  color: var(--destructive);
}
.calanyo .d.reserva { background: var(--warning); color: #241800; font-weight: 600; }
.calanyo .d.bolo { background: var(--success); color: #fff; font-weight: 600; }
.calanyo .d.lleno {
  background: var(--destructive); color: var(--destructive-foreground); font-weight: 600;
}
/* el borde azul de abajo: la festa major, sin tapar el estado del día */
.calanyo .d.confesta { box-shadow: inset 0 -3px 0 0 var(--marca); }

.leyenda-cal { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.leyenda-cal .c-libre { background: var(--muted); border: 1px solid var(--border); }
.leyenda-cal .c-bolo { background: var(--success); }
.leyenda-cal .c-reserva { background: var(--warning); }
.leyenda-cal .c-no { background: color-mix(in oklab, var(--destructive) 15%, transparent); }
.leyenda-cal .c-lleno { background: var(--destructive); }
.leyenda-cal .c-festa { background: var(--muted); box-shadow: inset 0 -3px 0 0 var(--marca); }

/* ─────────────── las pantallas robadas de Hermes ──────────────────────── */

/* conflictos: uno por tarjeta, con la gravedad en el borde izquierdo */
.card.conflicto {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-bottom: 10px; border-left: 3px solid var(--border);
}
.card.conflicto.alta { border-left-color: var(--destructive); }
.card.conflicto.media { border-left-color: var(--warning); }
.conflicto .cf-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conflicto .cf-txt p { margin: 5px 0 0; font-size: 13px; line-height: 1.45; }
.conflicto > button { flex: none; }

/* embudo: la etiqueta a la izquierda, la barra en medio, el número a la derecha */
.embudo { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.embudo .paso {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr 130px;
  gap: 16px; align-items: center; padding: 11px 0;
}
.embudo .paso + .paso { border-top: 1px solid var(--border); }
.embudo .pa-et b { display: block; font-size: 14px; }
.embudo .pa-et .tenue { font-size: 12px; }
.embudo .pa-barra {
  height: 22px; background: var(--muted); border-radius: var(--radius-sm);
  overflow: hidden;
}
.embudo .pa-barra i {
  display: block; height: 100%; background: var(--marca);
  border-radius: var(--radius-sm); transition: width .3s ease;
}
.embudo .pa-n { text-align: right; }
.embudo .pa-n b { font-size: 18px; font-variant-numeric: tabular-nums; }
.embudo .pa-n .tenue { display: block; font-size: 11px; }
.card.aviso-embudo {
  padding: 14px 18px; margin-bottom: 16px; font-size: 13px;
  border-left: 3px solid var(--marca); color: var(--muted-foreground);
}

/* el contador del menú, cuando es una alerta y no una cuenta */
.cuenta.alerta:not(:empty) {
  background: var(--destructive); color: #fff; font-weight: 700;
}

@media (max-width: 800px) {
  .embudo .paso { grid-template-columns: 1fr; gap: 6px; }
  .embudo .pa-n { text-align: left; }
}

/* las pantallas apagadas desde Ajustes */
nav a.apagado, .grupo.apagado { display: none; }
/* ─────────────── CORREO: la pantalla entera (bloque único) ───────────── */
/* Ocho de sus doce clases no tenían CSS: el editor y la vista previa se
   apilaban, la tarjeta medía 1.318px y los botones de decidir quedaban 800px
   por debajo del pliegue. Aquí todo cabe en una pantalla. */

/* el semáforo de arriba: en qué modo estás y cuánto cupo te queda */
.nota.semaforo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 12px 16px;
}
.nota.semaforo > div { flex: 1; font-size: 13px; }
.nota.semaforo .cupo {
  font-size: 12px; color: var(--muted-foreground); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* el contador dentro de la pestaña */
.tabs .pill {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 5px;
  border-radius: 999px; background: var(--muted); color: var(--muted-foreground);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.tabs button.activo .pill { background: var(--marca); color: var(--marca-foreground); }

/* ── la barra de progreso de la revisión ─────────────────────────────── */
.barra-revisar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 14px 0 12px;
}
.barra-revisar .br-izq { display: flex; align-items: center; gap: 12px; }
.barra-revisar .br-izq b { font-size: 14px; white-space: nowrap; }
.barra-revisar .br-der { display: flex; gap: 8px; }
.progreso {
  width: 180px; height: 6px; background: var(--muted);
  border-radius: 999px; overflow: hidden;
}
.progreso i {
  display: block; height: 100%; background: var(--marca);
  border-radius: 999px; transition: width .25s ease;
}

/* ── LA TARJETA: cabe entera, sin scroll ─────────────────────────────── */
/* La altura se ata a la ventana para que la barra de decisión se vea SIEMPRE.
   Lo que sobre hace scroll dentro del editor o de la vista, no en la página. */
.pila {
  display: flex; flex-direction: column; gap: 12px;
  height: calc(100vh - 360px); min-height: 430px;
}
.card.correo-tarjeta { padding: 0; overflow: hidden; }
.card.correo-tarjeta.grande {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
}

.correo-cab {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex: none;
}
.correo-cab .quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.correo-cab .quien b { font-size: 16px; }
.correo-cab .quien p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
.correo-cab .acciones { margin-left: auto; display: flex; gap: 8px; }

/* los tres datos que necesitas para decidir si ese correo puede salir */
.cab-datos { margin-left: auto; display: flex; gap: 26px; }
.cab-datos .dato { display: flex; flex-direction: column; line-height: 1.25; }
.cab-datos .dato span { font-size: 11px; color: var(--muted-foreground); }
.cab-datos .dato b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cab-datos .dato i {
  font-style: normal; font-size: 11px; color: var(--muted-foreground);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nota.aviso-correo { margin: 12px 18px 0; flex: none; }

/* editor a la izquierda, lo que le llega de verdad a la derecha */
.correo-doble {
  display: grid; grid-template-columns: minmax(300px, 4fr) 5fr;
  gap: 0; min-height: 0; flex: 1;
}
.correo-editor {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; border-right: 1px solid var(--border);
  min-height: 0; overflow-y: auto;
}
.correo-editor label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted-foreground);
}
.correo-editor label.crece { flex: 1; min-height: 0; }
.correo-editor label.crece textarea {
  flex: 1; min-height: 140px; resize: none; font-size: 13px; line-height: 1.55;
}
.correo-editor .ce-fila { display: flex; align-items: flex-end; gap: 8px; }
.correo-editor .ce-fila label { flex: 1; min-width: 0; }
.correo-editor .ce-fila .eti { margin-bottom: 7px; flex: none; }
.pista-guardado { margin: 0; font-size: 11.5px; color: var(--muted-foreground); }

.correo-vista {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--muted);
}
.cv-et {
  padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-foreground);
  border-bottom: 1px solid var(--border); flex: none;
}
.correo-marco {
  flex: 1; width: 100%; border: 0; background: #fff; min-height: 0;
}
.correo-texto {
  flex: 1; margin: 0; padding: 18px; overflow: auto; background: #fff;
  color: #222; font: 13px/1.6 monospace; white-space: pre-wrap;
}

/* ── LA DECISIÓN: lo más grande de la pantalla ───────────────────────── */
.mando { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; flex: none; }
.mando button {
  height: 46px; border-radius: var(--radius); cursor: pointer;
  font: 600 14px/1 var(--fuente); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: filter .1s ease;
}
.mando button:hover:not(:disabled) { filter: brightness(1.08); }
.mando button:disabled { opacity: .5; cursor: not-allowed; }
.mando kbd {
  font: 600 11px/1 var(--fuente); padding: 3px 6px; border-radius: 4px;
  background: rgb(255 255 255 / .22); border: 0;
}
.mando .mando-no {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
  border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
}
.mando .mando-no kbd { background: color-mix(in oklab, var(--destructive) 16%, transparent); }
.mando .mando-luego { background: var(--card); color: var(--muted-foreground); }
.mando .mando-luego kbd { background: var(--muted); color: var(--muted-foreground); }
.mando .mando-si {
  background: var(--success); color: #fff; border-color: transparent;
  font-size: 15px;
}

/* ── el modo lista ───────────────────────────────────────────────────── */
.lista-correos { display: flex; flex-direction: column; gap: 8px; }
.fila-correo {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto;
  gap: 18px; align-items: center; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fila-correo.frenada { border-left: 3px solid var(--destructive); }
.fila-correo .fc-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fila-correo .sub { font-size: 12px; color: var(--muted-foreground); }
.fila-correo .fc-asunto { min-width: 0; font-size: 13px; }
.fila-correo .fc-asunto > div:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila-correo .fc-acc { display: flex; gap: 6px; }

/* ── la cola de salida ───────────────────────────────────────────────── */
.card.cola-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cola-cab p { margin: 4px 0 10px; font-size: 13px; }
.cola-cab .cola-btns { display: flex; gap: 8px; }
.cola-cab .marca-btn.grande { height: 42px; padding: 0 22px; font-size: 15px; }
.cupo-barra {
  width: 240px; max-width: 100%; height: 6px; background: var(--muted);
  border-radius: 999px; overflow: hidden; margin-bottom: 4px;
}
.cupo-barra i { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.card.frenados { margin-top: 14px; border-color: var(--destructive); }

@media (max-width: 1000px) {
  .correo-doble { grid-template-columns: 1fr; }
  .correo-editor { border-right: 0; border-bottom: 1px solid var(--border); }
  .pila { height: auto; }
  .cab-datos { margin-left: 0; width: 100%; gap: 18px; }
  .mando { grid-template-columns: 1fr; }
  .fila-correo { grid-template-columns: 1fr; gap: 8px; }
}
/* ─────────────── AJUSTES, dos niveles (bloque único) ──────────────────── */
/* Copiado del panel-lateral-ajustes.tsx de Hermes: grupos a la izquierda y,
   dentro del activo, sus secciones sangradas con una línea. Su propio
   comentario lo describe como «el diálogo de Opciones de Word/Office». */
.ajustes-hermes {
  display: grid; grid-template-columns: 236px 1fr; gap: 28px; align-items: start;
}
.nav-aj { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.nav-g { display: flex; flex-direction: column; }
.nav-aj > .nav-g > button {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); font: 500 14px/1.2 var(--fuente);
  color: var(--muted-foreground); text-align: left;
}
.nav-aj > .nav-g > button:hover { background: var(--muted); color: var(--foreground); }
.nav-aj > .nav-g > button.activo {
  background: color-mix(in oklab, var(--marca) 10%, transparent);
  color: var(--marca); font-weight: 600;
}
.nav-aj svg { width: 16px; height: 16px; flex: none; }
.nav-aj > .nav-g > button > span { flex: 1; text-align: left; }
.nav-aj .chev {
  margin-left: auto; font-style: normal; font-size: 15px;
  transition: transform .15s ease;
}
.nav-aj .chev.abierto { transform: rotate(90deg); }

/* las secciones del grupo abierto, sangradas y con su línea */
.nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 4px 19px; padding: 2px 0 2px 9px;
  border-left: 1px solid var(--border);
}
.nav-sub button {
  justify-content: flex-start; padding: 7px 9px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-sm); font: 400 13px/1.2 var(--fuente);
  color: var(--muted-foreground); text-align: left;
}
.nav-sub button:hover { background: var(--muted); color: var(--foreground); }
.nav-sub button.activo { background: var(--muted); color: var(--foreground); font-weight: 500; }

/* el contenido */
.cuerpo-aj { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.bloque-aj {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.bloque-aj > header { padding: 16px 20px 0; }
.bloque-aj > header h3 { margin: 0; font-size: 15px; }
.bloque-aj > header p {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--muted-foreground);
}
.bloque-aj .filas { padding: 0 20px 4px; }

/* la fila: qué es a la izquierda, el control a la derecha */
.fila-aj {
  display: grid; grid-template-columns: 1fr minmax(170px, 250px);
  gap: 24px; align-items: center; padding: 15px 0;
}
.fila-aj + .fila-aj { border-top: 1px solid var(--border); }
.fila-aj.ancha { grid-template-columns: 1fr; gap: 8px; }
.fila-aj-txt label {
  display: block; font-size: 14px; font-weight: 500; margin: 0;
  color: var(--foreground);
}
.fila-aj-txt p {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--muted-foreground);
}
.fila-aj-ctl { justify-self: end; width: 100%; display: flex; align-items: center; gap: 8px; }
.fila-aj-ctl > input, .fila-aj-ctl > select, .fila-aj-ctl > textarea { width: 100%; }
.fila-aj-ctl > button, .fila-aj-ctl > .palanca { margin-left: auto; }
.fila-aj-ctl .sufijo {
  font-size: 12px; color: var(--muted-foreground); flex: none; white-space: nowrap;
}
.fila-aj-txt code.dns {
  display: block; margin-top: 6px; font-size: 11px; line-height: 1.4;
  color: var(--muted-foreground); background: var(--muted);
  padding: 5px 7px; border-radius: 4px; word-break: break-all;
}

/* el interruptor, como el Switch de Hermes */
.palanca { display: inline-block; position: relative; width: 38px; height: 21px; flex: none; }
.palanca input { position: absolute; opacity: 0; width: 0; height: 0; }
.palanca span {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--border); transition: background .15s;
}
.palanca span::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s;
}
.palanca input:checked + span { background: var(--marca); }
.palanca input:checked + span::after { transform: translateX(17px); }

/* ── la vista previa de la cabecera de factura ───────────────────────── */
.previa-factura { padding: 0; overflow: hidden; }
.pf-hoja {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 22px; background: #fff; color: #222;
  font: 12px/1.55 Arial, Helvetica, sans-serif;
}
.pf-emisor b { display: block; font-size: 14px; color: #111; margin-bottom: 3px; }
.pf-emisor div { color: #666; }
.pf-doc { text-align: right; white-space: nowrap; }
.pf-tipo {
  display: block; font-size: 10px; letter-spacing: .12em;
  color: #999; margin-bottom: 2px;
}
.pf-doc b { font-size: 17px; color: #111; }
.pf-doc .tenue { color: #888; font-size: 11px; }
.pf-pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 22px; background: #fff; color: #444;
  border-top: 1px solid #eee; font-size: 12px;
}
.pf-pie .tenue { color: #888; }

@media (max-width: 900px) {
  .ajustes-hermes { grid-template-columns: 1fr; }
  .nav-aj { position: static; }
  .nav-sub { margin-left: 12px; }
  .fila-aj { grid-template-columns: 1fr; gap: 8px; }
  .fila-aj-ctl { justify-self: stretch; }
}

/* público o privado: el aviso de lo que implica, dentro del formulario */
.nota.aviso-contrato { margin: 0 0 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; }
.col-contrato { white-space: nowrap; }
.col-contrato .eti + .eti { margin-left: 4px; }
/* ─────────────── la franja de avisos de la barra de arriba ─────────────── */
/* «Tienes ahí un ancho para cantarme los warnings que es impresionante.»
   Y era verdad: 1.100 px vacíos entre el ☰ y el botón de tema, mientras cada
   pantalla se comía 120 px de ALTO para decir lo mismo. */
.avisos-barra {
  flex: 1; min-width: 0; display: flex; align-items: center;
  gap: 8px; overflow-x: auto; padding: 0 8px;
  scrollbar-width: none;
}
.avisos-barra::-webkit-scrollbar { display: none; }
.av-barra {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.3;
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid transparent;
}
.av-barra[role="button"] { cursor: pointer; }
.av-barra[role="button"]:hover { filter: brightness(1.06); }
.av-barra b {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px;
  background: rgb(0 0 0 / .08);
}
.av-barra.ok {
  background: color-mix(in oklab, var(--success) 12%, transparent);
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 26%, transparent);
}
.av-barra.av {
  background: color-mix(in oklab, var(--warning) 14%, transparent);
  color: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 30%, transparent);
}
.av-barra.no {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
  border-color: color-mix(in oklab, var(--destructive) 28%, transparent);
}
.av-barra.ok b, .av-barra.av b, .av-barra.no b { background: rgb(255 255 255 / .18); }

/* el botón de ayuda, donde antes estaba el de tema (que ya vive en el menú
   de usuario, abajo a la izquierda) */
#btn-ayuda {
  font-weight: 700; font-size: 14px; flex: none;
}

/* ── de dónde sale la dirección del correo ───────────────────────────── */
.eti-fuentes {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  margin-bottom: 7px;
}
.eti-fuentes i { font-style: normal; font-size: 10px; color: var(--muted-foreground); }
.eti-fuentes:hover i { color: var(--foreground); }
.fuentes {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--muted); padding: 10px 12px; margin-top: -2px;
}
.fuentes-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; font-size: 12px;
}
.fuente-op {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  padding: 8px; border-radius: var(--radius-sm);
}
.fuente-op:hover { background: var(--background); }
.fuente-op.usando { background: var(--background); border: 1px solid var(--marca); }
.fuente-op input { margin-top: 3px; flex: none; }
.fuente-op b { font-size: 12.5px; }
.fuente-op .et-fuente {
  margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--marca); color: var(--marca-foreground);
}
.fuente-op p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.4; }
.fuentes-web {
  display: inline-block; margin-top: 6px; font-size: 12px;
  color: var(--marca); cursor: pointer;
}

/* ── Conflictos y Papelera, ahora dentro de Ajustes ──────────────────── */
/* Su cabecera de pantalla propia sobra cuando se pintan aquí dentro. */
.panel-mant .pag { margin-bottom: 14px; }
.panel-mant .pag h1 { font-size: 20px; }
.panel-mant .rejilla.r3 { margin-bottom: 14px !important; }
/* ─────────────── la portada: qué hacer ahora ──────────────────────────── */
/* La de antes medía 1.776px y el embudo vertical se comía 948 para enseñar
   nueve ceros. Ahora la pregunta es «¿qué hago ahora?» y se contesta arriba
   del todo, con lo que de verdad hay que hacer. */
.ahora {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.ahora-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 15px 18px 12px; border-bottom: 1px solid var(--border);
}
.ahora-cab h2 { margin: 0; font-size: 16px; }
.ahora-cab .tenue { font-size: 12px; }

.accion {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-left: 3px solid transparent;
}
.accion + .accion { border-top: 1px solid var(--border); }
.accion.no { border-left-color: var(--destructive); }
.accion.marca { border-left-color: var(--marca); }
.accion.av { border-left-color: var(--warning); }
.ac-n {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--muted);
  color: var(--muted-foreground); font: 700 12px/1 var(--fuente);
}
.accion.no .ac-n { background: var(--destructive); color: #fff; }
.accion.marca .ac-n { background: var(--marca); color: var(--marca-foreground); }
.ac-txt { flex: 1; min-width: 0; }
.ac-txt b { font-size: 14px; }
.ac-txt p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); }
.accion > .eti { flex: none; }
.accion > button { flex: none; }

/* el embudo, en una tira horizontal: 140px en vez de 948 */
.tira { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; }
.tira-paso {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 6px;
}
.tira-paso b { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tira-paso span {
  font-size: 11px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tira-paso i {
  display: block; height: 4px; margin-top: 5px; border-radius: 999px;
  background: var(--marca); min-width: 3px;
}
.tira-paso.cero b { color: var(--muted-foreground); }
.tira-paso.cero i { background: var(--border); }
.tira-flecha { color: var(--border); align-self: center; padding-bottom: 14px; }
.tira-pie {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted-foreground);
}
.tira-pie b { color: var(--foreground); font-variant-numeric: tabular-nums; }

.capacidad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.capacidad > div { display: flex; flex-direction: column; }
.capacidad b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.capacidad span { font-size: 11.5px; color: var(--muted-foreground); }

@media (max-width: 900px) {
  .accion { flex-wrap: wrap; }
  .tira { flex-wrap: wrap; }
  .tira-flecha { display: none; }
  .tira-paso { min-width: 88px; }
}
/* ─────────────── plantillas simples y la cola de salida ───────────────── */
/* «Te has pasado, es muy masiva. Antes era simple y ahora es demasiado
   complicada.» Fuera la barra de huecos, las pistas de cada plantilla, los
   avisos y la vista previa siempre abierta. Queda la lista numerada y, al
   abrir una, el asunto y el texto. */
.plt-lista { display: flex; flex-direction: column; gap: 8px; }
.card.plt { padding: 0; overflow: hidden; }
.card.plt.abierta { border-color: var(--marca); }
.card.plt > header {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer;
}
.card.plt > header:hover { background: var(--muted); }
.card.plt.abierta > header { border-bottom: 1px solid var(--border); }
.card.plt > header > b { font-size: 14px; flex: none; }
.card.plt > header > .tenue {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plt-n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--marca);
  color: var(--marca-foreground); font: 700 13px/1 var(--fuente);
}
.plt-flecha { color: var(--muted-foreground); font-size: 12px; flex: none; }
.plt-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.plt-cuerpo label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted-foreground);
}
.plt-cuerpo textarea { font: 13px/1.6 monospace; resize: vertical; }
.plt-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12px;
}

/* ── la cola de salida, con todo lo que le faltaba ───────────────────── */
.cola-ayuda {
  margin: 14px 0 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.5;
  background: var(--muted); border-radius: var(--radius);
  color: var(--muted-foreground);
}
.cola-ayuda b { color: var(--foreground); }
.cola-lista { display: flex; flex-direction: column; gap: 6px; }

.fila-cola {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.fila-cola.abierta { border-color: var(--marca); }
.fila-cola.frenada { border-left: 3px solid var(--destructive); }
.fc-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
}
.fc-cab:hover { background: var(--muted); }
.fc-pos {
  width: 26px; flex: none; text-align: right;
  font: 600 12px/1 var(--fuente); color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.fc-quien { flex: none; width: 210px; min-width: 0; }
.fc-quien b { font-size: 13.5px; }
.fc-quien .sub {
  font-size: 11.5px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-asunto {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-orden { display: flex; flex-direction: column; gap: 1px; flex: none; }
.fc-orden button {
  height: 15px; min-height: 0; padding: 0 5px; font-size: 9px; line-height: 1;
}
.fc-acc { display: flex; gap: 4px; flex: none; }
.fc-editor { border-top: 1px solid var(--border); padding: 12px; background: var(--muted); }
.fc-editor .card.correo-tarjeta.grande { height: clamp(360px, 52vh, 560px); }

@media (max-width: 1000px) {
  .fc-cab { flex-wrap: wrap; }
  .fc-quien { width: auto; flex: 1; }
  .fc-asunto { width: 100%; flex: none; }
}

/* ─────────────── gasto y contratos (bloque único) ─────────────────────── */
/* El gráfico de antes pintaba en el MISMO eje el presupuesto liquidado
   (10,5 M€ en Barcelona) y los contratos de festa major (400 k€): una línea
   pegada al techo y otra aplastada contra el suelo. Y el SVG tenía viewBox
   900x240 estirado a 1324x353, o sea todo a 1,47x de su tamaño.
   Ahora: barras en píxeles de verdad, y el presupuesto aparte porque no es
   comparable con los contratos. */

/* el precedente: de dónde sale el precio que le proponemos */
.card.precedente {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px 20px;
}
.precedente .pr-caja { display: flex; flex-direction: column; gap: 2px; min-width: 210px; }
.precedente .pr-et {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.precedente .pr-num { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.precedente .pr-num.marca { color: var(--marca); }
.precedente .pr-pie { font-size: 12px; color: var(--muted-foreground); }
.precedente .pr-flecha { font-size: 22px; color: var(--border); }

/* las barras por año, apiladas por clase de contrato */
.gbarras {
  display: flex; align-items: flex-end; gap: 10px;
  margin-top: 16px; overflow-x: auto; padding-bottom: 4px;
}
.ganyo {
  flex: 1; min-width: 74px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 4px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.ganyo:hover { background: var(--muted); }
.ganyo.sel { border-color: var(--marca); background: var(--muted); }
.ganyo .gval {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ganyo .gbarra { display: flex; align-items: flex-end; width: 100%; }
.ganyo .gpila {
  width: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 4px 4px 0 0; overflow: hidden;
}
.ganyo .gpila i { display: block; width: 100%; }
.ganyo .get { text-align: center; line-height: 1.25; }
.ganyo .get b { display: block; font-size: 13px; }
.ganyo .get span { font-size: 11px; color: var(--muted-foreground); }
.gleyenda { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* el presupuesto: contexto, no comparable, y por eso pequeño y aparte */
.presu {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.presu-tit b { display: block; font-size: 13px; }
.presu-tit .tenue { font-size: 11.5px; }
.presu-barras { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.presu-barras .pa { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.presu-barras .pa i {
  display: block; width: 16px; background: var(--border); border-radius: 2px 2px 0 0;
}
.presu-barras .pa span { font-size: 10px; color: var(--muted-foreground); }
.presu-cifra {
  margin-left: auto; font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.presu-cifra .tenue { font-size: 12px; font-weight: 400; }

/* la ficha del municipio, editable en su sitio (sustituye a «Corregir ficha») */
.ficha-edit td:first-child { width: 132px; }
.ficha-edit td { padding: 6px 0; vertical-align: middle; }
.ficha-edit input {
  width: 100%; height: 30px; font-size: 13px;
  background: transparent; border-color: transparent;
}
.ficha-edit input:hover { border-color: var(--border); }
.ficha-edit input:focus { background: var(--background); border-color: var(--marca); }
.ficha-edit .fuente {
  margin-left: 8px; font-size: 11px; color: var(--muted-foreground);
}

/* público o privado: el aviso de lo que implica, dentro del formulario */
.nota.aviso-contrato { margin: 0 0 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; }
.col-contrato { white-space: nowrap; }
.col-contrato .eti + .eti { margin-left: 4px; }

@media (max-width: 800px) {
  .card.precedente { gap: 12px; }
  .precedente .pr-flecha { display: none; }
}

/* el rango de fechas de Municipios: un hueco en la agenda -> qué pueblos
   celebran esos días. Distinto de la ventana de "meses vista", que es
   relativa a hoy. */
.filtros .dia {
  width: 72px; text-align: center; font-variant-numeric: tabular-nums;
  font-family: monospace;
}
/* ─────────────── el gráfico de puntos y las tablas de contratos ──────── */
/* «Que el gráfico no sea de barras, que es asqueroso. Hazme el de puntos como
   lo teníamos, pero que se vea bien y que se adapte.»

   El de puntos original se veía mal por un motivo concreto: era un SVG con
   viewBox 900x240 estirado a 1324x353, y un viewBox estirado deforma lo que
   hay dentro — los círculos salían elipses.

   Aquí se separa lo que se puede estirar de lo que no: la LÍNEA va en un SVG
   con preserveAspectRatio="none" (una línea estirada sigue pareciendo una
   línea) y los PUNTOS son HTML colocados en %, así siguen siendo redondos a
   cualquier ancho y el gráfico se adapta solo. */

.gasto-doble {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-top: 14px;
}

.gpuntos {
  position: relative; height: 210px; margin: 22px 0 0;
  border-bottom: 1px solid var(--border);
}
.glinea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gtrazo {
  fill: none; stroke: var(--marca); stroke-width: 2;
  vector-effect: non-scaling-stroke;          /* que no engorde al estirarse */
  stroke-linejoin: round; stroke-linecap: round;
}
.garea { fill: color-mix(in oklab, var(--marca) 12%, transparent); stroke: none; }

/* las marcas del eje, al fondo */
.gmarca {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--border); pointer-events: none;
}
.gmarca span {
  position: absolute; left: 0; top: -8px; padding-right: 6px;
  font-size: 10px; color: var(--muted-foreground); background: var(--card);
  font-variant-numeric: tabular-nums;
}

/* el punto: HTML en %, así siempre es redondo */
.gpunto {
  position: absolute; width: 11px; height: 11px; padding: 0;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--card); border: 2.5px solid var(--marca);
  cursor: pointer; transition: transform .1s ease;
}
.gpunto:hover { transform: scale(1.45); }
.gpunto.sel { background: var(--marca); transform: scale(1.35); }
.gp-valor {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.gpunto.sel .gp-valor { color: var(--marca); }

/* los años, debajo de la línea */
.ganyos { position: relative; height: 34px; margin-top: 2px; }
.ganyo-et {
  position: absolute; transform: translateX(-50%); padding: 3px 7px;
  border: 0; background: transparent; cursor: pointer; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.ganyo-et:hover { background: var(--muted); }
.ganyo-et.sel { background: var(--muted); }
.ganyo-et b { font-size: 12px; }
.ganyo-et.sel b { color: var(--marca); }
.ganyo-et span { font-size: 10px; color: var(--muted-foreground); }
.gpie { margin: 4px 0 0; font-size: 11.5px; color: var(--muted-foreground); }

/* la leyenda, pequeña, como pidió */
.gleyenda-min {
  display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted-foreground);
}
.gleyenda-min span { display: flex; align-items: center; gap: 5px; }
.gleyenda-min i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ── el desglose por clase, en la mitad derecha ──────────────────────── */
.desglose { display: flex; flex-direction: column; gap: 9px; }
.dg-fila {
  display: grid; grid-template-columns: 132px 1fr 84px 28px;
  gap: 10px; align-items: center; font-size: 12.5px;
}
.dg-et { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dg-et i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dg-barra { height: 7px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.dg-barra i { display: block; height: 100%; border-radius: 999px; }
.dg-val { text-align: right; font-variant-numeric: tabular-nums; }
.dg-n { text-align: right; font-size: 11px; color: var(--muted-foreground); }

/* ── las tablas de contratos ─────────────────────────────────────────── */
/* Medido: la celda del objeto tenía 331px cuando pedía 900, mientras la fecha
   y el expediente sobraban. Sin anchos declarados, una tabla reparte por el
   contenido y el texto largo es el que pierde. */
.card table.t-contratos, .t-contratos { table-layout: fixed; width: 100%; }
.card table.t-contratos td:first-child,
.t-contratos th:nth-child(1) { width: 100px; }
.t-contratos th:nth-child(2), .t-contratos td:nth-child(2) { width: 112px; }
.t-contratos th:nth-child(3) { width: auto; }
.t-contratos th:nth-child(4), .t-contratos td:nth-child(4) { width: 190px; }
.t-contratos th:nth-child(5), .t-contratos td:nth-child(5) { width: 122px; }
.t-contratos th:nth-child(6), .t-contratos td:nth-child(6) { width: 96px; }
.t-contratos td {
  vertical-align: top; padding-top: 9px; padding-bottom: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* el objeto es lo que más importa de la fila: se le dan dos líneas */
.cg-objeto {
  white-space: normal !important; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cg-adj { color: var(--muted-foreground); font-size: 12.5px; }
.cg-clase {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
}
.cg-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 16px 18px 10px;
}
.cg-cab .tenue { font-size: 12px; }

/* Nada de table-layout:fixed aquí: esta tabla tiene 3 o 4 columnas según el
   caso, y con anchos por nth-child el reparto se rompía (la primera columna
   acababa a 14px). Con `width: 1%` + nowrap, cada columna de números coge lo
   justo que ocupa y el nombre se queda todo lo demás. */
.t-prov { width: 100%; }
.card table.t-prov td:first-child {
  width: 100%; max-width: 1px; padding-right: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card table.t-prov td:not(:first-child) {
  width: 1%; white-space: nowrap; padding-left: 18px;
}

/* la fila de la web en Datos se quedaba 34px corta por el enlace «abrir» */
.ficha-edit td { overflow: hidden; }
.ficha-edit td:has(> input + a) { display: flex; align-items: center; gap: 8px; }
.ficha-edit td > a.fuente { flex: none; white-space: nowrap; }

@media (max-width: 1100px) {
  .gasto-doble { grid-template-columns: 1fr; }
  .dg-fila { grid-template-columns: 110px 1fr 76px 24px; }
  .t-contratos th:nth-child(2), .t-contratos td:nth-child(2),
  .t-contratos th:nth-child(4), .t-contratos td:nth-child(4) { display: none; }
}

/* ═════════════════════════════════════════ auditoría: tablas ordenables ══ */
/* Cualquier cabecera que ordena se nota: cursor de mano y una flecha tenue
   que se vuelve sólida en la columna que manda. */
thead th.orden { cursor: pointer; user-select: none; }
thead th.orden:hover { color: var(--foreground); }
thead th.orden::after {
  content: '↕'; display: inline-block; margin-left: 5px;
  font-size: 11px; opacity: .3;
}
thead th.orden.asc::after  { content: '↑'; opacity: 1; color: var(--foreground); }
thead th.orden.desc::after { content: '↓'; opacity: 1; color: var(--foreground); }
thead th.orden.asc, thead th.orden.desc { color: var(--foreground); }

/* el selector de color salía estirado a lo ancho de la columna */
.campo input[type=color] {
  width: 72px; height: 36px; padding: 3px; cursor: pointer;
}

/* ══════════════════════════════════════ auditoría: fechas de festa dudosas ══ */
/* Las que salen del calendario de festius locals (aciertan ~70%): en gris y
   con la interrogación. La clase se usaba en Municipios y en Correo pero no
   tenía estilo, así que la fecha dudosa se veía igual de firme que la buena. */
.dudosa { color: var(--muted-foreground); cursor: help; }
b.dudosa { font-weight: 500; }

/* ═══════════════════════════════════ auditoría: festes en la ficha ══ */
/* El nombre de la festa puede ser largo («Festes de la Mercè, la festa
   major»): se parte en dos líneas en vez de empujar la tarjeta hacia fuera. */
.card table.t-festa td:first-child { white-space: normal; width: auto; }
.card table.t-festa td.num { width: 1%; white-space: nowrap; vertical-align: top; }

/* ═════════════════════════════ auditoría: correo en pantallas bajas ══ */
/* Con 800 px de alto la caja del mensaje encogía a 36 px pero el textarea
   seguía midiendo 140: se montaba encima de «Se guarda solo…» y el final
   quedaba cortado por la tarjeta. Ahora la caja no baja de su textarea y
   lo que sobra lo hace la columna con su propio scroll. */
.correo-editor label.crece { min-height: 164px; }

/* ═══════════════════════════ auditoría: el gráfico de gasto, dentro ══ */
/* El año de los extremos y su «N contratos» se salían unos píxeles de la
   tarjeta en pantallas de portátil. Un margen igual a los dos lados mantiene
   los puntos alineados con sus años. */
.gpuntos, .ganyos { margin-left: 12px; margin-right: 12px; }

/* ══════════════════════════════════════ auditoría: nueva factura ══ */
.doc-et {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-foreground); margin: 6px 0 8px;
}
table.t-lineas { margin: 0 0 8px; }
table.t-lineas td { padding: 4px 6px; }
table.t-lineas td:first-child { width: auto; }
table.t-lineas input { width: 100%; height: 32px; }
table.t-lineas td.num input { width: 90px; text-align: right; }
table.t-lineas td:nth-child(2) input, table.t-lineas td:nth-child(4) input { width: 64px; }
.doc-totales {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 18px;
  margin: 10px 0 14px; font-size: 13px; color: var(--muted-foreground);
}
.doc-totales b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.doc-totales .tot { font-size: 15px; }

/* ═════════════════════════════════ auditoría: contraste en modo oscuro ══ */
/* En oscuro el rojo y el verde son más claros: el blanco encima se leía mal
   (2,5 y 2,9 de contraste). Ahí van en tinta oscura. */
.dark .accion.no .ac-n { color: #1a0505; }
.dark .mando .mando-si { color: #04140a; }
.dark .mando .mando-si kbd { background: rgb(0 0 0 / .14); }

/* ═══════════════════════════════════════════ auditoría: el CRM en el móvil ══ */
/* En pantallas estrechas el menú se apilaba ENCIMA del contenido: 745 px de
   menú antes de ver nada. Ahora es un cajón que se abre con ☰ y se cierra al
   elegir una pantalla o al tocar fuera. */
@media (max-width: 900px) {
  body, body.menu-oculto { grid-template-columns: 1fr; }
  aside {
    position: fixed; z-index: 70; top: 0; left: 0; bottom: 0;
    width: min(16rem, 85vw); height: 100vh; overflow-y: auto;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 40px rgb(0 0 0 / .25);
  }
  body.menu-abierto aside { transform: none; }
  body.menu-oculto aside { pointer-events: auto; border-right-width: 1px; }
  body.menu-oculto aside > * { opacity: 1; }

  /* «Qué hacer ahora»: la explicación se quedaba en 22 px de ancho */
  .accion { flex-wrap: wrap; row-gap: 8px; }
  .accion .ac-txt { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .accion > .eti { margin-left: 38px; }
}
@media (max-width: 700px) {
  /* las tablas de dos columnas de las fichas se salían de la tarjeta */
  .card > table td, .card table.ficha-edit td { white-space: normal; overflow-wrap: anywhere; }
}

/* ══════════════════════════════════ auditoría: rejillas que no caben ══ */
/* minmax(360px) obligaba a 360 px aunque la pantalla midiera 343: las
   tarjetas de las fichas se salían por la derecha en el móvil. min() deja
   que la columna encoja hasta el ancho que haya. */
.r2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.r3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.r4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ═══════════════════════════ auditoría: el calendario del año, sin salirse ══ */
/* Los cortes de columnas no contaban el menú lateral (256 px): a 1.024 px se
   pedían 4 meses por fila y se salían 76 px por la derecha, y entre 1.300 y
   1.550 pasaba lo mismo con 6. Ahora los cortes miden lo que queda al lado
   del menú, siempre simétricos (2, 3, 4 o 6 por fila: 12 meses en filas
   iguales), y minmax(0, 1fr) impide que un mes empuje la rejilla. */
.calanyo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .calanyo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .calanyo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .calanyo { grid-template-columns: repeat(6, minmax(0, 1fr)); } }


/* ═══════════════════════════════════ acceso: entrar, 2FA, primer admin ══ */
/* Neutra a propósito: sin logo ni nombre. Hasta que no hay sesión no se
   pinta nada del CRM (ni el menú ni los números), solo esto. */
body.sin-sesion > aside, body.sin-sesion > .contenido { display: none; }
#acceso {
  position: fixed; inset: 0; z-index: 200; overflow: auto;
  display: grid; place-items: center; padding: 16px;
  background: var(--muted);
}
.acc-caja { width: min(380px, 100%); display: grid; gap: 16px; justify-items: center; }
.acc-candado {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--background); border: 1px solid var(--border); color: var(--muted-foreground);
}
.acc-candado svg { width: 20px; height: 20px; }
.acc-tarjeta {
  width: 100%; background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--sombra-sm); padding: 28px 24px 22px;
}
.acc-tarjeta h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; text-align: center; }
.acc-sub { font-size: 13px; color: var(--muted-foreground); text-align: center; margin: 6px 0 20px; line-height: 1.5; }
.acc-tarjeta form { display: grid; gap: 14px; }
.acc-tarjeta label { display: grid; gap: 7px; margin: 0; font-size: 13px; line-height: 1.2; }
.acc-tarjeta button.ancho { width: 100%; margin-top: 4px; }
.acc-ayuda { font-size: 12px; color: var(--muted-foreground); margin-top: -6px; }
#acc-error:empty { display: none; }
.acc-msg {
  font-size: 13px; line-height: 1.45; padding: 9px 12px; margin-bottom: 14px;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
#acc-error .acc-msg { margin: 0; }
.acc-msg.no { color: var(--destructive);
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 6%, transparent); }
.acc-msg.av { border-color: color-mix(in oklab, var(--warning) 45%, transparent);
  background: color-mix(in oklab, var(--warning) 8%, transparent); }
.acc-msg.ok { border-color: color-mix(in oklab, var(--success) 40%, transparent);
  background: color-mix(in oklab, var(--success) 7%, transparent); }
.acc-pie { text-align: center; font-size: 12.5px; color: var(--muted-foreground); margin-top: 16px; line-height: 1.6; }
.acc-pie a { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.acc-pie a:hover { color: var(--foreground); }

/* el menú de cada uno: fuera lo que no puede abrir o se ha escondido */
nav a.sin-permiso { display: none; }

/* las fotos, en cualquier avatar */
.side-pie .avatar, .avatar-xl, .avatar-sm, .pres-av { overflow: hidden; }
.side-pie .avatar img, .avatar-xl img, .avatar-sm img, .pres-av img {
  width: 100%; height: 100%; object-fit: cover; display: block; }

/* «ver como»: arriba del todo y de color, para no olvidar que no eres tú */
#aviso-ver-como {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13px;
  background: color-mix(in oklab, var(--warning) 16%, var(--background));
  border-bottom: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
}
#aviso-ver-como > div { flex: 1; min-width: 0; }
#aviso-ver-como svg { width: 16px; height: 16px; display: block; }

/* ─────────────────────────────── quién está dentro · la campana ── */
.presencia { display: flex; align-items: center; padding-left: 8px; }
.pres-av, .pres-mas {
  width: 28px; height: 28px; border-radius: 50%; margin-left: -6px; flex: none;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  border: 2px solid var(--background);
  background: color-mix(in oklab, var(--marca) 15%, var(--background)); color: var(--marca);
}
.pres-mas { background: var(--muted); color: var(--muted-foreground); }
button.campana { position: relative; }
button.campana .punto {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--destructive); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.panel-avisos {
  position: absolute; top: 52px; right: 12px; z-index: 70;
  width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg);
}
.panel-avisos header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--popover);
}
.panel-avisos button.aviso-it {
  display: grid; gap: 2px; justify-items: start; width: 100%; height: auto;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--foreground); text-align: left;
  white-space: normal; font-weight: 400;
}
.panel-avisos button.aviso-it:last-child { border-bottom: 0; }
.panel-avisos button.aviso-it:hover { background: var(--accent); opacity: 1; }
.aviso-it b { font-size: 13px; font-weight: 500; }
.aviso-it span { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.4; }
.aviso-it i { font-style: normal; font-size: 11.5px; color: var(--muted-foreground); }
.panel-avisos button.aviso-it.nuevo { background: color-mix(in oklab, var(--marca) 6%, transparent); }
.aviso-it.nuevo b::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--marca); margin-right: 6px; vertical-align: 1px;
}
#aviso-misma-ficha {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 12px;
  font-size: 13px; border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
  background: color-mix(in oklab, var(--warning) 9%, transparent);
}
#aviso-misma-ficha svg { width: 15px; height: 15px; flex: none; }

/* ─────────────────────────────── confirmaciones y «Deshacer» ── */
.dialogo-velo {
  position: fixed; inset: 0; z-index: 120; padding: 16px;
  display: grid; place-items: center; background: oklch(0 0 0 / .5);
  animation: entra .12s ease-out;
}
.dialogo {
  width: min(440px, 100%); padding: 22px 24px 18px;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg);
}
.dialogo h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.dialogo p { font-size: 13.5px; color: var(--muted-foreground); margin-top: 8px; line-height: 1.55; }
.dialogo footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.aviso { display: flex; align-items: center; gap: 12px; }
.aviso button.aviso-accion {
  flex: none; margin-left: auto; height: 28px; padding: 0 10px; font-size: 12.5px;
  background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border);
}

/* ─────────────────────────────────────────────── Mi perfil ── */
.perfil-col { display: grid; gap: 16px; max-width: 780px; }
.perfil-quien { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
.perfil-datos { flex: 1; min-width: 0; }
.perfil-datos .campo { margin-bottom: 12px; }
.avatar-xl.perfil-foto { background: color-mix(in oklab, var(--marca) 15%, var(--background)); color: var(--marca); }
label.boton-archivo {
  display: inline-flex; align-items: center; margin: 0; height: 32px; padding: 0 12px;
  font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--background); box-shadow: var(--sombra-xs);
}
label.boton-archivo:hover { background: var(--accent); }
.pasos-2fa { margin: 12px 0 0 18px; display: grid; gap: 14px; font-size: 13.5px; }
.qr-2fa {
  width: 184px; height: 184px; margin: 10px 0 6px; padding: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.qr-2fa svg { width: 100%; height: 100%; display: block; }
.codigos-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.codigos-rec code {
  font: 500 13px var(--mono); padding: 7px 8px; text-align: center;
  background: var(--muted); border-radius: var(--radius-sm);
}
.t-sesiones td, .t-permisos td, .t-actividad td { white-space: normal; padding: 9px 8px; }
.t-sesiones td:first-child { width: 30px; color: var(--muted-foreground); }
.t-sesiones svg { width: 16px; height: 16px; display: block; }
.t-sesiones .sub, .t-permisos .sub { font-size: 12px; color: var(--muted-foreground); }
.t-actividad td:first-child { white-space: nowrap; }

/* ─────────────────────────────────────── usuarios y tickets ── */
.quien-fila { display: flex; align-items: center; gap: 10px; }
.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: color-mix(in oklab, var(--marca) 15%, var(--background)); color: var(--marca);
}
.enlace-caja { padding: 10px 12px; background: var(--muted); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.enlace-caja code { font: 12.5px/1.5 var(--mono); }
.ocultas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.ocultas-lista label.check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; }
.ticket .responder { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.ticket .responder textarea { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .perfil-quien { flex-direction: column; }
  .ticket .responder { flex-direction: column; align-items: stretch; }
  .presencia { display: none; }
}

/* un icono delante de un título en negrita, en línea con el texto (la regla
   general de lucide los pone en bloque y se iban a la línea de arriba) */
.card b > svg.lucide, .dialogo h2 > svg.lucide { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.form-estrecho { max-width: 380px; }


/* ═══════════════════════════════════════════ tareas: el tablero (kanban) ══ */
.tablero {
  display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 12px;
  align-items: start; overflow-x: auto; padding-bottom: 8px;
}
.columna {
  background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 8px; min-height: 160px; transition: background-color .15s, border-color .15s;
}
.columna.encima { border-color: var(--marca); background: color-mix(in oklab, var(--marca) 6%, var(--muted)); }
.columna > header { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: 13px; }
.col-tarjetas { display: grid; gap: 8px; min-height: 60px; }
.col-vacia { font-size: 12px; color: var(--muted-foreground); text-align: center; padding: 18px 0; }
.tarjeta {
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 11px; cursor: grab; box-shadow: var(--sombra-xs);
  display: grid; gap: 6px;
}
.tarjeta:hover { border-color: color-mix(in oklab, var(--marca) 45%, var(--border)); }
.tarjeta:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 35%, transparent); }
.tarjeta.alta { border-left: 3px solid var(--destructive); }
.tarjeta.arrastrando { opacity: .45; }
.tarjeta .t-titulo { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.tarjeta .sub { font-size: 12px; color: var(--muted-foreground); }
.tarjeta footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tarjeta .t-com { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted-foreground); }
.tarjeta .t-com svg { width: 13px; height: 13px; }
.tarjeta .avatar-sm { width: 24px; height: 24px; font-size: 10px; }
@media (max-width: 900px) { .tablero { grid-template-columns: repeat(4, 240px); } }

/* ─────────────────────────────────────────────── la ficha de una tarea ── */
.ficha-tarea { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ft-principal, .ft-lado { display: grid; gap: 16px; }
.ft-lado select, .ft-lado input { width: 100%; }
@media (max-width: 1000px) { .ficha-tarea { grid-template-columns: 1fr; } }
h1.editable { cursor: text; border-radius: var(--radius-sm); }
h1.editable:hover { background: var(--muted); }
.input-titulo { font: inherit; font-size: 22px; font-weight: 600; width: 100%; }
.comentarios { display: grid; gap: 14px; margin-top: 12px; }
.comentario { display: flex; gap: 10px; align-items: flex-start; }
.comentario .c-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comentario .c-cab .xs { margin-left: auto; }
.comentario .c-txt { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; margin-top: 2px; }

/* ──────────────────────────────────────────── reuniones: la semana ── */
.sem-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sem-nav b { margin-left: 6px; font-size: 15px; }
.semana { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.sem-cab, .sem-todo-dia { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.sem-cab > div { padding: 8px; font-size: 12.5px; color: var(--muted-foreground); text-align: center; }
.sem-cab > div b { color: var(--foreground); font-size: 15px; margin-left: 2px; }
.sem-cab > div.hoy b { background: var(--marca); color: var(--marca-foreground); border-radius: 999px; padding: 1px 7px; }
.sem-todo-dia > div { padding: 4px; min-height: 30px; display: grid; gap: 3px; align-content: start; border-left: 1px solid var(--border); }
.sem-todo-dia > div:first-child { border-left: 0; font-size: 11px; display: flex; align-items: center; justify-content: center; text-align: center; }
.sem-chip {
  font-size: 11.5px; padding: 2px 6px; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sem-chip.bolo { background: color-mix(in oklab, var(--success) 18%, transparent); }
.sem-chip.tarea { background: color-mix(in oklab, var(--warning) 20%, transparent); }
.sem-cuerpo {
  display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  max-height: 62vh; overflow-y: auto; position: relative;
}
.sem-horas > div { height: var(--alto); font-size: 11px; color: var(--muted-foreground); text-align: right; padding: 2px 8px 0 0; }
.sem-dia { position: relative; border-left: 1px solid var(--border); }
.sem-dia.hoy { background: color-mix(in oklab, var(--marca) 4%, transparent); }
.sem-hueco { height: var(--alto); border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); cursor: pointer; }
.sem-hueco:hover { background: var(--muted); }
.sem-evento {
  position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; overflow: hidden;
  font-size: 11.5px; line-height: 1.3; cursor: pointer; display: grid; align-content: start;
  background: color-mix(in oklab, var(--marca) 16%, var(--card));
  border-left: 3px solid var(--marca); color: var(--foreground);
}
.sem-evento span { color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-evento b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-evento.t-visita { background: color-mix(in oklab, var(--success) 16%, var(--card)); border-left-color: var(--success); }
.sem-evento.t-reunion { background: color-mix(in oklab, var(--warning) 18%, var(--card)); border-left-color: var(--warning); }
@media (max-width: 800px) {
  .semana { overflow-x: auto; }
  .sem-cab, .sem-todo-dia, .sem-cuerpo { min-width: 760px; }
}

/* ─────────────────────────────────────── historial, etiquetas, selección ── */
.historial { display: grid; margin-top: 8px; }
.h-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.h-item:last-child { border-bottom: 0; }
.h-item .sub { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.etq {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; vertical-align: 1px;
  background: color-mix(in oklab, var(--c, #64748b) 16%, transparent);
  color: color-mix(in oklab, var(--c, #64748b) 80%, var(--foreground));
  border: 1px solid color-mix(in oklab, var(--c, #64748b) 35%, transparent);
}
.etq-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.etq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.etq-lista label.check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.etq-lista input { width: auto; }
td.muni .etq { margin-left: 4px; }
th.sel, td.sel { width: 34px; padding-right: 0; }
th.sel input, td.sel input { cursor: pointer; }
#barra-sel {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 14px;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg);
  animation: entra .15s ease-out;
}
#barra-sel b { margin-right: 6px; font-size: 13px; }
td.editable-celda { cursor: text; }
td.editable-celda:hover { box-shadow: inset 0 -1px 0 var(--marca); background: color-mix(in oklab, var(--marca) 5%, transparent); }
input.celda-edit { height: 30px; padding: 0 6px; width: 110px; text-align: right; }
td.mono input.celda-edit { text-align: left; width: 140px; }
.lista-dup { margin: 8px 0 0 18px; display: grid; gap: 4px; font-size: 13px; }
.lista-dup a { cursor: pointer; font-weight: 500; }

/* ─────────────────────────────────────────────── marca, marca de agua ── */
.side-cab .iso.con-logo { background: transparent; padding: 0; overflow: hidden; }
.side-cab .iso img, .marca-prev img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca-prev {
  width: 44px; height: 44px; border-radius: var(--radius-md); overflow: hidden; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
  background: var(--marca); color: var(--marca-foreground);
}
#marca-agua {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background-repeat: repeat; opacity: .07;
}
html.dark #marca-agua { opacity: .1; filter: invert(1); }
@media print { #marca-agua { opacity: .15; } }

/* ──────────────────────────────────────────────────────── el asistente ── */
#asistente {
  position: fixed; right: 16px; top: 64px; bottom: 16px; z-index: 75;
  width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--sombra-lg);
  animation: entra .15s ease-out;
}
#asistente > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
#asistente > header b { display: inline-flex; align-items: center; gap: 8px; }
.as-msgs { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.as-msg { font-size: 13.5px; line-height: 1.5; padding: 9px 12px; border-radius: 12px; max-width: 92%; }
.as-msg.yo { justify-self: end; background: var(--marca); color: var(--marca-foreground); border-bottom-right-radius: 4px; }
.as-msg.asistente { justify-self: start; background: var(--muted); border-bottom-left-radius: 4px; }
.as-msg p { margin: 0 0 6px; } .as-msg p:last-child { margin-bottom: 0; }
.as-msg ul { margin: 4px 0 6px 18px; }
.as-msg a { color: var(--marca); text-decoration: underline; cursor: pointer; }
.as-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--border); }
.as-form textarea { flex: 1; min-width: 0; resize: none; }
.sem-evento.corto { padding: 2px 6px; }
.sem-evento.corto span { display: none; }
/* Sistema: las explicaciones largas se parten en vez de salirse de la tarjeta */
.t-sis td { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.t-sis td:first-child { white-space: nowrap; width: 150px; vertical-align: top; }
/* Las casillas «10-08» de Municipios llevan la clase .dia, la misma que los
   días del calendario (cuadrados, en rejilla): salían de 140x140. */
.filtros input.dia { display: inline-block; aspect-ratio: auto; width: 72px; min-width: 72px; height: 36px; }
/* la barra de la selección, centrada en el contenido y no encima del menú */
@media (min-width: 901px) { body:not(.menu-oculto) #barra-sel { left: calc(50% + 8rem); max-width: calc(100vw - 16rem - 32px); } }
#barra-sel button { white-space: nowrap; }
/* En el móvil la regla general de las fichas parte cualquier celda por donde
   sea, y en Sistema la columna de la izquierda salía letra a letra (Ú/lti/ma)
   porque una ruta larga se comía el ancho. La etiqueta no se parte nunca. */
.card table.t-sis td:first-child { white-space: nowrap; overflow-wrap: normal; width: 1%; }


/* ══════════════════════════════════════════ Correo (hecho de cero, 24/09) ══ */
/* el motor: interruptor del envío automático + lo que está pasando */
.c-motor {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--sombra-xs);
}
.c-motor.marcha { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.c-motor.espera { border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); }
.c-motor-txt { display: grid; gap: 2px; min-width: 200px; flex: 1; }
.c-motor-txt b { font-size: 15px; }
.c-motor.marcha .c-motor-txt b { color: var(--success); }
.c-motor-txt span { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.4; }
.c-interruptor { position: relative; width: 52px; height: 30px; flex: none; margin: 0; cursor: pointer; }
.c-interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-interruptor span {
  position: absolute; inset: 0; border-radius: 999px; background: var(--muted);
  border: 1px solid var(--border); transition: background-color .2s;
}
.c-interruptor span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--sombra-sm); transition: transform .2s;
}
.c-interruptor input:checked + span { background: var(--success); border-color: transparent; }
.c-interruptor input:checked + span::after { transform: translateX(22px); }
.c-interruptor input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 35%, transparent); }
.c-kpis { display: grid; grid-template-columns: repeat(4, minmax(110px, auto)); gap: 6px; }
.c-kpis > * {
  display: grid; gap: 1px; justify-items: start; text-align: left; height: auto;
  padding: 6px 12px; border-radius: var(--radius-md); background: transparent; color: var(--foreground);
  border: 1px solid transparent; font-weight: 400;
}
.c-kpis > button:hover { background: var(--muted); opacity: 1; }
.c-kpis b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.c-kpis b small { font-size: 13px; color: var(--muted-foreground); font-weight: 500; }
.c-kpis span { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.c-kpis em { font-style: normal; color: var(--destructive); }
.c-aviso {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 9px 14px; margin-bottom: 10px; font-size: 13px; border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.c-aviso.no { border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 6%, transparent); }
.c-aviso.av { border-color: color-mix(in oklab, var(--warning) 45%, transparent);
  background: color-mix(in oklab, var(--warning) 8%, transparent); }
.c-tabs .c-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11.5px; font-weight: 600;
}
.c-tabs button.activo .c-n { background: var(--secondary); color: var(--foreground); }
.c-tabs .c-n.fuerte { background: var(--marca); color: var(--marca-foreground); }

/* lista a la izquierda, correo a la derecha */
.c-dos {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.c-lista, .c-detalle {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--sombra-xs); min-width: 0;
}
.c-lista { display: flex; flex-direction: column; max-height: calc(100vh - 330px); min-height: 420px; position: sticky; top: 70px; }
.c-lista-cab { padding: 10px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.c-lista-cab > div, #c-masivas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
#c-masivas:empty { display: none; }
.c-filas { overflow-y: auto; flex: 1; padding: 4px; outline: none; }
.c-fila {
  display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 52px;
  padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground);
  text-align: left; font-weight: 400; justify-content: flex-start;
}
.c-fila:hover { background: var(--muted); opacity: 1; }
.c-fila.activa { background: color-mix(in oklab, var(--marca) 10%, transparent); box-shadow: inset 3px 0 0 var(--marca); }
.c-fila.frenada .c-fila-txt b { color: var(--destructive); }
.c-fila-txt { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.c-fila-txt b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-fila-txt span { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-fila-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.c-dia { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.c-vacio { padding: 36px 20px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.c-vacio p { font-size: 13px; color: var(--muted-foreground); max-width: 280px; }
.c-plt-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--muted); font-size: 12px; font-weight: 600;
}

.c-detalle { padding: 18px 20px; display: grid; gap: 14px; }
.c-det-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.c-det-cab h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.c-det-cab h2 a { cursor: pointer; }
.c-det-cab h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-det-cab p { font-size: 12.5px; color: var(--muted-foreground); margin-top: 2px; }
.c-datos { display: flex; flex-wrap: wrap; gap: 8px; }
.c-datos > div {
  display: grid; gap: 1px; padding: 7px 12px; border-radius: var(--radius-md); background: var(--muted); min-width: 120px;
}
.c-datos span { font-size: 11.5px; color: var(--muted-foreground); }
.c-datos b { font-size: 13.5px; font-weight: 600; }
.c-campos { display: grid; gap: 8px; }
.c-campos label, .c-solo-ver > div {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0;
  font-weight: 400; font-size: 13.5px;
}
.c-campos label > span, .c-solo-ver span { color: var(--muted-foreground); font-size: 13px; }
.c-solo-ver b { font-weight: 500; overflow-wrap: anywhere; }
.c-para { display: flex; gap: 6px; min-width: 0; }
.c-para input { flex: 1; min-width: 0; }
.c-para select { width: auto; max-width: 45%; }
.c-cuerpo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.segmento { display: inline-flex; gap: 2px; padding: 3px; background: var(--muted); border-radius: var(--radius-md); }
.segmento button {
  height: 28px; padding: 0 12px; font-size: 13px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-foreground); font-weight: 500;
}
.segmento button.activo { background: var(--background); color: var(--foreground); box-shadow: var(--sombra-xs); }
.c-carta { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.c-carta iframe { display: block; width: 100%; height: 52vh; min-height: 360px; border: 0; background: #fff; }
.c-carta pre { padding: 18px; white-space: pre-wrap; font: 13.5px/1.55 var(--fuente); color: #111; }
.c-carta textarea {
  display: block; width: 100%; min-height: 52vh; border: 0; border-radius: 0; resize: vertical;
  padding: 18px; font: 14px/1.6 var(--fuente); background: var(--background); color: var(--foreground);
}
.c-carta .pista { padding: 8px 18px; margin: 0; border-top: 1px solid var(--border); background: var(--background); }
.c-carta-modal iframe { height: 58vh; }
.c-carta-modal .c-aviso { margin: 10px; }
.c-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.c-acciones kbd, .c-acciones .marca-btn kbd {
  font: 600 11px var(--mono); padding: 1px 5px; border-radius: 4px; margin-left: 4px;
  background: color-mix(in oklab, currentColor 14%, transparent);
}

/* preparar correos */
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.c-chip {
  height: 30px; min-width: 42px; padding: 0 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground);
}
.c-chip.activo { background: var(--marca); border-color: var(--marca); color: var(--marca-foreground); }
.c-tanda label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0 14px; line-height: 1.4; }
.c-tanda label.check input { width: auto; min-height: auto; }
.c-tanda-cuenta {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.45;
  background: color-mix(in oklab, var(--marca) 7%, transparent); border: 1px solid color-mix(in oklab, var(--marca) 25%, transparent);
}

/* plantillas */
.c-plt { display: grid; gap: 4px; }
.c-plt textarea { font: 14px/1.6 var(--fuente); min-height: 360px; }
.c-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.c-var {
  height: 26px; padding: 0 10px; font-size: 12px; font-weight: 500; border-radius: 999px;
  background: var(--muted); color: var(--foreground); border: 1px dashed var(--border);
}
.c-var:hover { border-color: var(--marca); color: var(--marca); opacity: 1; }

@media (max-width: 1000px) {
  .c-dos { grid-template-columns: 1fr; }
  .c-lista { position: static; max-height: 44vh; min-height: 0; }
  .c-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 600px) {
  .c-campos label, .c-solo-ver > div { grid-template-columns: 1fr; gap: 4px; }
  .c-para { flex-direction: column; }
  .c-para select { max-width: none; width: 100%; }
}
/* los botones de decidir, siempre a la vista aunque el correo sea largo */
.c-detalle .c-acciones {
  position: sticky; bottom: 0; z-index: 2; margin: 0 -20px -18px; padding: 12px 20px;
  background: color-mix(in oklab, var(--card) 94%, transparent); backdrop-filter: blur(6px);
  border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.c-sep {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 10px 10px 4px; font-size: 12px; color: var(--muted-foreground);
  position: sticky; top: -4px; background: var(--card); z-index: 1;
}
.c-sep b { color: var(--foreground); font-weight: 600; font-size: 12.5px; }
/* textos largos editables dentro de una tarjeta de ficha */
label.et-area { display: grid; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--muted-foreground); line-height: 1.2; }
label.et-area textarea { color: var(--foreground); font-size: 13.5px; }
.ficha-edit input[type=number] { max-width: 110px; }
.ficha-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; align-items: start; }
/* «.card table td { padding: 9px 0 }» es para las tablas de etiqueta: valor
   de las fichas, pero también se comía el margen de las tablas de datos que
   van dentro de una tarjeta (facturas, bolos, liquidaciones…): las columnas
   se pegaban («21/09/2026AJUNTAMENT»). Las tablas con cabecera son de datos. */
.card .tabla-caja td, .card table.zebra td, .card table:has(> thead) td {
  padding: 10px 12px; vertical-align: middle;
}
.card .tabla-caja td:first-child, .card table.zebra td:first-child, .card table:has(> thead) td:first-child {
  width: auto; padding-left: 14px;
}
/* celdas de texto largo en tablas de datos: se parten, y la nota en dos líneas */
td.td-largo { white-space: normal; min-width: 200px; max-width: 320px; }
.nota-2l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
div.corta { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* una pantalla metida como pestaña dentro de otra: su título, más discreto */
header.pag.sub-pag { margin-bottom: 12px; }
header.pag.sub-pag h1 { font-size: 17px; }
/* la leyenda de Disponibilidad, ahora encima de los meses */
.leyenda-cal.arriba { margin: 0 0 14px; padding-top: 0; border-top: 0; }
/* Municipios: las dos fechas de «Festa entre dos fechas…», juntas en la misma fila */
.festa-rango { display: inline-flex; align-items: center; gap: 6px; }
.festa-rango input[type=date] { min-width: 0; width: 150px; }
/* ficha de municipio: tarjetas de 440 px como mínimo. Con 360 cabían tres y el
   email de Contacto salía cortado («atencioalciutada@olot.») */
.rejilla.ficha-muni { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
/* los años del gráfico de gasto son botones sin fondo: heredaban el texto blanco
   del botón principal y no se veían (blanco sobre blanco) */
.ganyo-et, .gpunto { color: var(--foreground); }
/* las flechas y separadores iban en el color del borde, que en este tema es el
   mismo que el fondo: «Municipios › Olot» se leía «Municipios  Olot» */
.migas .sep, .tira-flecha, .precedente .pr-flecha { color: var(--muted-foreground); opacity: .55; }
/* las cuatro horas del bolo en una fila: una hora no necesita 200 px y «Fin» se quedaba sola abajo */
.rejilla.r4.horas { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
/* una ventana con pestañas, anclada arriba: centrada, al pasar de «Datos» (alta)
   a «Historial» (baja) la ventana entera daba un salto por la pantalla */
.velo:has(> .modal > .cuerpo > .tabs) { place-items: start center; padding-top: 5vh; }
/* una rejilla de dos dentro de otra (factura: NIF + CP, fechas, IVA + IRPF):
   con el mínimo de 360 px no cabían dos y todo salía en una columna larguísima */
.rejilla .rejilla.r2 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
/* líneas de la factura: la descripción se queda todo el ancho que sobra */
table.t-lineas td:first-child { width: 100%; }
/* en el móvil los botones del pie de una ventana bajan de línea: en el bolo son
   seis y los tres primeros (Borrar, Presupuesto, Factura) quedaban fuera, a la izquierda */
.modal > footer { flex-wrap: wrap; }
@media (max-width: 640px) {
  .modal > footer { padding: 12px 16px; }
  .modal > footer button { flex: 1 1 auto; }
}