:root{ /* Rediseño 2026-07: claro de alto contraste (uso al sol), minimalista. Ver memoria design-direction-2026-07. Solo el tema default cambia. */ --cp:#227C33;--cpl:#3f9e4d;--cpp:#EAF3E7;--cpm:#CFE3C7; --cd:#14201A;--cg:#5B6B5E;--cl:#E3EADF;--cbg:#F4F7F2; --cw:#ffffff;--ca:#E8791A;--cr:#c62828;--cb:#2C5B86; --cpurple:#6a1b9a;--cteal:#00695c; --r:12px;--sh:0 1px 2px rgba(20,32,26,.04),0 6px 16px rgba(20,32,26,.06); /* F1 2026-07-12: tokens del sistema de diseño (escala tipográfica, radios, elevación, movimiento). Excepciones deliberadas: @media print, .ld-brand, .pw-icon, barras de progreso (.4s/.5s), radios decorativos <=3px. */ --fs-label:.6875rem; /* 11px etiquetas uppercase */ --fs-meta:.78rem; /* 12.5px meta/secundario */ --fs-body:.875rem; /* 14px cuerpo */ --fs-emph:1rem; /* 16px destacado/inputs */ --fs-title:1.25rem; /* 20px títulos */ --fs-num:1.75rem; /* 28px cifras KPI */ --fs-micro:.625rem; /* 10px contadores/microchips en cajas fijas */ --r-ctl:8px;--r-pill:999px; /* --r (12px) queda para tarjetas */ --sh2:0 2px 4px rgba(20,32,26,.06),0 8px 24px rgba(20,32,26,.10); /* hover/menús */ --sh3:0 6px 12px rgba(20,32,26,.08),0 16px 48px rgba(20,32,26,.18); /* modales */ --t-fast:.15s;--t-slow:.25s;--ease:cubic-bezier(.2,0,0,1); --fn:'Barlow','Inter',sans-serif;--fc:'Barlow Condensed','Inter',sans-serif; --fm:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --s-tent:#607d8b;--s-prog:#f9a825;--s-proc:#7b1fa2;--s-comp:#1565c0; --s-fact:#2e7d32;--s-susp:#e65100;--s-repr:#00695c;--s-canc:#c62828; } /* ── TEMAS ─────────────────────────────────────── */ /* 1. Verde Campo (default = :root) */ /* 2. Azul Océano */ body[data-theme="azul"]{ --cp:#1565c0;--cpl:#42a5f5;--cpp:#e3f2fd;--cpm:#bbdefb;--ca:#ff6d00; --s-comp:#1565c0; } /* 3. Tierra Cálida */ body[data-theme="tierra"]{ --cp:#4e342e;--cpl:#a1887f;--cpp:#efebe9;--cpm:#d7ccc8;--ca:#ff8f00; --s-comp:#4e342e; } /* 4. Zafiro Caribe */ body[data-theme="zafiro"]{ --cp:#00695c;--cpl:#26a69a;--cpp:#e0f2f1;--cpm:#b2dfdb;--ca:#ffd600; --s-comp:#00695c; } /* 5. Élite Oscuro (fuerza dark mode) */ body[data-theme="oscuro"]{ --cp:#bb86fc;--cpl:#bb86fc;--cpp:#2a2040;--cpm:#3a2d60;--ca:#03dac6; --cbg:#121212;--cw:#1e1e1e;--cd:#e1e1e1;--cl:#2d2d2d;--cg:#9e9e9e; --s-comp:#bb86fc; } /* ── MODO OSCURO MANUAL ── */ body.dark{ --cbg:#111213;--cw:#1e1e1e;--cd:#eceff1;--cl:#2d2d2d; --cpp:#1a2e1a;--cpm:#2a3e2a;--cg:#90a4ae; } /* Topbar y doc-header en dark mode */ body.dark .topbar, body.dark .doc-header{background:#1a1f2e;box-shadow:0 1px 0 #2d3748} body.dark .tab-btn{color:#90a4ae} body.dark .tab-btn:hover{color:#eceff1;background:rgba(255,255,255,.06)} body.dark .tab-btn.active{color:var(--cpl);background:rgba(76,175,80,.12)} body.dark .tb-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#eceff1} body.dark .tb-btn:hover{background:rgba(255,255,255,.13)} body.dark .tb-btn.green{background:var(--cp);border-color:var(--cp);color:#fff} body.dark .doc-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#eceff1} body.dark .doc-btn:hover{background:rgba(255,255,255,.13)} /* Card headers en dark mode: las vars del header neutro cubren fondo/texto; el acento del ícono usa el verde claro para contraste sobre #1e1e1e */ body.dark .card-hdr>i,body.dark .card-hdr>span>i{color:var(--cpl)} /* Modal headers en dark mode */ body.dark .modal-hdr{background:#1a1f2e;color:#eceff1;border-bottom-color:#2d3748} /* Toast: mismo problema que modal-hdr */ body.dark .toast{background:#263238;color:#eceff1} /* Calendario: encabezados de días y días de otro mes */ body.dark .cal-dow{background:#1e2a1e;color:#78909c} body.dark .cal-day.other-month{background:#181818;opacity:.5} /* Badges con fondo claro hardcodeado */ body.dark .int-badge{background:rgba(245,127,23,.15);border-color:rgba(245,127,23,.3)} body.dark .cli-badge{background:rgba(46,125,50,.15);border-color:rgba(46,125,50,.3)} /* Botón minus con fondo rojo claro */ body.dark .cbtn.minus{background:rgba(211,47,47,.15);color:#ef9a9a} /* Alerta de declaración */ body.dark #decl-alert{background:rgba(245,127,23,.12);border-color:rgba(245,127,23,.4);color:#ffb74d} /* Action bar: fondo oscuro para que los botones ghost blancos sean visibles */ body.dark input,body.dark select,body.dark textarea{ background:var(--cw);color:var(--cd);border-color:var(--cl) } body.dark label{color:var(--cd)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent} body{font-family:var(--fn);background:var(--cbg);color:var(--cd);min-height:100vh; overscroll-behavior-y:contain; /* evita el pull-to-refresh accidental que recargaría la app offline */ padding-bottom:env(safe-area-inset-bottom,0px)} /* ── LOADING ── */ #app-loading{ position:fixed;inset:0;background:linear-gradient(135deg,#182821,#0C1610); display:flex;flex-direction:column;align-items:center;justify-content:center; z-index:9999;gap:16px; } #app-loading .ld-icon{width:72px;height:72px;animation:spin 1.5s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}} #app-loading .ld-brand{font-family:var(--fc);font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:1px} #app-loading .ld-brand span{color:#5FB765} #app-loading .ld-msg{font-size:var(--fs-meta);color:#9BB0A3} /* ── SUBSCRIPTION BANNER ── */ #sub-banner{ background:#e65100;color:#fff;text-align:center;padding:6px 16px; font-size:var(--fs-meta);font-weight:600;display:none; } /* ── TOPBAR ── */ .topbar{ background:#fff;display:flex;align-items:center; justify-content:space-between;padding:0 12px;height:56px; position:sticky;top:0;z-index:300; box-shadow:0 1px 0 var(--cl);gap:6px; } .tb-logo{display:flex;align-items:center;gap:7px;flex-shrink:0} .tb-logo svg{width:22px;height:22px;flex-shrink:0} @media(max-width:480px){ #tb-icon-img{max-height:26px!important;max-width:26px!important} #tb-logo-img{max-height:32px!important;max-width:100px!important} } .co-name{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;color:var(--cp);white-space:nowrap} .tb-tabs{display:flex;gap:1px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none} .tb-tabs::-webkit-scrollbar{display:none} .tab-btn{ background:transparent;border:none;color:#2e7d32; font-family:var(--fn);font-size:var(--fs-label);font-weight:500; padding:6px 8px;border-radius:var(--r-ctl);cursor:pointer; transition:all var(--t-fast) var(--ease);white-space:nowrap; display:inline-flex;align-items:center;gap:4px; } .tab-btn:hover{color:var(--cd);background:var(--cbg)} .tab-btn.active{color:#fff;background:#2e7d32;font-weight:600} .tab-icon{display:inline-flex;align-items:center;vertical-align:middle} .tb-right{display:flex;align-items:center;gap:5px;flex-shrink:0} .tb-btn{ background:var(--cw);border:1px solid #b0b0b0; color:var(--cd);font-family:var(--fn);font-size:var(--fs-label);font-weight:600; padding:4px 8px;border-radius:var(--r-ctl);cursor:pointer;transition:all var(--t-fast) var(--ease);white-space:nowrap; display:inline-flex;align-items:center;gap:3px; } .tb-btn:hover{background:var(--cbg);border-color:var(--cg)} .tb-btn.green{background:var(--cp);border-color:var(--cp);color:#fff} .tb-btn.green:hover{background:#1b5e20;border-color:#1b5e20} .role-badge{ font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.5px; padding:2px 6px;border-radius:var(--r-pill);color:#fff;white-space:nowrap; } .role-badge.dueno,.role-badge.owner{background:#6a1b9a} .role-badge.super_admin{background:#4a148c} .role-badge.supervisor{background:#1565c0} .role-badge.planificacion,.role-badge.planner{background:#00695c} .role-badge.piloto,.role-badge.pilot,.role-badge.operator{background:#2e7d32} .tb-user{font-size:var(--fs-label);color:var(--cg);white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis} .tb-avatar{ width:30px;height:30px;border-radius:50%;background:var(--cp);color:#fff; font-size:var(--fs-meta);font-weight:700;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:opacity var(--t-fast) var(--ease); flex-shrink:0; } .tb-avatar:hover{opacity:.82} .tb-notif{ position:relative;background:none;border:none;cursor:pointer; font-size:var(--fs-emph);padding:4px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:background var(--t-fast) var(--ease);color:var(--cd); } .tb-notif:hover{background:var(--cbg)} .notif-badge{ position:absolute;top:-2px;right:-2px; min-width:16px;height:16px;background:var(--cr);color:#fff; font-size:var(--fs-micro);font-weight:700;border-radius:var(--r-pill); display:flex;align-items:center;justify-content:center; padding:0 3px;line-height:1;border:1px solid var(--cw); } .notif-item{ display:flex;align-items:flex-start;gap:8px; padding:10px 14px;border-bottom:1px solid var(--cl); font-size:var(--fs-meta); } .notif-item:last-child{border-bottom:none} .notif-item .ni-icon{font-size:var(--fs-emph);flex-shrink:0;margin-top:1px} .notif-item .ni-body{flex:1;min-width:0} .notif-item .ni-title{font-weight:600;color:var(--cd);margin-bottom:2px;overflow-wrap:anywhere} .notif-item .ni-sub{color:var(--cg);font-size:var(--fs-meta);overflow-wrap:anywhere} .notif-empty{padding:20px 14px;text-align:center;color:var(--cg);font-size:var(--fs-body)} .ms-row{display:flex;align-items:center;gap:6px} .ms-row input{flex:1;min-width:0} .ms-row .ms-num{width:70px;flex-shrink:0} .ms-row select{width:70px;flex-shrink:0} .tpl-row{display:flex;align-items:center;gap:6px} .tpl-row input{flex:1;min-width:0} .tpl-row .tpl-num{width:70px;flex-shrink:0} .tpl-row select{width:72px;flex-shrink:0} /* ── PAGES ── */ .page{display:none} .page.active{display:block} .page-wrap{max-width:1100px;margin:16px auto;padding:0 12px 24px} .mob-page-title{display:none;flex:1;text-align:center;font-family:var(--fc);font-size:var(--fs-emph);font-weight:700;color:var(--cd);letter-spacing:.3px} /* ── CARDS ── */ .card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden} /* F4 2026-07-12: headers neutros — el color queda para estado/acción; el acento lo lleva el ícono del título. Las clases de color (blue/orange/dark/int) quedan en el HTML como agrupación semántica pero pintan igual. */ .card-hdr{ background:var(--cw);color:var(--cd);font-family:var(--fc); font-size:var(--fs-meta);font-weight:700;letter-spacing:.8px; text-transform:uppercase;padding:7px 14px; display:flex;align-items:center;justify-content:space-between;gap:8px; border-bottom:1px solid var(--cl); } .card-hdr>i,.card-hdr>span>i{color:var(--cp)} .card-hdr.dark-hdr,.card-hdr.blue-hdr,.card-hdr.orange-hdr,.card-hdr.int{background:var(--cw);color:var(--cd);border-bottom-color:var(--cl)} /* Order form: taller module title bar (≈double height). Scoped so dashboard/reports headers stay compact. */ #page-order .card-hdr{padding-top:14px;padding-bottom:14px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:11px} .cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px} .cl-item{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);padding:4px 0} .cl-item input{width:15px;height:15px;accent-color:var(--cp);flex-shrink:0} .mez-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px} .mez-item{font-size:var(--fs-meta);padding:2px 0;color:var(--cg);display:flex;align-items:flex-start;gap:4px} .mez-num{font-weight:700;color:var(--cp);min-width:13px} .tog{position:relative;display:inline-block;width:28px;height:16px;flex-shrink:0} .tog input{opacity:0;width:0;height:0} .tog-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:var(--r-pill);transition:all var(--t-fast) var(--ease)} .tog-slider:before{content:'';position:absolute;width:11px;height:11px;left:2px;bottom:2.5px;background:#fff;border-radius:50%;transition:all var(--t-fast) var(--ease)} .tog input:checked+.tog-slider{background:var(--cp)} .tog input:checked+.tog-slider:before{transform:translateX(12px)} .adm-tab{background:none;border:1.5px solid #4a148c;color:#4a148c;border-radius:var(--r-ctl);padding:5px 14px;font-size:var(--fs-meta);font-weight:700;cursor:pointer;transition:all var(--t-fast) var(--ease)} .adm-tab.active,.adm-tab:hover{background:#4a148c;color:#fff} .adm-page{display:none}.adm-page.active{display:block} /* Equipamiento sub-tabs */ .eq-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .eq-tab{background:none;border:1.5px solid var(--cp);color:var(--cp);border-radius:var(--r-ctl);padding:6px 16px;font-size:var(--fs-meta);font-weight:700;cursor:pointer;transition:all var(--t-fast) var(--ease)} .eq-tab.active,.eq-tab:hover{background:var(--cp);color:#fff} .eq-page{display:none}.eq-page.active{display:block} /* Píldoras "Agrupar por" de Reportes → Análisis. Secundarias frente a .eq-tab: cambian el corte de los datos, no de pantalla. */ .rep-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .rep-pills-lbl{font-family:var(--fm);font-size:var(--fs-label);text-transform:uppercase;color:var(--cg);letter-spacing:.03em;margin-right:4px} .rep-pill{border:1.5px solid var(--cl);background:var(--cw);color:var(--cg);border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-meta);font-weight:700;cursor:pointer;font-family:var(--fn);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .rep-pill:hover{border-color:var(--cpm)} .rep-pill.on{background:var(--cpp);border-color:var(--cpm);color:var(--cp)} .card-body{padding:13px} /* ── SECTION COLLAPSE ── */ /* .sec-prev-chip lo sigue usando clima.js (widget de clima) */ .sec-prev-chip{background:var(--cbg);border:1px solid var(--cl);border-radius:var(--r-ctl);padding:2px 9px;font-size:var(--fs-meta);color:var(--cd)} .sec-prev-chip.empty{color:var(--cg);font-style:italic} /* Chevron + estado activo: la sección abierta se rellena sólido (mantiene su color de identidad) */ .card[id^="sec-"]>.card-hdr{cursor:pointer} .card[id^="sec-"]>.card-hdr::after{content:"\25BE";font-size:var(--fs-label);opacity:.55;margin-left:7px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)} .card.sec-open[id^="sec-"]>.card-hdr::after{transform:rotate(180deg);opacity:.9;margin-left:auto} /* Resumen de la sección colapsada: valor a la derecha del header, como una fila limpia */ .sec-hdr-sum{margin-left:auto;font-family:var(--fn);font-weight:600;font-size:var(--fs-body);letter-spacing:0;text-transform:none;color:var(--cg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;text-align:right} /* Señal de riesgo de la mezcla, visible con la sección Productos colapsada: el detalle vive en #compat-alerts (dentro del cuerpo), pero la señal debe sobrevivir al colapso. */ .sec-hdr-risk{margin-right:6px;font-size:var(--fs-body);line-height:1} /* Parámetros del Equipo: resumen a 2 líneas para mostrar más detalle (Vol/Alt/Tras/Vel/Gota) */ #sec-prev-internal{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:70%;line-height:1.3} /* F4: la sección abierta no se rellena de color; el chevron rotado + el cuerpo visible indican el estado (patrón Material de acordeón) */ /* ── KPI ── */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px} /* Rediseño 2026-07: KPI limpio — label (mono) arriba, número oscuro unificado, sin línea de color ni número arcoíris. Alto contraste para el sol. */ .kpi-card{background:var(--cw);border-radius:var(--r);box-shadow:none;border:1px solid var(--cl);padding:15px 17px;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:7px;text-align:left} .kpi-val{font-family:var(--fc);font-size:var(--fs-num);font-weight:800;color:var(--cd);line-height:1;letter-spacing:-.01em} .kpi-lbl{font-family:var(--fm);font-size:var(--fs-label);color:var(--cg);text-transform:uppercase;letter-spacing:.03em;font-weight:500} /* Alerta (pend. auth): el número sí se tiñe cuando hay algo que atender */ .kpi-card.red .kpi-val{color:var(--cr)} /* Comparación vs período anterior bajo cada KPI. up/down NO significan "subió/bajó" sino "mejor/peor": un costo que sube pinta down. */ .delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-label);font-weight:700;font-family:var(--fm);border-radius:var(--r-pill);padding:2px 8px;width:fit-content} .delta.up{background:#E4F2E6;color:#1B5E20} .delta.down{background:#FBE4E4;color:#B71C1C} .delta.flat{background:#EEF1F3;color:#455A64} .delta small{font-weight:500;opacity:.75;text-transform:none;letter-spacing:0} /* ── CHARTS ── */ .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .chart-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);padding:14px} .chart-title{font-family:var(--fc);font-size:var(--fs-meta);font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--cd);margin-bottom:10px} /* ── BAR ROWS ── */ .bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px} .bar-lbl{font-size:var(--fs-meta);min-width:110px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar-track{flex:1;background:var(--cl);border-radius:3px;height:7px} .bar-fill{height:7px;border-radius:3px;background:var(--cp);transition:width .5s} .bar-val{font-size:var(--fs-meta);color:var(--cg);min-width:28px;text-align:right} /* Ranking horizontal de Reportes → Análisis. Barra horizontal porque la etiqueta es un nombre: en vertical no cabe y se rota, y rotado no se lee. */ .hbar-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;margin-bottom:8px;font-size:var(--fs-meta)} .hbar-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hbar-track{background:var(--cbg);border-radius:4px;height:16px;overflow:hidden} .hbar-fill{height:100%;border-radius:0 4px 4px 0;background:var(--cp)} .hbar-val{font-family:var(--fc);font-weight:700;font-size:var(--fs-body);min-width:64px;text-align:right} /* ── BADGES ── */ /* Rediseño 2026-07: pill de estado sereno — fondo tenue + punto de color + texto de color. El color fuerte lo lleva la franja lateral de la fila. */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 8px;border-radius:var(--r-pill);font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--cd);background:var(--cw);border:1px solid var(--cl)} .badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dot,currentColor);flex-shrink:0} .badge.tent{background:#EEF1F3;color:#455A64;border-color:#DCE3E7;--dot:#607d8b} .badge.prog{background:#FEF3D7;color:#8A6A00;border-color:#F6E3AE;--dot:#f9a825} .badge.proc{background:#F4E9F8;color:#6A1B8A;border-color:#E6D3EE;--dot:#7b1fa2} .badge.comp{background:#E4EEF9;color:#0D47A1;border-color:#CDDFF1;--dot:#1565c0} .badge.fact{background:#E4F2E6;color:#1B5E20;border-color:#C9E5CC;--dot:#2e7d32} .badge.susp{background:#FDEADC;color:#BF360C;border-color:#F6D5BE;--dot:#e65100} .badge.repr{background:#DCF0EC;color:#00504A;border-color:#C1E4DD;--dot:#00695c} .badge.canc{background:#FBE4E4;color:#B71C1C;border-color:#F1CBCB;--dot:#c62828} .badge.pend{background:#F0EAE6;color:#5D4037;border-color:#E0D5CE;--dot:#795548} .badge.auth-ok{background:#E4F2E6;color:#1B5E20;border-color:#C9E5CC;--dot:#2e7d32} .badge.auth-no{background:#FBE4E4;color:#B71C1C;border-color:#F1CBCB;--dot:#c62828} /* ── SEARCH BAR ── */ .search-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:10px} .search-bar input,.search-bar select{ border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);padding:6px 10px; font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw);transition:border-color var(--t-fast) var(--ease); } .search-bar input[type=search]{flex:1;min-width:180px} .search-bar input:focus,.search-bar select:focus{border-color:var(--cp)} /* Botones a la altura del buscador: área de toque mayor, menos toques errados */ .search-bar .btn,.hist-toolbar-r1 .btn,.hist-toolbar-r2 .btn{padding-top:8px;padding-bottom:8px} /* ── HIST TOOLBAR (Orders tab) ── */ .hist-toolbar{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .hist-toolbar-r1,.hist-toolbar-r2{display:flex;gap:6px;align-items:center} .hist-toolbar-r1 input[type=search]{flex:1;min-width:0;border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);padding:6px 10px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw);transition:border-color var(--t-fast) var(--ease)} .hist-toolbar-r1 input[type=search]:focus{border-color:var(--cp)} .hist-toolbar-r2 select{flex:1;min-width:0;border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);padding:6px 10px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw)} @media(min-width:769px){ .hist-toolbar{flex-direction:row;align-items:center} .hist-toolbar-r1{flex:1} } /* ── BUTTONS ── */ .btn{border:none;border-radius:var(--r-ctl);padding:6px 12px;cursor:pointer;font-family:var(--fn);font-size:var(--fs-meta);font-weight:600;transition:all var(--t-fast) var(--ease);display:inline-flex;align-items:center;gap:4px;text-decoration:none} .btn-primary{background:var(--cp);color:#fff}.btn-primary:hover{background:#1b5e20} .btn-accent{background:var(--ca);color:#fff}.btn-accent:hover{background:#e65100} .btn-blue{background:var(--cb);color:#fff}.btn-blue:hover{background:#0d47a1} .btn-ghost{background:var(--cw);border:1.5px solid #b0b0b0;color:var(--cd)} .btn-ghost:hover{border-color:var(--cp);color:var(--cp)} .btn-danger{background:var(--cr);color:#fff}.btn-danger:hover{background:#b71c1c} .btn-purple{background:var(--cpurple);color:#fff} .btn-sm{padding:3px 8px;font-size:var(--fs-label)} .btn-o{background:var(--ca);color:#fff} .btn-d{background:var(--cr);color:#fff} .btn-p{background:var(--cp);color:#fff} /* ── ORDER ROWS ── */ /* Rediseño 2026-07: franja lateral de color por estado (escaneo al sol) + ID mono */ .order-row{position:relative;border:1px solid var(--cl);border-radius:var(--r);margin-bottom:8px;background:var(--cw);overflow:hidden;box-shadow:var(--sh)} .order-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stripe,transparent)} .order-row.tent{--stripe:#607d8b}.order-row.prog{--stripe:#f9a825}.order-row.proc{--stripe:#7b1fa2}.order-row.comp{--stripe:#1565c0} .order-row.fact{--stripe:#2e7d32}.order-row.susp{--stripe:#e65100}.order-row.repr{--stripe:#00695c}.order-row.canc{--stripe:#c62828} .order-row-hdr{display:flex;align-items:center;gap:8px;padding:9px 12px 9px 14px;cursor:pointer;transition:background var(--t-fast) var(--ease);flex-wrap:wrap} .order-row-hdr:hover{background:var(--cpp)} .ord-id{font-family:var(--fm);font-size:var(--fs-meta);font-weight:600;color:var(--cp);background:var(--cpp);padding:2px 8px;border-radius:var(--r-ctl);flex-shrink:0;letter-spacing:0} .ord-client{font-weight:600;flex:1;min-width:100px;font-size:var(--fs-body)} .ord-date{font-size:var(--fs-meta);color:var(--cg);flex-shrink:0} .ord-crop{font-size:var(--fs-meta);color:var(--cg);flex-shrink:0} .ord-total{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;flex-shrink:0} .order-row-body{display:none;border-top:1px solid var(--cl);padding:12px} .order-row-body.open{display:block} .order-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--cl)} #ctx-menu{position:fixed;background:var(--cw);border:1px solid var(--cl);border-radius:var(--r);box-shadow:var(--sh3);z-index:9999;min-width:175px;overflow:hidden;padding:4px 0} .ctx-item{padding:10px 16px;cursor:pointer;font-size:var(--fs-body);color:var(--ct);display:flex;align-items:center;gap:8px} .ctx-item:hover{background:var(--cl)} .ctx-danger{color:#c62828} .ctx-btn{background:none;border:none;cursor:pointer;font-size:var(--fs-emph);color:var(--cg);padding:2px 6px;border-radius:var(--r-ctl);line-height:1;flex-shrink:0} .ctx-btn:hover{background:var(--cl)} .order-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:5px 12px;margin-bottom:10px} .detail-item{font-size:var(--fs-body)} .detail-item label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.5px;color:var(--cg);display:block;margin-bottom:1px} .audit-log{font-size:var(--fs-meta);color:var(--cg);border-top:1px solid var(--cl);padding-top:7px;margin-top:7px} .audit-entry{padding:2px 0;display:flex;gap:8px;flex-wrap:wrap} .audit-entry time{color:var(--cg);white-space:nowrap;flex-shrink:0} .audit-entry span{color:var(--cd)} /* ── PERIOD TABS ── */ .period-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap} .period-btn{background:var(--cw);border:1.5px solid #b0b0b0;color:var(--cd);border-radius:var(--r-ctl);padding:5px 12px;cursor:pointer;font-family:var(--fn);font-size:var(--fs-meta);font-weight:600;transition:all var(--t-fast) var(--ease)} .period-btn.active{background:var(--cp);border-color:var(--cp);color:#fff} /* ── CALENDAR ── */ .cal-controls{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .cal-nav-row{display:flex;align-items:center;gap:8px} .cal-nav-row .cal-title{flex:1} .cal-view-row{display:flex;align-items:center;gap:6px} .cal-title{font-family:var(--fc);font-size:var(--fs-emph);font-weight:700} .cal-view-btn{background:var(--cw);border:1.5px solid #b0b0b0;color:var(--cd);border-radius:var(--r-ctl);padding:4px 10px;cursor:pointer;font-size:var(--fs-meta);font-weight:600;transition:all var(--t-fast) var(--ease)} .cal-view-btn.active{background:var(--cp);border-color:var(--cp);color:#fff} #cal-container{overflow-x:auto;-webkit-overflow-scrolling:touch} .cal-month{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:1px;background:var(--cl);border:1px solid var(--cl);border-radius:var(--r);overflow:hidden;min-width:308px} .cal-dow{background:var(--cd);color:#90a4ae;text-align:center;padding:7px 2px;font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.5px} .cal-day{background:var(--cw);min-height:88px;padding:4px;font-size:var(--fs-meta);cursor:pointer;transition:background var(--t-fast) var(--ease)} .cal-day:hover{background:var(--cpp)} .cal-day.other-month{background:#f8f9f8;opacity:.6} .cal-day.today .cal-dn{background:var(--cp);color:#fff;border-radius:50%} .cal-day.selected-day{background:var(--cpp);outline:2px solid var(--cp);outline-offset:-2px} .cal-dn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-meta);margin-bottom:2px} /* F3: chip tonal — fondo/texto/borde-izq los pone sChipStyle() (app-core.js) con la misma tríada de las pills .badge; aquí solo forma y tipografía */ .cal-evt{font-size:var(--fs-label);font-weight:500;padding:1px 5px;border-radius:3px;margin-top:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--t-fast) var(--ease)} .cal-evt:hover{opacity:.85} .cal-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:var(--fs-label)} .cal-legend span{display:flex;align-items:center;gap:3px} .cal-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0} /* ── CLIENTS ── */ .client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;margin-bottom:16px} .client-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);padding:14px;border-left:4px solid var(--cp);cursor:pointer;transition:box-shadow var(--t-fast) var(--ease)} .client-card:hover{box-shadow:var(--sh2)} .client-name{font-family:var(--fc);font-size:var(--fs-emph);font-weight:700;margin-bottom:3px} .client-meta{font-size:var(--fs-meta);color:var(--cg);margin-bottom:6px} .client-stats{display:flex;gap:10px;flex-wrap:wrap} .client-stat{font-size:var(--fs-meta);color:var(--cg)} .client-stat strong{color:var(--cd);font-weight:700} #map-clients{height:340px;border-radius:var(--r);overflow:hidden} /* ── DRONES ── */ .drone-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);padding:14px;border-left:4px solid var(--cp);margin-bottom:10px} .drone-id{font-family:var(--fm);font-size:var(--fs-body);font-weight:700;color:var(--cd);letter-spacing:0} .drone-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0} .drone-stat{background:var(--cbg);border-radius:var(--r-ctl);padding:8px;text-align:center} .drone-stat-val{font-family:var(--fc);font-size:var(--fs-emph);font-weight:700;color:var(--cp)} .drone-stat-lbl{font-size:var(--fs-label);color:var(--cg);text-transform:uppercase;letter-spacing:.4px} .bat-chip{font-size:var(--fs-meta);background:var(--cpp);border-radius:var(--r-ctl);padding:2px 7px;display:inline-block;margin:2px} /* ── USUARIOS ── */ .user-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:8px} .user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fc);font-size:var(--fs-emph);font-weight:800;color:#fff;flex-shrink:0} .user-info{flex:1;min-width:0} .user-name{font-weight:600;font-size:var(--fs-body)} .user-email{font-size:var(--fs-meta);color:var(--cg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap} /* ── CONFIG Gmail-style ── */ .cfg-layout{display:flex;background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);min-height:calc(100vh - 110px);overflow:hidden} .cfg-sidebar{width:200px;flex-shrink:0;border-right:1px solid var(--cl);padding:10px 0;background:var(--cbg)} .cfg-nav-btn{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 18px;border:none;background:none;text-align:left;font-size:var(--fs-body);color:var(--cd);cursor:pointer;border-radius:0 24px 24px 0;margin:1px 8px 1px 0;transition:background var(--t-fast) var(--ease);font-family:var(--fn);width:calc(100% - 8px)} .cfg-nav-btn:hover{background:var(--cl)} .cfg-nav-btn.active{background:var(--cpp);color:var(--cp);font-weight:600} body.dark .cfg-nav-btn.active{color:#fff} .cfg-nav-icon{font-size:var(--fs-emph);flex-shrink:0} .cfg-panels{flex:1;padding:24px 28px;overflow-y:auto} .cfg-panel{display:none} .cfg-panel.active{display:block} .cfg-save-wrap{position:sticky;bottom:0;padding:18px 0 2px;margin-top:16px;background:linear-gradient(to bottom,transparent,var(--cw) 32%);z-index:2} .cfg-section-hdr{font-size:var(--fs-meta);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--cg);padding-bottom:8px;border-bottom:1px solid var(--cl);margin-bottom:12px} .field{display:flex;flex-wrap:wrap;align-items:center;gap:4px} .field-lbl{font-size:var(--fs-meta);font-weight:600;color:var(--cg)} .field-hint{font-size:var(--fs-meta);color:var(--cg)} .field input,.field select{border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);padding:6px 10px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw)} /* Placeholders: cursiva + tenue para que no se lean como valor ya escrito. var(--cg) se redefine en dark/temas, así que la regla cubre todos. */ ::placeholder{color:var(--cg);opacity:.55;font-style:italic} .cfg-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--cbg);border-radius:var(--r-ctl);font-size:var(--fs-body);color:var(--cd);gap:8px} .cfg-sub-hdr{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cp);margin:14px 0 6px;grid-column:1/-1;display:flex;align-items:center;gap:5px} .cfg-sub-hdr::after{content:'';flex:1;height:1px;background:var(--cl)} .cfg-panel-title{font-family:var(--fc);font-size:var(--fs-emph);font-weight:700;color:var(--cd);margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--cl)} @media(max-width:768px){ .cfg-layout{flex-direction:column;min-height:auto;border-radius:0;box-shadow:none} .cfg-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--cl);display:flex;padding:6px 8px;overflow-x:auto;gap:4px;background:var(--cw)} .cfg-nav-btn{white-space:nowrap;border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-meta);margin:0;width:auto;flex-shrink:0} .cfg-panels{padding:16px 12px} } .cfg-section{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:12px} .cfg-title,.cfg-panel-title{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;color:var(--cd);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--cl)} .cfg-row{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap} .cfg-row label:not(.toggle):not(.tog){font-size:var(--fs-meta);font-weight:600;color:var(--cg);min-width:160px} .toggle{flex-shrink:0} .cfg-row input[type=text],.cfg-row input[type=number],.cfg-row select,.cfg-row textarea{border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);padding:6px 10px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw);flex:1;min-width:180px} .cfg-row input[type=color]{width:40px;height:32px;border:1.5px solid #b0b0b0;border-radius:var(--r-ctl);cursor:pointer;padding:2px} .cfg-row textarea{min-height:75px;resize:vertical;width:100%} .cfg-row input:focus,.cfg-row select:focus,.cfg-row textarea:focus{border-color:var(--cp)} .cfg-row.col{flex-direction:column;align-items:flex-start} .cfg-row.col label{min-width:0} /* product photo thumb in table */ .prod-thumb-img{width:36px;height:36px;object-fit:cover;border-radius:var(--r-ctl); border:1px solid var(--cl);cursor:pointer;display:block;margin:0 auto} /* ── VISOR DE FOTO FLOTANTE (Tarea 4, solo escritorio) ── */ .pv-panel{position:fixed;z-index:4000;display:flex;flex-direction:column;overflow:hidden; resize:both;min-width:280px;min-height:220px;background:var(--cw);border-radius:var(--r); box-shadow:var(--sh3);border:1px solid var(--cl)} .pv-hdr{flex-shrink:0;cursor:move;user-select:none;background:var(--cpp);color:var(--cp); padding:9px 8px 9px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--fc);font-size:var(--fs-body);font-weight:700;letter-spacing:.4px; border-bottom:1px solid var(--cpm)} .pv-hdr-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pv-close{flex-shrink:0;background:transparent;border:none;color:var(--cp);font-size:var(--fs-emph); cursor:pointer;padding:2px 6px;border-radius:var(--r-ctl);transition:background var(--t-fast) var(--ease)} .pv-close:hover{background:var(--cpm)} .pv-toolbar{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px 10px; border-bottom:1px solid var(--cl);background:var(--cbg)} .pv-zoom-lbl{margin-left:auto;font-family:var(--fm);font-size:var(--fs-meta);color:var(--cg)} .pv-viewport{flex:1;position:relative;overflow:hidden;background:var(--cbg);cursor:default} .pv-img{position:absolute;left:0;top:0;transform-origin:0 0;cursor:grab;user-select:none} /* theme swatches */ .theme-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .theme-swatch{width:52px;height:52px;border-radius:var(--r);cursor:pointer;border:3px solid transparent; transition:all var(--t-fast) var(--ease);display:flex;align-items:center;justify-content:center;position:relative} .theme-swatch.active,.theme-swatch:hover{border-color:var(--cd);transform:scale(1.08)} .theme-swatch .sw-check{display:none;font-size:var(--fs-body);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)} .theme-swatch.active .sw-check{display:block} .theme-swatch .sw-name{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%); font-size:var(--fs-label);color:var(--cg);white-space:nowrap;font-weight:600} /* lang selector */ .lang-grid{display:flex;gap:8px;flex-wrap:wrap} .lang-btn{padding:7px 14px;border-radius:var(--r-ctl);border:2px solid #b0b0b0;background:var(--cw); cursor:pointer;font-family:var(--fn);font-size:var(--fs-body);font-weight:600;color:var(--cd); transition:all var(--t-fast) var(--ease);display:flex;align-items:center;gap:5px} .lang-btn.active,.lang-btn:hover{border-color:var(--cp);color:var(--cp);background:var(--cpp)} .toggle{position:relative;display:inline-block;width:28px;height:16px} .toggle input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--cl);transition:all var(--t-fast) var(--ease);border-radius:var(--r-pill)} .toggle-slider:before{position:absolute;content:"";height:11px;width:11px;left:2px;bottom:2.5px;background:white;transition:all var(--t-fast) var(--ease);border-radius:50%} .toggle input:checked + .toggle-slider{background:var(--cp)} .toggle input:checked + .toggle-slider:before{transform:translateX(12px)} /* ── MODALS ── */ .modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:950;align-items:center;justify-content:center;padding:12px} .modal-ov.open{display:flex} .modal-box{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh3);width:100%;max-width:680px;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column} .modal-box.sm{max-width:420px} .modal-box.md{max-width:540px} .modal-hdr{background:var(--cpp);color:var(--cp);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;font-family:var(--fc);font-size:var(--fs-body);font-weight:700;letter-spacing:.8px;text-transform:uppercase;position:sticky;top:0;z-index:1;flex-shrink:0;border-bottom:1px solid var(--cpm)} .modal-close{background:transparent;border:none;color:var(--cg);font-size:var(--fs-title);cursor:pointer;padding:0;line-height:1} .modal-close:hover{color:var(--cd)} .modal-body{padding:16px;flex:1} /* ── PAYWALL OVERLAY ── */ #paywall-overlay{position:fixed;inset:0;background:rgba(10,20,10,.92);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)} .pw-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh3);max-width:560px;width:100%;padding:32px 28px;text-align:center;max-height:96vh;overflow-y:auto} .pw-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px} .pw-logo svg{width:32px;height:32px} .pw-logo span{font-family:var(--fc);font-size:var(--fs-title);font-weight:700;color:var(--cd)} .pw-icon{font-size:2.8rem;margin-bottom:8px} .pw-title{font-family:var(--fc);font-size:var(--fs-title);font-weight:800;color:var(--cd);margin:0 0 8px} .pw-sub{font-size:var(--fs-body);color:var(--cg);margin:0 0 24px;line-height:1.5} .pw-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px} .pw-plan{border:2px solid var(--cl);border-radius:var(--r);padding:18px 14px;position:relative} .pw-plan-best{border-color:var(--cp);background:var(--cpp)} .pw-best-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--cp);color:#fff;font-size:var(--fs-label);font-weight:800;padding:3px 10px;border-radius:var(--r-pill);letter-spacing:1px;white-space:nowrap} .pw-plan-name{font-family:var(--fc);font-size:var(--fs-emph);font-weight:700;color:var(--cd);margin-bottom:4px} .pw-plan-price{font-family:var(--fc);font-size:var(--fs-num);font-weight:900;color:var(--cp);line-height:1} .pw-plan-price span{font-size:var(--fs-body);color:var(--cg);font-weight:500} .pw-plan-feat{list-style:none;padding:10px 0 0;margin:0;text-align:left;font-size:var(--fs-meta);color:var(--cg);display:flex;flex-direction:column;gap:4px} .pw-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .pw-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r);font-size:var(--fs-body);font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:var(--fn);transition:opacity var(--t-fast) var(--ease)} .pw-btn-wa{background:#25d366;color:#fff} .pw-btn-email{background:var(--cp);color:#fff} .pw-btn:hover{opacity:.88} .pw-logout{background:transparent;border:none;color:var(--cg);font-size:var(--fs-meta);cursor:pointer;text-decoration:underline;padding:4px 8px;font-family:var(--fn)} @media(max-width:480px){.pw-plans{grid-template-columns:1fr}} /* legacy compat */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center;padding:16px} .modal-overlay.open{display:flex} /* ── TOAST ── */ .toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--cd);color:#fff;padding:8px 18px;border-radius:var(--r-pill);font-size:var(--fs-meta);font-weight:600;z-index:9000;opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none;max-width:min(92vw,420px);white-space:normal;text-align:center;line-height:1.3} .toast.show{opacity:1} .toast.err{background:var(--cr)} .toast.warn{background:#e65100} /* ── TABLES ── */ table{width:100%;border-collapse:collapse} th{background:var(--cpp);padding:8px 10px;text-align:left;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.6px;color:var(--cg);font-weight:700} td{padding:9px 10px;border-top:1px solid var(--cl);font-size:var(--fs-body)} tr:hover td{background:rgba(46,125,50,.03)} /* ── DOC HEADER (orden) ── */ .doc-header{ background:#fff;padding:10px 14px; display:flex;align-items:center;gap:8px;flex-wrap:wrap; position:sticky;top:56px;z-index:200; box-shadow:0 1px 0 var(--cl); } .draft-dot{width:8px;height:8px;border-radius:50%;background:var(--ca);display:none;flex-shrink:0} .draft-dot.show{display:block} .badge-id{ font-family:var(--fm);font-size:var(--fs-body);font-weight:600;letter-spacing:0; background:var(--cpp);color:var(--cp);padding:3px 10px;border-radius:var(--r-ctl);cursor:pointer; } #id-input{ font-family:var(--fm);font-size:var(--fs-body);font-weight:600; background:var(--cpm);color:var(--cp);border:2px solid var(--cpl); border-radius:var(--r-ctl);padding:2px 8px;display:none;width:130px; } .status-pills{display:flex;gap:4px;flex-wrap:wrap} .status-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px} .s-btn{padding:4px 10px;border-radius:var(--r);border:2px solid;font-family:var(--fn);font-size:var(--fs-meta);font-weight:700;cursor:pointer;transition:all var(--t-fast) var(--ease);white-space:nowrap;background:var(--cw)} .s-btn.scheduled{color:var(--s-prog);border-color:var(--s-prog)}.s-btn.scheduled.on,.s-btn.scheduled:hover{background:var(--s-prog);color:#fff} .s-btn.in-progress{color:var(--s-proc);border-color:var(--s-proc)}.s-btn.in-progress.on,.s-btn.in-progress:hover{background:var(--s-proc);color:#fff} .s-btn.completed{color:var(--s-comp);border-color:var(--s-comp)}.s-btn.completed.on,.s-btn.completed:hover{background:var(--s-comp);color:#fff} .s-btn.invoiced{color:var(--s-fact);border-color:var(--s-fact)}.s-btn.invoiced.on,.s-btn.invoiced:hover{background:var(--s-fact);color:#fff} .s-btn.suspended{color:var(--s-susp);border-color:var(--s-susp)}.s-btn.suspended.on,.s-btn.suspended:hover{background:var(--s-susp);color:#fff} .s-btn.rescheduled{color:var(--s-repr);border-color:var(--s-repr)}.s-btn.rescheduled.on,.s-btn.rescheduled:hover{background:var(--s-repr);color:#fff} .s-btn.cancelled{color:var(--s-canc);border-color:var(--s-canc)}.s-btn.cancelled.on,.s-btn.cancelled:hover{background:var(--s-canc);color:#fff} .s-btn.tentative{color:var(--s-tent);border-color:var(--s-tent)}.s-btn.tentative.on,.s-btn.tentative:hover{background:var(--s-tent);color:#fff} .radio-row{display:flex;flex-wrap:wrap;gap:5px 13px;margin-top:3px} .radio-item{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:var(--fs-body)} .radio-item input{width:15px;height:15px;accent-color:var(--cp)} .auth-pills{display:flex;gap:4px} .auth-pill{border:1.5px solid var(--cl);border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-label);font-weight:700;cursor:pointer;transition:all var(--t-fast) var(--ease)} #auth-pend{border-color:#795548;color:#795548} #auth-pend.on{background:#795548;color:#fff} #auth-ok{border-color:var(--cp);color:var(--cp)} #auth-ok.on{background:var(--cp);color:#fff} #auth-no{border-color:var(--cr);color:var(--cr)} #auth-no.on{background:var(--cr);color:#fff} #auth-ts{font-size:var(--fs-label);color:#90a4ae} .followup-btn{display:none;background:var(--cp);border:none;color:#fff;font-family:var(--fn);font-size:var(--fs-label);font-weight:600;padding:3px 9px;border-radius:var(--r-ctl);cursor:pointer} .followup-btn.show{display:inline-flex} .doc-actions{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap} .doc-btn{background:var(--cw);border:1px solid #b0b0b0;color:var(--cd);font-family:var(--fn);font-size:var(--fs-label);font-weight:600;padding:4px 9px;border-radius:var(--r-ctl);cursor:pointer;transition:all var(--t-fast) var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:3px} .doc-btn:hover{background:var(--cbg);border-color:var(--cg)} .doc-btn.save{background:var(--cp);border-color:var(--cp);color:#fff} .doc-btn.save:hover{background:#1b5e20;border-color:#1b5e20} .admin-only{display:none} /* ── CAMPO FORMS ── */ .field{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0} .field label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.6px;color:var(--cg);font-weight:700} .field>input,.field>select,.field>textarea{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box} /* Envoltorios (autocompletado de nombre, grupo de activos) también a ancho completo: son
, se escapaban de la regla de arriba y dejaban el label al lado. Solo existen en la tarjeta de producto móvil. */ .field>.ac-wrap{flex:0 0 100%;width:100%} .field>.ac-wrap>input{width:100%;box-sizing:border-box} .field>.cmpd-grp{flex:0 0 100%;width:100%} .field input,.field select,.field textarea{ border:1.5px solid var(--cl);border-radius:var(--r-ctl);padding:7px 9px; font-family:var(--fn);font-size:var(--fs-body);color:var(--cd); background:var(--cw);transition:border-color var(--t-fast) var(--ease);box-sizing:border-box; } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cp)} .fg{display:grid;gap:8px} .fg>*{min-width:0} .fg-2{grid-template-columns:1fr 1fr} .fg-3{grid-template-columns:1fr 1fr 1fr} .fg-4{grid-template-columns:1fr 1fr 1fr 1fr} .fg-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr} /* ── PARCEL ROWS ── */ .parcel-row{display:grid;grid-template-columns:24px 64px 1fr 1fr 1fr 1fr 90px;gap:5px;align-items:start;padding:8px;background:var(--cbg);border-radius:var(--r-ctl);margin-bottom:6px} .p-num{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;color:var(--cg)} .p-photos{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;padding-top:4px;border-top:1px dashed var(--cl);margin-top:4px} .photo-slot{display:flex;flex-direction:column;gap:3px;align-items:center} .photo-lbl{font-size:var(--fs-label);color:var(--cg);text-transform:uppercase;letter-spacing:.4px} .photo-ph{border:1.5px dashed var(--cl);border-radius:var(--r-ctl);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:var(--cbg);gap:2px;font-size:var(--fs-label);color:var(--cg)} .photo-ph:hover{border-color:var(--cp);color:var(--cp)} .photo-inp{display:none} .btn-rm-ph{display:none;border:none;background:none;color:#ef9a9a;font-size:var(--fs-label);cursor:pointer;padding:1px 4px} .btn-rm-ph:hover{color:var(--cr)} .btn-map-p{background:var(--cb);border:none;color:#fff;font-size:var(--fs-label);font-weight:600;padding:4px 7px;border-radius:var(--r-ctl);cursor:pointer;width:100%} .btn-del-p{background:none;border:1px solid #ef9a9a;color:#ef9a9a;font-size:var(--fs-meta);border-radius:var(--r-ctl);cursor:pointer;width:100%;padding:4px} /* ── PRODUCTS TABLE ── */ .prod-table-wrap{overflow-x:auto} #prod-table{min-width:820px;font-size:var(--fs-meta)} #prod-table th{font-size:var(--fs-label)} .s-field{margin-bottom:3px} .s-lbl{font-size:var(--fs-label);color:var(--cg);text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px} .s-field input,.s-field select{width:100%;border:1px solid var(--cl);border-radius:3px;padding:3px 5px;font-family:var(--fn);font-size:var(--fs-meta);color:var(--cd);background:var(--cw)} .cmpd-grp{display:flex;flex-direction:column;gap:2px} .cmpd-row{display:flex;gap:6px;align-items:center;margin-bottom:4px} .cmpd-row input{flex:1;min-height:36px;border:1px solid var(--cl);border-radius:var(--r-ctl);padding:6px 9px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw)} .cbtn{min-width:36px;min-height:36px;border:none;border-radius:var(--r-ctl);cursor:pointer;font-size:var(--fs-emph);font-weight:700;flex-shrink:0;display:flex;align-items:center;justify-content:center} .cbtn.minus{background:#ffebee;color:var(--cr)} body.dark .cbtn.minus{background:rgba(211,47,47,.15);color:#ef9a9a} .cbtn-add{width:100%;margin-top:2px;padding:8px 10px;background:var(--cpp);color:var(--cp);border:1px dashed var(--cp);border-radius:var(--r-ctl);cursor:pointer;font-size:var(--fs-meta);font-weight:600;text-align:center;letter-spacing:.1px} .row-num-td{font-family:var(--fc);font-size:var(--fs-meta);font-weight:700;color:var(--cg);text-align:center;vertical-align:top;padding-top:9px} .btn-del-row{background:none;border:1px solid #ef9a9a;color:#ef9a9a;border-radius:var(--r-ctl);cursor:pointer;padding:3px 7px;font-size:var(--fs-meta)} .int-badge{display:inline-flex;align-items:center;gap:4px;background:#fff3e0;color:var(--ca);font-size:var(--fs-label);font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase;border:1px solid #ffe0b2;margin-bottom:8px} .cli-badge{display:inline-flex;align-items:center;gap:4px;background:#e8f5e9;color:var(--cp);font-size:var(--fs-label);font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase;border:1px solid #c8e6c9;margin-bottom:8px} .auth-wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 8px} .auth-btn{border:2px solid;border-radius:var(--r-pill);padding:4px 14px;font-size:var(--fs-meta);font-weight:700;cursor:pointer;background:transparent;transition:all var(--t-fast) var(--ease);font-family:var(--fn)} .auth-btn.pend{border-color:#795548;color:#795548} .auth-btn.pend.on{background:#795548;color:#fff} .auth-btn.ok{border-color:var(--cp);color:var(--cp)} .auth-btn.ok.on{background:var(--cp);color:#fff} .auth-btn.no{border-color:var(--cr);color:var(--cr)} .auth-btn.no.on{background:var(--cr);color:#fff} .auth-ts-lbl{font-size:var(--fs-label);color:#90a4ae} .followup-btn-card{background:var(--cp);border:none;color:#fff;font-family:var(--fn);font-size:var(--fs-meta);font-weight:600;padding:6px 14px;border-radius:var(--r-ctl);cursor:pointer;display:inline-flex!important;align-items:center;gap:5px;margin-top:8px;width:100%;justify-content:center} .decl-checks{display:flex;flex-direction:column;gap:7px;margin:10px 0} .decl-check{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-meta);color:var(--cd);cursor:pointer;line-height:1.5} .decl-check input[type=checkbox]{margin-top:3px;accent-color:var(--cp);flex-shrink:0} .decl-inp{border:1px solid var(--cl);border-radius:var(--r-ctl);padding:3px 7px;font-size:var(--fs-meta);font-family:var(--fn);color:var(--cd);background:var(--cw);margin-left:6px} .sig-wrap{border:2px dashed var(--cl);border-radius:var(--r-ctl);padding:8px;background:var(--cbg)} .sig-wrap canvas{border-radius:var(--r-ctl);background:#fff;display:block;width:100%;touch-action:none} .prod-card{background:var(--cbg);border-radius:var(--r-ctl);padding:10px;margin-bottom:8px;border:1px solid var(--cl)} .prod-card-n{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;color:var(--cg);margin-bottom:6px} #prod-cards-wrap{display:none} /* Parcel + prod-card accordion headers — hidden on desktop */ .parcel-hdr{display:none} .prod-card-hdr{display:none} .mob-add-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:8px;padding:8px;background:var(--cpp);color:var(--cp);border:1.5px dashed var(--cp);border-radius:var(--r-ctl);font-family:var(--fc);font-size:var(--fs-body);font-weight:700;cursor:pointer;letter-spacing:.3px} /* ── AUTOCOMPLETE ── */ .ac-wrap{position:relative} .ac-list{position:absolute;top:100%;left:0;right:0;background:var(--cw);border:1.5px solid var(--cpl);border-radius:var(--r-ctl);max-height:180px;overflow-y:auto;z-index:400;display:none;box-shadow:var(--sh2)} .ac-list.open{display:block} .ac-item{padding:7px 10px;cursor:pointer;font-size:var(--fs-body)} .ac-item:hover{background:var(--cpp);color:var(--cp)} /* ── WEATHER ── */ #weather-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:6px 0} .w-item{display:flex;align-items:center;gap:4px;font-size:var(--fs-meta)} /* ── RESUMEN / SUMMARY ── */ .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:10px} .res-item{background:var(--cbg);border-radius:var(--r-ctl);padding:4px 8px;text-align:center} .res-val{font-family:var(--fc);font-size:var(--fs-emph);font-weight:800;color:var(--cp)} .res-lbl{font-size:var(--fs-label);color:var(--cg);text-transform:uppercase;letter-spacing:.5px;margin-top:2px} /* ── COMPATIBILITY BAR ── */ .compat-bar-wrap{display:flex;align-items:center;gap:8px} .compat-bar-track{flex:1;height:10px;background:var(--cl);border-radius:var(--r-ctl);overflow:hidden} #compat-bar-fill{height:10px;width:100%;background:var(--cp);border-radius:var(--r-ctl);transition:width .4s,background .4s} /* ── CHECKLIST ── */ .check-list{display:flex;flex-direction:column;gap:4px} .check-list label{display:flex;align-items:center;gap:7px;font-size:var(--fs-body);cursor:pointer;padding:3px 0} .check-list input[type=checkbox]{width:15px;height:15px;accent-color:var(--cp);flex-shrink:0} /* ── SIGNATURE ── */ #sig-canvas{border:1.5px solid var(--cl);border-radius:var(--r-ctl);cursor:crosshair;touch-action:none;max-width:100%;background:#fafafa} /* ── DECL ALERT ── */ #decl-alert{background:#fff3e0;border:1.5px solid var(--ca);border-radius:var(--r-ctl);padding:8px 12px;font-size:var(--fs-meta);color:#e65100;margin-bottom:8px;display:none} /* ── FAVS ── */ .fav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--cl)} .fav-name{font-weight:600;font-size:var(--fs-body)} .fav-meta{font-size:var(--fs-meta);color:var(--cg)} /* ── MAP MODAL ── */ #map-container{height:300px;border-radius:var(--r-ctl);overflow:hidden} .map-info{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:var(--fs-body);flex-wrap:wrap} /* ── PRINT AREA ── */ #print-content{display:none} @media print{ .topbar,.doc-header,.search-bar,.period-tabs, .order-actions,.btn,.cal-controls,.modal-ov,.modal-overlay{display:none!important} body{padding-bottom:0} .page{display:none!important} #print-content{display:block!important} .print-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:12px} .print-logo-img{max-height:50px;max-width:120px} .print-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #2e7d32} .print-title{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;font-weight:800;color:#2e7d32} .print-meta{font-size:.8rem;text-align:right;color:#546e7a} .print-sec{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e0e0e0} .print-sec-t{font-family:'Barlow Condensed',sans-serif;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#1a2a3a;margin-bottom:6px} .print-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .print-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .print-lbl{font-size:.65rem;text-transform:uppercase;color:#546e7a;letter-spacing:.4px} .print-val{font-size:.85rem;font-weight:600;color:#1a2a3a} .print-prod-tbl th{background:#e8f5e9;padding:5px 7px;font-size:.65rem} .print-prod-tbl td{padding:5px 7px;border-top:1px solid #e0e0e0;font-size:.77rem} .print-decl{background:#e8f5e9;padding:8px 12px;border-radius:4px;font-size:.73rem;margin-top:8px} .print-sig-row{display:flex;gap:40px;margin-top:20px;padding-top:12px;border-top:1px solid #e0e0e0} .print-sig-line{border-top:1.5px solid #546e7a;padding-top:4px;font-size:.68rem;color:#546e7a;margin-top:40px} .print-footer{margin-top:16px;font-size:.63rem;color:#90a4ae;text-align:center;border-top:1px solid #e0e0e0;padding-top:8px} .print-compat-bar{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden} .print-compat-fill{height:8px;border-radius:4px} } /* ── RESPONSIVE ── */ @media(max-width:768px){ .topbar .tb-tabs{display:none} .mob-page-title{display:block} .chart-grid{grid-template-columns:1fr} .cal-day{min-height:56px} /* Columnas de ~44px: el chip baja al token micro para conservar caracteres */ .cal-evt{font-size:var(--fs-micro);padding:1px 4px} .cal-month{min-width:308px} .ord-total{display:none} .ord-date{order:19;flex:0 0 100%;margin-top:2px} .parcel-row{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start} .parcel-hdr{display:flex;align-items:center;gap:7px;flex:0 0 100%;padding:7px 8px;background:rgba(0,0,0,.06);border-radius:var(--r-ctl);cursor:pointer;user-select:none} .parcel-hdr .p-hnum{background:var(--cp);color:#fff;border-radius:50%;width:22px;height:22px;min-width:22px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);font-weight:700} .parcel-hdr .p-hname{flex:1;font-size:var(--fs-body);color:var(--cd);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .parcel-row.collapsed > *:not(.parcel-hdr){display:none!important} .p-num-wrap{display:none!important} .p-act-wrap{display:none!important} .parcel-row .field{flex:1 1 80px;min-width:70px} .parcel-row .p-photos{flex:0 0 100%} /* prod-card accordion */ .prod-card-hdr{display:flex;align-items:center;gap:7px;padding:4px 0;margin-bottom:6px;border-bottom:1px solid var(--cl);cursor:pointer;user-select:none} .prod-card-hdr .prod-card-hnum{font-family:var(--fc);font-size:var(--fs-body);font-weight:700;color:var(--cg);flex-shrink:0} .prod-card-hdr .prod-card-hname{flex:1;font-size:var(--fs-body);color:var(--cd);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prod-card.collapsed .prod-card-body{display:none} .prod-card-n{display:none} /* Hide delete on first parcel (can't be removed) */ #parcels-list .parcel-row:first-child .parcel-hdr .btn-d{display:none} /* Summary chips inside collapsed headers */ .p-hsum,.prod-card-hsum{font-size:var(--fs-meta);color:var(--cg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px} .fg-5{grid-template-columns:1fr 1fr 1fr} .fg-4{grid-template-columns:1fr 1fr} .fg-3{grid-template-columns:1fr 1fr} .card-hdr .doc-btn{display:none} } @media(max-width:480px){ .kpi-grid{grid-template-columns:1fr 1fr} .client-grid{grid-template-columns:1fr} .two-col{grid-template-columns:1fr} .drone-id{font-size:var(--fs-emph)} } /* ── HAMBURGER MENU TOGGLE ── */ .menu-tog{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px; width:34px;height:34px;background:none;border:none;cursor:pointer;padding:4px; border-radius:var(--r-ctl);margin-right:6px;flex-shrink:0} .menu-tog:hover{background:rgba(0,0,0,.07)} .menu-tog-bar{display:block;width:20px;height:2px;background:var(--cd);border-radius:2px; transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)} body.dark .menu-tog:hover{background:rgba(255,255,255,.12)} body.dark .menu-tog-bar{background:#fff} .menu-tog.open .menu-tog-bar:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-tog.open .menu-tog-bar:nth-child(2){opacity:0} .menu-tog.open .menu-tog-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ── MOBILE MENU OVERLAY ── */ .mobile-menu{display:none;position:fixed;inset:0;z-index:1200; background:rgba(0,0,0,.55);backdrop-filter:blur(2px)} .mobile-menu.open{display:flex} .mm-inner{position:absolute;top:0;left:0;bottom:0;width:min(280px,85vw); background:var(--ctb);display:flex;flex-direction:column; animation:slideInLeft .22s ease-out} @keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}} .mm-header{display:flex;align-items:center;justify-content:space-between; padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);min-height:52px} .mm-user{color:#fff;font-size:var(--fs-meta);font-weight:600;max-width:140px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mm-close{background:none;border:none;color:#fff;font-size:var(--fs-emph);cursor:pointer; padding:4px 8px;border-radius:var(--r-ctl);opacity:.7} .mm-close:hover{opacity:1;background:rgba(255,255,255,.12)} .mm-tabs{flex:1;overflow-y:auto;padding:8px 0} .mm-btn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 18px; background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer; font-size:var(--fs-body);font-family:var(--fc);font-weight:600;text-align:left; transition:background var(--t-fast) var(--ease)} .mm-btn:hover,.mm-btn.active{background:rgba(255,255,255,.12);color:#fff} .mm-btn.active{border-left:3px solid var(--cp);padding-left:15px} .mm-btn span:first-child{font-size:var(--fs-emph);width:24px;text-align:center} .mm-logout{margin:10px 14px 18px;padding:10px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);border-radius:var(--r-ctl);color:rgba(255,255,255,.8); cursor:pointer;font-size:var(--fs-body);font-family:var(--fc);font-weight:600;transition:background var(--t-fast) var(--ease)} .mm-logout:hover{background:rgba(255,255,255,.16);color:#fff} @media(max-width:768px){ .menu-tog{display:flex} .page{padding-bottom:16px} /* Touch targets */ .s-btn{padding:10px 13px;font-size:var(--fs-meta)} .status-wrap{gap:8px} .ctx-btn{min-width:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center} .eq-tab{padding:10px 16px} .eq-tabs{gap:10px} /* Order row — 2-row mobile layout */ .ord-break{display:block;width:100%;height:0;order:10;flex-shrink:0} .ord-crop{order:20;flex:1;margin-top:4px} .order-row-hdr .badge{order:21;margin-top:4px;flex-shrink:0} } /* ══════════════════════════════════════════════════════════ BOTTOM NAV ══════════════════════════════════════════════════════════ */ #bottom-nav{ display:none;position:fixed;bottom:0;left:0;right:0;height:56px; background:#fff;border-top:1px solid var(--cl);z-index:900; padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -1px 6px rgba(0,0,0,.08); } body.dark #bottom-nav{background:#1a1f2e;border-top-color:#2d3748} @media(max-width:768px){ #bottom-nav.bn-ready{display:flex} .page{padding-bottom:72px} } #bn-btns{display:flex;flex:3} .bn-btn{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; background:none;border:none;cursor:pointer; color:var(--cg);transition:color var(--t-fast) var(--ease);position:relative;padding:0; } .bn-ico{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1; padding:2px 14px;border-radius:var(--r-pill);transition:background var(--t-fast) var(--ease)} .bn-lbl{font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;line-height:1} .bn-btn.active{color:var(--cp)} .bn-btn.active .bn-ico{background:var(--cpp)} .bn-btn:hover{color:var(--cd)} /* Bottom Sheet */ #bottom-sheet-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100; } #bottom-sheet-overlay.open{display:block} #bottom-sheet{ position:fixed;bottom:-100%;left:0;right:0; background:#fff;border-radius:16px 16px 0 0; z-index:1101;max-height:72vh;overflow-y:auto; transition:bottom var(--t-slow) cubic-bezier(.32,.72,0,1); } body.dark #bottom-sheet{background:#1a1f2e} #bottom-sheet.open{bottom:0} .bs-handle{ width:36px;height:4px;background:rgba(0,0,0,.15); border-radius:2px;margin:10px auto 8px; } body.dark .bs-handle{background:rgba(255,255,255,.2)} .bs-item{ display:flex;align-items:center;gap:14px;padding:13px 20px; background:none;border:none;width:100%;font-size:var(--fs-body); color:var(--cd);cursor:pointer;text-align:left;font-family:var(--fn); } .bs-item:hover,.bs-item.active{background:var(--cpp);color:var(--cp)} body.dark .bs-item:hover,body.dark .bs-item.active{background:rgba(255,255,255,.07);color:var(--cpl)} .bs-item span:first-child{font-size:var(--fs-emph);width:24px;text-align:center} .bs-logout{ display:flex;align-items:center;gap:10px;width:calc(100% - 28px); margin:8px 14px 18px;padding:11px 16px; background:rgba(0,0,0,.04);border:1px solid var(--cl);border-radius:var(--r-ctl); font-family:var(--fn);font-size:var(--fs-body);color:var(--cg);cursor:pointer; } .bs-logout:hover{background:rgba(0,0,0,.08);color:var(--cd)} body.dark .bs-logout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#90a4ae} /* Config: picker de barra inferior */ .bn-cfg-item{ display:flex;align-items:center;gap:10px;padding:10px 12px; border-radius:var(--r-ctl);cursor:pointer;font-size:var(--fs-body);color:var(--cd); border:1px solid transparent;transition:background var(--t-fast) var(--ease); user-select:none; } .bn-cfg-item:hover{background:var(--cbg)} .bn-cfg-item input{accent-color:var(--cp);width:16px;height:16px;flex-shrink:0} .bn-cfg-item.bn-checked{background:var(--cpp);border-color:var(--cpm)} body.dark .bn-cfg-item.bn-checked{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)} /* ══════════════════════════════════════════════════════════ COMUNIDAD / BLOG ══════════════════════════════════════════════════════════ */ .blog-hdr{margin-bottom:14px} .blog-hdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .blog-hdr-title{margin:0;font-size:var(--fs-emph);font-weight:700;color:var(--cd)} .blog-cats{display:flex;gap:6px;flex-wrap:wrap} .blog-cat-btn{border:1px solid var(--cl);background:var(--cw);color:var(--cg);border-radius:var(--r-pill);padding:4px 12px;font-size:var(--fs-meta);font-weight:600;cursor:pointer;transition:all var(--t-fast) var(--ease);font-family:var(--fn)} .blog-cat-btn:hover,.blog-cat-btn.active{background:var(--cp);color:#fff;border-color:var(--cp)} .blog-card{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden;cursor:pointer;transition:box-shadow var(--t-fast) var(--ease)} .blog-card:hover{box-shadow:var(--sh2)} .blog-pin-bar{background:#f3e5f5;color:#6a1b9a;font-size:var(--fs-meta);font-weight:700;padding:5px 14px;letter-spacing:.3px} .blog-card-top{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 6px} .blog-avatar{width:36px;height:36px;border-radius:50%;background:var(--cp);color:#fff;font-size:var(--fs-meta);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .blog-avatar.blog-avatar-lg{width:44px;height:44px;font-size:var(--fs-emph)} .blog-avatar.blog-avatar-sm{width:28px;height:28px;font-size:var(--fs-label);flex-shrink:0} .blog-author-info{flex:1;min-width:0} .blog-author-name{font-size:var(--fs-body);font-weight:700;color:var(--cd);display:flex;align-items:center;gap:5px;flex-wrap:wrap} .blog-support-badge{background:#2e7d32;color:#fff;font-size:var(--fs-label);font-weight:700;padding:2px 6px;border-radius:var(--r-pill);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap} .blog-meta{font-size:var(--fs-meta);color:var(--cg);margin-top:1px} .blog-cat-tag{font-size:var(--fs-label);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;flex-shrink:0;align-self:flex-start} .blog-card-title{font-size:var(--fs-body);font-weight:700;color:var(--cd);padding:2px 14px 5px;line-height:1.3} .blog-card-preview{font-size:var(--fs-meta);color:var(--cg);padding:0 14px 8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .blog-card-img{width:100%;max-height:260px;object-fit:cover;display:block} .blog-video-pill{padding:6px 14px;font-size:var(--fs-meta);color:var(--cb)} .blog-video-pill a{color:var(--cb);text-decoration:underline} .blog-card-footer{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--cl)} .blog-like-btn{background:none;border:1px solid var(--cl);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-meta);cursor:pointer;color:var(--cg);transition:all var(--t-fast) var(--ease);font-family:var(--fn);font-weight:600} .blog-like-btn:hover,.blog-like-btn.liked{border-color:#e53935;color:#e53935;background:#ffebee} .blog-like-sm{padding:2px 7px;font-size:var(--fs-label)} .blog-comment-count{font-size:var(--fs-meta);color:var(--cg);font-weight:600} .blog-mod-btn{background:none;border:none;cursor:pointer;font-size:var(--fs-body);padding:2px 5px;opacity:.6;transition:all var(--t-fast) var(--ease)} .blog-mod-btn:hover{opacity:1} /* Detail modal */ .blog-modal-box{background:var(--cw);border-radius:var(--r);box-shadow:var(--sh3);overflow:hidden;margin-top:16px} .blog-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--cl)} .blog-modal-close{background:none;border:none;cursor:pointer;font-size:var(--fs-emph);color:var(--cg);padding:2px 6px} .blog-modal-body{padding:16px;max-height:80vh;overflow-y:auto} .blog-detail-author{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px} .blog-detail-title{font-size:var(--fs-emph);font-weight:700;color:var(--cd);margin:0 0 10px;line-height:1.3} .blog-detail-body{font-size:var(--fs-body);color:var(--cd);line-height:1.6;white-space:pre-wrap;word-break:break-word} .blog-detail-img{max-width:100%;border-radius:var(--r-ctl);margin-top:12px;display:block} .blog-detail-actions{display:flex;gap:8px;align-items:center;padding:12px 0;border-top:1px solid var(--cl);margin-top:12px} .blog-comments-wrap{margin-top:4px} .blog-comments-title{font-size:var(--fs-body);font-weight:700;color:var(--cd);padding:10px 0 8px;border-top:1px solid var(--cl)} .blog-comment{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start} .blog-comment-body{flex:1;background:var(--cbg);border-radius:var(--r-ctl);padding:8px 10px} .blog-comment-author{font-size:var(--fs-meta);font-weight:700;color:var(--cd);display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:4px} .blog-comment-text{font-size:var(--fs-meta);color:var(--cd);line-height:1.5;word-break:break-word} .blog-add-comment{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--cl)} .blog-add-comment textarea{width:100%;border:1px solid var(--cl);border-radius:var(--r-ctl);padding:8px;font-family:var(--fn);font-size:var(--fs-body);color:var(--cd);background:var(--cw);resize:vertical;box-sizing:border-box} .blog-add-comment textarea:focus{border-color:var(--cp)} .blog-add-comment .btn{align-self:flex-end} body.dark .blog-card{background:var(--cw)} body.dark .blog-comment-body{background:#1e2a1e} body.dark .blog-cat-btn{background:var(--cbg)} /* ── TEMPLATE ACCORDION ── */ .tmpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin-bottom:4px} .tmpl-btn{background:rgba(255,255,255,.04);border:1px solid var(--cl);border-radius:var(--r);padding:10px 12px;color:var(--cd);font-family:var(--fn);font-size:var(--fs-meta);font-weight:600;cursor:pointer;transition:all var(--t-fast) var(--ease);text-align:left;line-height:1.3} .tmpl-btn:hover{border-color:var(--cp);background:rgba(76,175,80,.07)} .tmpl-btn.active{border-color:var(--cp);background:rgba(76,175,80,.1);color:var(--cp)} .tmpl-panel{display:none;border:1px solid var(--cl);border-radius:var(--r);padding:14px 16px;margin-top:10px;margin-bottom:4px;background:rgba(255,255,255,.02)} .tmpl-panel.open{display:block} .tmpl-vars{font-size:var(--fs-label);color:var(--cg);margin:0 0 8px;line-height:1.9} .tmpl-vars code{background:rgba(255,255,255,.07);border-radius:3px;padding:1px 4px;font-size:var(--fs-label)} .tmpl-panel textarea{width:100%;border:1px solid var(--cl);border-radius:var(--r-ctl);padding:9px 11px;font-family:var(--fn);font-size:var(--fs-meta);color:var(--cd);background:var(--cbg);resize:vertical;box-sizing:border-box} .tmpl-panel textarea:focus{border-color:var(--cp)} .tmpl-panel .field label{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--cg);display:block;margin-bottom:4px} .tmpl-panel .field{margin-bottom:10px} .tmpl-hint{font-size:var(--fs-label);color:var(--cg);margin-top:3px} .tmpl-save{display:flex;justify-content:flex-end;margin-top:10px} /* ── TOOLTIPS (ⓘ) — global floating div, never clipped by overflow:hidden ── */ .tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:var(--fs-label);font-weight:700;color:var(--cg);opacity:.55;cursor:default;vertical-align:middle;margin-left:3px;flex-shrink:0;user-select:none;line-height:1;transition:opacity var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .tip:hover{color:var(--cp);opacity:1} #g-tip{position:fixed;background:#1a2a3a;color:#fff;font-size:var(--fs-meta);font-weight:400;line-height:1.45;padding:6px 10px;border-radius:var(--r-ctl);white-space:normal;max-width:260px;pointer-events:none;z-index:99999;box-shadow:var(--sh2);opacity:0;transition:opacity var(--t-fast) var(--ease);text-transform:none;letter-spacing:0;font-family:Barlow,sans-serif} /* Phosphor Icons — font-size controls icon size; vertical-align for baseline alignment */ .ph,.ph-fill,.ph-bold,.ph-light,.ph-thin,.ph-duotone{line-height:1;vertical-align:middle} /* Toolbar de Aeronaves: una fila en escritorio; apilado búsqueda/registrar/importar en móvil */ .eq-toolbar{display:flex;gap:8px;align-items:center} /* Botones a la altura de la casilla de búsqueda — evita toques errados */ .eq-toolbar input,.eq-toolbar .btn{min-height:34px;box-sizing:border-box} .eq-toolbar .btn{padding:6px 12px;font-size:var(--fs-meta);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center} .eq-toolbar input{flex:1;min-width:0} @media(max-width:600px){ .eq-toolbar{flex-direction:column;align-items:stretch} .eq-toolbar .btn{width:100%;text-align:center} } /* Discrepancia con el catálogo de productos (aviso visual, no bloquea) */ .inp-discrep{border-color:#e53935!important;background:#fff3f2!important;box-shadow:inset 0 0 0 1px #e53935!important} /* ══════════════════════════════════════════════════════════ F2 2026-07-12: ESTADOS DE INTERACCIÓN Foco de teclado visible en toda la app, pulsación y disabled sistemáticos, y respeto a prefers-reduced-motion. ══════════════════════════════════════════════════════════ */ /* Anillo de foco visible (las reglas :focus de inputs ya no apagan el outline; este anillo es la única fuente y cubre botones, enlaces e inputs por igual) */ :focus-visible{outline:2px solid var(--cp);outline-offset:2px} /* Toggles (el input real es invisible, 0x0): sin anillo propio — lo lleva el slider */ .tog input:focus-visible,.toggle input:focus-visible{outline:none} .tog input:focus-visible+.tog-slider,.toggle input:focus-visible+.toggle-slider{ outline:2px solid var(--cp);outline-offset:2px } /* Pulsación: hundimiento sutil; transform es barato (composited) en gama baja. Cubre todo