/* Jarvis · Trintxao — centro de mando de eventos.
   Paleta y letra tomadas de la web real de Trintxao: carbón, brasa y crema. */
@font-face { font-family: "Trintxao"; src: url("/web/Trintxao-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Trintxao Light"; src: url("/web/Trintxao-Light.woff2") format("woff2"); font-display: swap; }

:root {
  --carbon: #0B0D0E;
  --humo: #151415;
  --panel: #151415;
  --panel-2: #1D1A19;
  --borde: #2B2725;
  --vino: #311314;
  --brasa: #B61A2F;
  --brasa-hi: #D4323F;
  --ascua: #E8662A;
  --crema: #F3EADB;
  --crema-2: #C9BFAF;
  --texto: #F3EADB;
  --suave: #C9BFAF;
  --tenue: #877C6E;
  --brasa-fondo: rgba(182, 26, 47, .16);
  --ascua-fondo: rgba(232, 102, 42, .14);
  --verde: #6FB079;
  --ambar: #E8A33D;
  --rojo: #E4564C;
  --display: "Trintxao", "Marcellus SC", Georgia, serif;
  --titular: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --radio: 14px;
  --sombra: 0 14px 40px rgba(0, 0, 0, .45);
  --lateral: 236px;
  --pestanas: 70px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--carbon); color: var(--texto); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: var(--ascua); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--texto); }
[hidden] { display: none !important; }

/* Marca: el logotipo de Trintxao, con su letra y una brasa encendida */
.marca { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.marca .palabra { font-family: var(--display); font-size: 20px; letter-spacing: 2.5px; color: var(--crema); }
/* El logotipo de la web real: se pinta como máscara, así toma el color de la marca. */
.marca .logotipo { display: block; width: 148px; aspect-ratio: 1634 / 626; background: var(--crema);
  -webkit-mask: url(/web/logotipo.png) center/contain no-repeat; mask: url(/web/logotipo.png) center/contain no-repeat; }
.marca.grande .logotipo { width: 250px; }
.marca .ascua { width: 9px; height: 9px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #FFD9A0, var(--ascua) 45%, var(--brasa) 100%); box-shadow: 0 0 10px rgba(232, 102, 42, .85); }
.marca.grande .palabra { font-size: 34px; letter-spacing: 5px; }
.marca.grande .ascua { width: 13px; height: 13px; }
.eyebrow { font-family: var(--titular); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--brasa-hi); font-weight: 700; }

/* Estructura */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 26px 16px 18px; display: flex; flex-direction: column; gap: 28px; border-right: 1px solid var(--borde); background: var(--humo); }
.lateral .marca { padding: 0 10px; }
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; color: var(--suave); font-weight: 600; }
.menu a:hover { background: var(--panel-2); color: var(--crema); }
.menu a.activo { background: var(--brasa-fondo); color: var(--crema); box-shadow: inset 2px 0 0 var(--brasa); }
.estado-cerebro { margin-top: auto; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--suave); padding: 10px 12px; border-radius: 11px; background: var(--panel-2); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none; }
.led.ok { background: var(--ascua); box-shadow: 0 0 0 4px rgba(232, 102, 42, .16); }
.led.mal { background: var(--rojo); }
.principal { padding: 34px clamp(18px, 4vw, 48px) 60px; min-width: 0; max-width: 1180px; width: 100%; }
.barra-movil, .pestanas { display: none; }

/* Encabezados */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cab h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.4px; }
.cab .sub, .sub { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
.seccion { margin-top: 26px; }
.seccion > .titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel); font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: var(--brasa); }
.btn.primario { background: var(--brasa); border-color: var(--brasa); color: var(--crema); }
.btn.primario:hover { background: var(--brasa-hi); border-color: var(--brasa-hi); }
.btn.peq { padding: 7px 11px; font-size: 13px; border-radius: 9px; }
.btn svg { width: 17px; height: 17px; }
.icono-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel); color: var(--suave); cursor: pointer; flex: none; }
.icono-btn:hover { color: var(--crema); border-color: var(--brasa); }
.icono-btn.on { color: var(--ascua); border-color: var(--ascua); background: var(--ascua-fondo); }

/* Tarjetas y métricas */
.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metrica { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 16px 14px; }
.metrica .et { font-size: 12.5px; color: var(--suave); font-weight: 600; }
.metrica .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.metrica .pie { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.metrica.alerta .val { color: var(--ambar); }
.metrica.brasa .val { color: var(--ascua); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.tarjeta > h2 { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarjeta > h2 a, .tarjeta > h2 .t2 { font-size: 12.5px; font-weight: 700; }
.rejilla-2 > *, .metricas > *, .tarjeta { min-width: 0; }
.vacio { color: var(--tenue); font-size: 14px; padding: 6px 0; }

/* Listas */
.lista { display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--borde); min-width: 0; }
.fila:first-child { border-top: 0; }
.fila .principal-txt { flex: 1; min-width: 0; }
.fila .t1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .t2 { font-size: 13px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .der { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila.clic { cursor: pointer; }
.hora { font-size: 12.5px; font-weight: 800; color: var(--ascua); min-width: 48px; font-variant-numeric: tabular-nums; }
.check { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--borde); background: transparent; display: grid; place-items: center; color: transparent; flex: none; }
.check:hover { border-color: var(--verde); color: var(--verde); }
.check svg { width: 15px; height: 15px; stroke-width: 2.4; }

/* Eventos */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip-f { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--borde); background: var(--panel); color: var(--suave); font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip-f.on { background: var(--crema); color: var(--carbon); border-color: var(--crema); }
.chip-f .n { opacity: .6; margin-left: 4px; }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; position: relative; overflow: hidden; }
.ficha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--borde); }
.ficha:hover { border-color: var(--brasa); transform: translateY(-1px); }
.ficha:hover::before { background: var(--brasa); }
.ficha .nombre { font-weight: 700; font-size: 16px; letter-spacing: -.2px; }
.ficha .meta { font-size: 13px; color: var(--suave); display: flex; flex-direction: column; gap: 2px; }
.ficha .pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.ficha .importe { font-weight: 800; font-variant-numeric: tabular-nums; }
.cuando { font-family: var(--titular); font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--ascua); text-transform: uppercase; }
.pax { font-size: 12.5px; font-weight: 700; color: var(--suave); }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel-2); color: var(--suave); }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-contacto { color: var(--suave); }
.e-cata { color: #E2B36A; background: rgba(226, 179, 106, .12); }
.e-presupuesto { color: var(--ambar); background: rgba(232, 163, 61, .12); }
.e-confirmado { color: var(--ascua); background: var(--ascua-fondo); }
.e-realizado { color: #9FC7D8; background: rgba(159, 199, 216, .1); }
.e-cobrado { color: var(--verde); background: rgba(111, 176, 121, .12); }
.e-perdido { color: var(--rojo); background: rgba(228, 86, 76, .1); }
.e-borrador { color: var(--suave); }
.e-enviado { color: var(--ambar); background: rgba(232, 163, 61, .12); }
.e-aceptado { color: var(--verde); background: rgba(111, 176, 121, .12); }
.e-rechazado { color: var(--rojo); background: rgba(228, 86, 76, .1); }
.aviso-n { font-size: 12px; font-weight: 800; color: var(--ambar); }

/* Detalle */
.detalle-cab { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.detalle-cab::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 102, 42, .18), transparent 70%); pointer-events: none; }
.detalle-cab h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.4px; }
.detalle-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--suave); font-size: 14px; }
.detalle-meta span { display: inline-flex; align-items: center; gap: 6px; }
.detalle-meta svg { width: 16px; height: 16px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
select.sel { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--borde); background: var(--panel-2); font-weight: 700; font-size: 13px; }
.subpestanas { display: flex; gap: 4px; margin: 20px 0 14px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.subpestanas::-webkit-scrollbar { display: none; }
.subpestanas button { background: none; border: 0; padding: 10px 14px; font-weight: 700; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subpestanas button.on { color: var(--crema); border-color: var(--brasa); }
.subpestanas .n { color: var(--tenue); font-weight: 600; margin-left: 3px; }
.form-linea { display: flex; gap: 8px; margin-bottom: 12px; }
.form-linea input, .campo { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel); outline: none; }
.form-linea input:focus, .campo:focus { border-color: var(--brasa); }
.tipo-nota { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); }
.tipo-nota.alergia { color: var(--rojo); } .tipo-nota.tarea { color: var(--ascua); } .tipo-nota.logistica { color: var(--ambar); } .tipo-nota.compra { color: #E2B36A; }
.hecha .t1 { text-decoration: line-through; color: var(--tenue); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--panel-2); border: 1px solid var(--borde); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .et { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(11, 13, 14, .8); color: var(--crema); text-transform: capitalize; }
.subir { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

/* La carta */
.platos { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.platos li { font-size: 13.5px; color: var(--suave); padding-left: 14px; position: relative; }
.platos li::before { content: "—"; position: absolute; left: 0; color: var(--brasa); }
.menu-ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; }
.menu-ficha h3 { margin: 6px 0 2px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.menu-ficha .precio { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-ficha .precio input { width: 92px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--borde); background: var(--panel-2); text-align: right; font-variant-numeric: tabular-nums; }
.menu-ficha .precio .nota { font-size: 12px; color: var(--tenue); }
.pill { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--ascua-fondo); color: var(--ascua); }

/* Agenda */
.dia { margin-bottom: 18px; }
.dia-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dia-cab b { font-size: 15px; }
.dia-cab span { color: var(--tenue); font-size: 13px; }
.dia-cab.hoy b { color: var(--ascua); }
.evento { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--tenue); border-radius: 11px; padding: 11px 14px; margin-bottom: 6px; }
.evento.ev-evento { border-left-color: var(--brasa); } .evento.ev-cata { border-left-color: var(--ascua); }
.evento.ev-visita { border-left-color: #E2B36A; } .evento.ev-llamada { border-left-color: #9FC7D8; }
.evento.ev-google { border-left-color: #6E6660; } .fila.ev-google { border-left: 3px solid #6E6660; padding-left: 9px; }
.evento.ev-cobro { border-left-color: var(--ambar); } .evento.ev-compra { border-left-color: var(--verde); }
.evento .principal-txt { flex: 1; min-width: 0; }
.evento .t1 { font-weight: 700; }
.evento .t2 { font-size: 13px; color: var(--suave); }
.libres { display: flex; flex-wrap: wrap; gap: 6px; }
.libres span { font-size: 12.5px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: var(--ascua-fondo); color: var(--ascua); }
.libres span.finde { background: rgba(182, 26, 47, .18); color: #F19AA3; }

/* Jarvis */
.vista-jarvis { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 0; max-width: 880px; width: 100%; margin: 0 auto; padding: 22px clamp(14px, 3vw, 32px) 18px; }
.chat-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.chat-cab h2 { font-family: var(--display); font-size: 26px; letter-spacing: 3px; }
.chat-acciones { display: flex; gap: 8px; }
.chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 8px 2px 16px; scroll-behavior: smooth; }
.chat-vacio { margin: auto; text-align: center; max-width: 520px; padding: 20px 0; }
.chat-vacio h3 { font-size: 23px; margin: 18px 0 6px; letter-spacing: -.3px; font-weight: 700; }
.chat-vacio p { color: var(--suave); margin: 0 0 20px; }
.saludo-orbe { width: 76px; height: 76px; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; color: #2A0A0C; background: radial-gradient(circle at 35% 25%, #FFD9A0, var(--ascua) 45%, var(--brasa) 100%); box-shadow: 0 14px 44px rgba(232, 102, 42, .35); }
.saludo-orbe svg { width: 36px; height: 36px; stroke-width: 1.5; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sugerencias button { padding: 9px 13px; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--texto); }
.sugerencias button:hover { border-color: var(--brasa); color: var(--crema); }
.msg { display: flex; flex-direction: column; max-width: 86%; }
.msg.quino { align-self: flex-end; align-items: flex-end; }
.msg .burbuja { padding: 11px 15px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.quino .burbuja { background: var(--brasa); color: var(--crema); border-bottom-right-radius: 5px; font-weight: 500; }
.msg.jarvis .burbuja { background: var(--panel); border: 1px solid var(--borde); border-bottom-left-radius: 5px; white-space: normal; }
.msg.jarvis .burbuja p { margin: 0 0 8px; } .msg.jarvis .burbuja p:last-child { margin: 0; }
.msg.jarvis .burbuja ul, .msg.jarvis .burbuja ol { margin: 4px 0 8px; padding-left: 20px; }
.msg.jarvis .burbuja a.doc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 4px 0; border-radius: 9px; background: var(--brasa-fondo); color: var(--crema); font-weight: 700; }
.msg.jarvis .burbuja a.doc svg { width: 16px; height: 16px; }
.msg.jarvis .burbuja table { border-collapse: collapse; font-size: 13.5px; margin: 6px 0; }
.msg.jarvis .burbuja td, .msg.jarvis .burbuja th { border-bottom: 1px solid var(--borde); padding: 4px 8px; text-align: left; }
.msg .miniaturas { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.msg .miniaturas img { width: 84px; height: 64px; object-fit: cover; border-radius: 9px; }
.msg .hora-msg { font-size: 11px; color: var(--tenue); margin-top: 4px; padding: 0 6px; }
.msg .oir { background: none; border: 0; color: var(--suave); font: inherit; cursor: pointer; padding: 4px 2px; }
.msg .oir svg { width: 13px; height: 13px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }
.msg.sistema { align-self: center; font-size: 12px; color: var(--tenue); }
.pensando { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ascua); font-weight: 700; padding: 4px 2px; }
.puntos { display: inline-flex; gap: 3px; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--ascua); animation: salto 1s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; } .puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes salto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.error-msg { color: var(--rojo); font-size: 13.5px; font-weight: 600; }
.adjuntos { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 8px; }
.adjuntos .adj { position: relative; }
.adjuntos img { width: 64px; height: 64px; object-fit: cover; border-radius: 11px; border: 1px solid var(--borde); display: block; }
.adjuntos button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff; font-size: 14px; line-height: 1; }
.compositor { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 18px; border: 1px solid var(--borde); background: var(--panel); box-shadow: var(--sombra); }
.compositor:focus-within { border-color: var(--brasa); }
.compositor .icono-btn { border: 0; background: transparent; }
.compositor textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; resize: none; padding: 10px 4px; max-height: 160px; line-height: 1.4; }
.micro, .enviar { width: 44px; height: 44px; border-radius: 13px; border: 0; display: grid; place-items: center; flex: none; }
.micro { background: var(--ascua-fondo); color: var(--ascua); }
.micro.escuchando { background: var(--brasa); color: var(--crema); animation: latido 1.2s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(182, 26, 47, .55); } 100% { box-shadow: 0 0 0 16px rgba(182, 26, 47, 0); } }
.enviar { background: var(--brasa); color: var(--crema); }
.enviar:disabled { opacity: .4; }

/* Entrada */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 480px at 50% -10%, rgba(182, 26, 47, .35), transparent 70%), var(--carbon); }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.login-card h1 { margin: 20px 0 0; font-size: 24px; letter-spacing: -.3px; font-weight: 700; }
.login-card p { margin: 0 0 8px; color: var(--suave); }
.login-card input, .login-card .btn { width: 100%; }
.login-card input { padding: 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); text-align: center; font-size: 16px; outline: none; }
.login-card input:focus { border-color: var(--brasa); }
.login-card .btn { padding: 14px; font-size: 15px; }
.aviso { color: var(--rojo); min-height: 20px; }

/* Aviso flotante y diálogo */
.aviso-flotante { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--crema); color: var(--carbon); padding: 11px 18px; border-radius: 11px; font-weight: 700; font-size: 14px; z-index: 50; box-shadow: var(--sombra); max-width: calc(100vw - 32px); }
dialog { border: 1px solid var(--borde); border-radius: 18px; background: var(--panel); color: var(--texto); padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--sombra); }
dialog::backdrop { background: rgba(5, 4, 4, .7); backdrop-filter: blur(3px); }
dialog h2 { margin-bottom: 14px; }
dialog label { display: block; font-size: 12.5px; font-weight: 700; color: var(--suave); margin: 10px 0 5px; }
dialog .campo { width: 100%; }
dialog .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dialog .pie-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (min-width: 1500px) { .principal { max-width: 1280px; } }
@media (max-width: 1080px) { .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rejilla-2 { grid-template-columns: 1fr; } }

/* Móvil */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .barra-movil { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--carbon) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); }
  .barra-movil .marca .palabra { font-size: 17px; }
  .barra-movil .marca .logotipo { width: 112px; }
  .barra-movil .icono-btn { width: 36px; height: 36px; }
  .titulo-movil { margin-left: auto; font-weight: 700; color: var(--suave); font-size: 14px; }
  .principal { padding: 18px 16px calc(var(--pestanas) + 30px + env(safe-area-inset-bottom)); }
  .cab { margin-bottom: 16px; }
  .metricas { gap: 10px; }
  .metrica { padding: 13px; }
  .metrica .val { font-size: 22px; }
  .fichas { grid-template-columns: 1fr; }
  .pestanas { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--pestanas) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--humo) 94%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--borde); }
  .pestanas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--tenue); font-size: 11px; font-weight: 700; }
  .pestanas a.activo { color: var(--ascua); }
  .pestanas a svg { width: 22px; height: 22px; }
  .pestanas .central .bola { width: 50px; height: 50px; margin-top: -22px; border-radius: 17px; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #FFD9A0, var(--ascua) 45%, var(--brasa) 100%); color: #2A0A0C; box-shadow: 0 8px 22px rgba(232, 102, 42, .45); }
  .pestanas .central .bola svg { width: 24px; height: 24px; }
  .vista-jarvis { height: calc(100dvh - 57px - env(safe-area-inset-top)); padding: 10px 12px calc(var(--pestanas) + 10px + env(safe-area-inset-bottom)); }
  .chat-cab h2 { font-size: 21px; }
  .msg { max-width: 92%; }
  .chat-vacio h3 { font-size: 20px; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila .t2 { white-space: normal; }
}

/* Visor de PDF y fotos a pantalla completa */
.visor { position: fixed; inset: 0; z-index: 60; background: #050404; display: flex; flex-direction: column; }
.visor-barra { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: var(--panel); }
.visor-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.visor-tit span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-tit small { color: var(--tenue); font-size: 12px; font-weight: 600; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 11px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--texto); font-size: 20px; font-weight: 700; }
.vbtn svg { width: 18px; height: 18px; }
.vbtn:disabled { opacity: .3; }
/* Sin flex a propósito: en columna flexible las páginas se encogen y salen diminutas. */
.visor-hojas { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 12px; }
.hoja { display: block; width: min(100%, 900px); height: auto; margin: 0 auto 12px; border-radius: 8px; background: #fff; box-shadow: var(--sombra); }
body.sin-scroll { overflow: hidden; }

/* Agenda en cuadrícula */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nav-cal { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nav-cal b { flex: 1; text-align: center; font-size: 15px; }
.nav-cal .vbtn { width: 36px; height: 36px; font-size: 18px; }
.calendario { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px; margin-bottom: 12px; }
.cal-cab, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-cab { margin-bottom: 6px; }
.cal-cab span { text-align: center; font-size: 12px; font-weight: 800; color: var(--tenue); }
.celda { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 58px; padding: 5px 4px; border-radius: 9px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--texto); text-align: left; overflow: hidden; }
.celda.alta.mes { min-height: 88px; }
.celda.alta.semana { min-height: 116px; }
.celda.fuera { opacity: .35; }
.celda.finde { background: #201B1A; }
.celda.hoy { border-color: var(--ascua); }
.celda.elegido { background: var(--brasa-fondo); border-color: var(--brasa); }
.celda .num { font-size: 13px; font-weight: 800; line-height: 1; }
.celda .marcas { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.celda .marca { height: auto; padding: 2px 4px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--tenue); color: #1A0D0A; }
.celda .marca b { font-weight: 800; }
.celda .marca i { font-style: normal; margin-left: 4px; }
@media (max-width: 700px) { .celda .marca i { display: none; } }
.celda .marca.ev-evento { background: var(--brasa); color: var(--crema); }
.celda .marca.ev-cata { background: var(--ascua); } .celda .marca.ev-visita { background: #E2B36A; }
.celda .marca.ev-llamada { background: #9FC7D8; } .celda .marca.ev-google { background: #6E6660; color: var(--crema); }
.celda .marca.ev-cobro { background: var(--ambar); } .celda .marca.ev-otro { background: var(--crema-2); }
.celda .mas { font-size: 10px; font-weight: 800; color: var(--tenue); }
@media (max-width: 480px) { .celda.alta.mes { min-height: 80px; } .celda.alta.semana { min-height: 104px; } .celda .num { font-size: 12px; } }

/* ── Correo: la bandeja y la consulta con sus tres pasos ── */
.menu a .pico { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brasa); color: var(--crema); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.acciones-cab { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-f { display: inline-flex; align-items: center; gap: 7px; }
.chip-f svg { width: 15px; height: 15px; opacity: .8; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--borde); }
.punto.on { background: radial-gradient(circle at 35% 35%, #FFD9A0, var(--ascua) 45%, var(--brasa) 100%); box-shadow: 0 0 9px rgba(232, 102, 42, .7); }
.etq { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--suave); font-size: 12px; font-weight: 700; white-space: nowrap; }
.etq.ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, var(--borde)); }
.etq svg { width: 14px; height: 14px; }
.tarjeta.ojo { display: flex; align-items: center; gap: 10px; border-color: var(--ambar); color: var(--ambar); margin-bottom: 16px; }
.tarjeta.pegada { position: sticky; top: 22px; }
.correo-texto { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--suave); max-height: 340px; overflow-y: auto; padding: 13px; border-radius: 11px; background: var(--carbon); border: 1px solid var(--borde); }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
.rejilla-campos .ancho { grid-column: 1 / -1; }
.rejilla-campos label, .et-grupo { display: block; font-size: 12.5px; font-weight: 700; color: var(--suave); margin-bottom: 5px; }
.rejilla-campos .campo { width: 100%; }
.et-grupo { margin: 16px 0 6px; }
.extras-lista { display: flex; flex-direction: column; gap: 2px; }
.extra { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borde); cursor: pointer; }
.extra:first-child { border-top: 0; }
.extra input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brasa); flex: none; }
.extra .nom { font-weight: 600; }
.extra .t2 { margin-left: auto; font-size: 13px; color: var(--tenue); white-space: nowrap; }
.extra .campo.mini { width: 64px; padding: 6px 8px; text-align: center; flex: none; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cuenta { margin-top: 16px; border-top: 1px solid var(--borde); }
.cuenta .fila.total { border-top: 1px solid var(--crema-2); }
.cuenta .fila.total .t1 { font-family: var(--titular); text-transform: uppercase; letter-spacing: 1px; }
.cuenta .fila.total .der { font-size: 20px; color: var(--ascua); }
.sub.ambar { color: var(--ambar); }
textarea.respuesta { width: 100%; resize: vertical; min-height: 220px; line-height: 1.5; margin-top: 12px; }
@media (max-width: 820px) {
  .tarjeta.pegada { position: static; }
  .pestanas a { font-size: 10px; }
  .pestanas a svg { width: 20px; height: 20px; }
}
@media (max-width: 420px) { .rejilla-campos { grid-template-columns: 1fr; } }

/* Editar presupuesto */
dialog.ancho { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
dialog textarea.campo { resize: vertical; font: inherit; }
.lin-ppto { display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 78px 84px 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.lin-ppto .campo { width: 100%; min-width: 0; padding: 7px 8px; }
.lin-ppto .imp { text-align: right; font-weight: 700; font-size: 13px; }
.lin-ppto.cab-lin { font-size: 11.5px; font-weight: 700; color: var(--tenue); margin-bottom: 4px; }
@media (max-width: 640px) {
  .lin-ppto { grid-template-columns: 1fr 56px 56px 70px 28px; }
  .lin-ppto .imp, .lin-ppto.cab-lin span:nth-child(5) { display: none; }
}


/* Marcas (Trintxao / Alright): selector de la barra lateral y etiqueta en eventos y presupuestos */
.selector-marca { display: flex; gap: 4px; padding: 3px; margin: -8px 4px 0; border-radius: 11px; background: var(--panel-2); }
.selector-marca .seg { flex: 1; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--suave); font-weight: 600; font-size: 12.5px; }
.selector-marca .seg.on { background: var(--brasa-fondo); color: var(--crema); box-shadow: inset 0 0 0 1px var(--brasa); }
.chip-marca { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; vertical-align: middle; }
.chip-marca.trintxao { background: var(--ascua-fondo); color: var(--ascua); }
.chip-marca.alright { background: var(--brasa-fondo); color: var(--brasa-hi); }