/* Inventario — estilos */
:root {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --ink: #1c1f23;
  --ink-2: #4a5059;
  --muted: #7a808a;
  --line: #e4e1da;
  --accent: #0e6b5c;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ee;
  --danger: #b4321f;
  --danger-soft: #fbe9e5;
  --warn: #9a5b00;
  --warn-soft: #fdf1dc;
  --info: #24569b;
  --info-soft: #e5eefb;
  --ok: #1d6b39;
  --ok-soft: #e2f3e7;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 1px 1px rgba(20, 20, 20, .03);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #141618; --surface: #1c1f22; --surface-2: #212528; --ink: #ecebe7; --ink-2: #c3c6cb; --muted: #8d939b;
    --line: #2e3337; --accent: #3bb39c; --accent-ink: #08201b; --accent-soft: #163a33;
    --danger: #ef7a66; --danger-soft: #3b1d18; --warn: #f0b45a; --warn-soft: #3a2c14;
    --info: #86b1ec; --info-soft: #1b2a40; --ok: #6fcf8f; --ok-soft: #173322;
    --shadow: none; color-scheme: dark; } }
:root[data-theme="oscuro"] { --bg: #141618; --surface: #1c1f22; --surface-2: #212528; --ink: #ecebe7; --ink-2: #c3c6cb; --muted: #8d939b;
    --line: #2e3337; --accent: #3bb39c; --accent-ink: #08201b; --accent-soft: #163a33;
    --danger: #ef7a66; --danger-soft: #3b1d18; --warn: #f0b45a; --warn-soft: #3a2c14;
    --info: #86b1ec; --info-soft: #1b2a40; --ok: #6fcf8f; --ok-soft: #173322;
    --shadow: none; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }
.mt { margin-top: 1.5rem; }
.muted { color: var(--muted); }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.upper { text-transform: uppercase; }

/* Barra superior */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar-inner { max-width: 1240px; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none !important; }
.brand span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.brand small { color: var(--muted); font-size: .75rem; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 18px; }
.brand-lg .brand-mark { width: 42px; height: 42px; }
.nav { display: flex; gap: .15rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: .45rem .7rem; border-radius: 7px; color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.on { background: var(--accent-soft); color: var(--accent); }
.logout { display: flex; align-items: center; gap: .5rem; margin: 0; }
.who { color: var(--muted); font-size: .85rem; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 1rem 2rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head p { margin: .35rem 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Tarjetas */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 + .card, .grid-2 + .grid-2 { margin-top: 1rem; }
.empty { color: var(--muted); margin: .25rem 0; padding: .75rem 0; }
.card.flush .empty { padding: 1.25rem; }
.danger-zone .inline-form { align-items: center; }

/* Indicadores */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; box-shadow: var(--shadow); color: var(--ink); }
.stat-label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-sub { color: var(--muted); font-size: .85rem; }
a.stat-sub { color: var(--accent); }
.stat-alert { border-color: var(--warn); background: var(--warn-soft); }
.stat-link:hover { text-decoration: none; border-color: var(--accent); }
.stat-link.on { border-color: var(--accent); background: var(--accent-soft); }

/* Tablas */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { background: var(--surface-2); color: var(--ink-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td, .table tfoot th { border-top: 1px solid var(--line); border-bottom: 0; }
.card:not(.flush) .table th:first-child, .card:not(.flush) .table td:first-child { padding-left: 0; }
.card:not(.flush) .table thead th { background: transparent; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
tr.inactive td { opacity: .55; }
tr.sub td { background: var(--surface-2); font-size: .88rem; }
tr.warn-row td { background: var(--warn-soft); }
.w-qty { width: 110px; } .w-cost { width: 140px; } .w-sm { width: 90px; }
.lines input, .lines select { width: 100%; }

.qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-in { color: var(--ok); } .qty-out { color: var(--danger); } .qty-adj { color: var(--warn); }

.badge { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; margin-left: .25rem; white-space: nowrap; vertical-align: 1px; }
td > .badge:first-child, .page-head .badge:first-child { margin-left: 0; }
.badge-neutral { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }

/* Avisos */
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.note { background: var(--surface-2); border: 1px dashed var(--line); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; }

/* Formularios */
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; margin-bottom: .9rem; }
.form label small { font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.span-2 { grid-column: 1 / -1; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; min-height: 38px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; border-color: var(--accent); }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
label.inline, .form label.inline { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; margin-bottom: .5rem; }
fieldset.choice { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem .4rem; margin: 0 0 1rem; }
fieldset.choice legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.checks { margin-bottom: .75rem; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 0; }
.inline-form.compact { margin: 0; flex-wrap: nowrap; }
.inline-form select, .inline-form input:not([type=checkbox]) { width: auto; flex: 1 1 220px; }
.inline-form input.w-sm { flex: 0 0 90px; width: 90px; }
form.inline { display: inline; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters input[type=search] { flex: 1 1 260px; width: auto; }
.filters select, .filters input[type=date] { width: auto; }
.filters label.inline { margin: 0; white-space: nowrap; }
.counter { font-weight: 700; }
.counter.bad { color: var(--danger); } .counter.ok { color: var(--ok); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .9rem; min-height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 88%, black); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: .25rem .6rem; min-height: 30px; font-size: .82rem; }
.btn-block { width: 100%; }

/* Movimientos */
.product-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.comp-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.check-group { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; }
.check-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.check-head .check-filter { width: auto; flex: 1 1 180px; min-height: 32px; padding: .3rem .55rem; }
.check-count { font-weight: 700; font-size: .85rem; }
.check-count.ok { color: var(--ok); } .check-count.bad { color: var(--danger); }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .1rem .75rem; padding: .6rem .8rem; max-height: 280px; overflow-y: auto; }
.form .check-list label { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; margin: 0; padding: .3rem 0; }
.check-list label.hidden { display: none; }

/* Acceso */
body.auth { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.auth-card .brand { margin-bottom: 1.5rem; }
.auth-card h1 { margin-bottom: .35rem; }
.auth-card .form { margin-top: 1rem; }

@media (max-width: 860px) {
  .topbar-inner { flex-wrap: wrap; gap: .5rem; }
  .nav { order: 3; flex-basis: 100%; }
  .logout { margin-left: auto; }
  .grid-2, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-top: 1rem; }
  h1 { font-size: 1.3rem; }
}
@media print {
  .topbar, .actions, .filters, .foot, .danger-zone, form .form-actions { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ======================= Marca SIM (negro carbón + dorado del membrete) ======================= */
:root {
  --brand-dark: #2b2b2b;
  --brand-gold: #e3b94d;
  --accent: #8a6516;
  --accent-ink: #ffffff;
  --accent-soft: #fbf1d6;
  --primary: #2b2b2b;
  --primary-ink: #ffffff;
}
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --accent: #e3b94d; --accent-ink: #1b1b1b; --accent-soft: #3a3020; --primary: #e3b94d; --primary-ink: #1b1b1b; } }
:root[data-theme="oscuro"] { --accent: #e3b94d; --accent-ink: #1b1b1b; --accent-soft: #3a3020; --primary: #e3b94d; --primary-ink: #1b1b1b; }
.topbar { background: var(--brand-dark); border-bottom: 3px solid var(--brand-gold); }
.topbar .brand { color: #fff; }
.topbar .brand small, .topbar .who { color: #c9c4b8; }
.brand-mark { background: var(--brand-gold); color: var(--brand-dark); }
.topbar .nav a { color: #dcd8cf; }
.topbar .nav a:hover { background: rgba(255,255,255,.08); }
.topbar .nav a.on { background: var(--brand-gold); color: var(--brand-dark); }
.topbar .btn-ghost { color: #fff; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 85%, var(--brand-gold)); }
.auth-card { border-top: 4px solid var(--brand-gold); }

/* Semáforo de rentabilidad */
.sem { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sem::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.sem-verde { background: #e2f3e7; color: #1d6b39; }
.sem-amarillo { background: #fdf6d3; color: #8a6d00; }
.sem-naranja { background: #fde9d6; color: #b25400; }
.sem-rojo { background: #fbe4e0; color: #b4321f; }
.sem-perdida { background: #b4321f; color: #fff; }
.sem-gris { background: var(--surface-2); color: var(--muted); }
.sem-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .sem-verde { background: #173322; color: #6fcf8f; } :root[data-theme="auto"] .sem-amarillo { background: #3a3414; color: #f2d55c; } :root[data-theme="auto"] .sem-naranja { background: #3d2814; color: #f7a35c; } :root[data-theme="auto"] .sem-rojo { background: #3b1d18; color: #ef7a66; } }
:root[data-theme="oscuro"] .sem-verde { background: #173322; color: #6fcf8f; }
:root[data-theme="oscuro"] .sem-amarillo { background: #3a3414; color: #f2d55c; }
:root[data-theme="oscuro"] .sem-naranja { background: #3d2814; color: #f7a35c; }
:root[data-theme="oscuro"] .sem-rojo { background: #3b1d18; color: #ef7a66; }

/* Formularios ampliados */
.form-sec { margin: .5rem 0 .75rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .95rem; }
.form-sec:first-of-type { border-top: 0; padding-top: 0; }
.form-sec-details { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; }
.form-sec-details summary { cursor: pointer; font-weight: 600; }
.form-sec-details[open] summary { margin-bottom: .75rem; }
[hidden] { display: none !important; }
.thumb { max-width: 140px; max-height: 140px; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: .4rem; }
.small { font-size: .85rem; }
.calc td { padding: .45rem 0; }
.calc tr.hl td { background: var(--accent-soft); padding-left: .5rem; padding-right: .5rem; }
.grid-2.tight { gap: 1.5rem; }
.total-line { align-self: end; font-size: 1.05rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
details.mini summary { cursor: pointer; color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.inactive-card { opacity: .7; }
h3 { font-size: .9rem; margin: 1rem 0 .4rem; color: var(--ink-2); }

/* Ficha de producto */
.product-top { display: flex; gap: 1rem; align-items: flex-start; }
.product-top-main { flex: 1; min-width: 0; }
.product-photo { width: 180px; max-width: 40vw; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.qty-move { color: var(--info); }

/* ======================= Interfaz de técnicos (móvil) ======================= */
.tech-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tech-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 1.8rem; line-height: 1; color: var(--ink); text-decoration: none !important; }
.big-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.big-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 200px; border-radius: 18px; font-size: 1.4rem; font-weight: 800; letter-spacing: .04em; text-decoration: none !important; box-shadow: var(--shadow); }
.big-btn small { font-size: .85rem; font-weight: 500; letter-spacing: 0; opacity: .85; }
.big-ico { font-size: 3rem; line-height: 1; }
.big-prod { background: var(--brand-dark); color: #fff; }
.big-tool { background: var(--brand-gold); color: var(--brand-dark); }
.tech-secondary { text-align: center; margin-top: 1.5rem; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.menu-btn { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.2rem; min-height: 86px; justify-content: center; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--brand-gold); color: var(--ink); text-decoration: none !important; box-shadow: var(--shadow); }
.menu-btn strong { font-size: 1.15rem; }
.menu-btn small { color: var(--muted); }
.menu-btn:active { transform: scale(.98); }
.scan-box { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.scan-box input[type=search] { flex: 1 1 200px; min-height: 52px; font-size: 1.1rem; }
.scan-box .btn { min-height: 52px; }
.tile-list { display: flex; flex-direction: column; gap: .5rem; }
.tile-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; min-height: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none !important; }
.tile-row span:first-child { display: flex; flex-direction: column; min-width: 0; }
.tile-row small { color: var(--muted); }
.tile-qty { font-weight: 800; font-size: 1.1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.tile-row:active { background: var(--accent-soft); }
.big-form .input-big { font-size: 1.6rem; min-height: 56px; text-align: center; font-weight: 700; }
.btn-big { min-height: 56px; font-size: 1.1rem; }
fieldset.seg { display: flex; gap: .5rem; flex-wrap: wrap; }
fieldset.seg label { flex: 1 1 100px; flex-direction: row !important; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; margin: 0 !important; }
fieldset.seg label:has(input:checked) { border-color: var(--brand-gold); background: var(--accent-soft); }
.price-big { font-size: 2rem; font-weight: 800; margin: .25rem 0; }
.card .product-photo { width: 100%; max-width: 320px; margin-bottom: .75rem; }
@media (max-width: 520px) { .big-grid { grid-template-columns: 1fr; } .big-btn { min-height: 150px; } }

/* Escáner con cámara */
.scan-wrap { position: relative; display: flex; gap: .4rem; flex: 1 1 200px; }
.scan-wrap > input { flex: 1; min-width: 0; }
.scan-cam { flex: none; min-width: 44px; padding: 0 .7rem; }
.scan-modal { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.scan-modal video { width: min(92vw, 520px); max-height: 60vh; border-radius: 12px; background: #000; object-fit: cover; }
.scan-modal p { color: #fff; text-align: center; margin: 0; }
.scan-modal .scan-dlg { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 1rem; width: min(94vw, 540px); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: .8rem; }
.scan-modal .scan-dlg h3 { margin: 0; }
.scan-modal .scan-dlg p { color: inherit; text-align: left; }
.scan-modal .scan-gun, .scan-modal .scan-camsec { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.scan-modal .scan-gun p { overflow-wrap: anywhere; }
.scan-wrap { display: flex !important; flex-direction: row !important; gap: .4rem; align-items: center; width: 100%; }
.scan-wrap > input { height: auto; }
.scan-wrap > .scan-cam { align-self: stretch; height: auto; min-height: 0; }
.scan-wrap { flex: none; }
.scan-wrap > input { flex: 1; min-width: 0; }
.scan-modal video { width: 100%; }

/* Etiquetas */
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr)); gap: 4mm; }
.label { border: 1px dashed var(--line); background: #fff; color: #000; padding: 3mm; text-align: center; break-inside: avoid; border-radius: 4px; }
.label svg { max-width: 100%; height: 14mm; }
.label-t { font-weight: 700; font-size: 9pt; line-height: 1.15; max-height: 2.4em; overflow: hidden; }
.label-c { font-family: ui-monospace, monospace; font-size: 8pt; }
.label-s { font-size: 8pt; }
@media print {
  .no-print, .page-head .actions, .alert { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .label { border-color: #ccc; }
}
/* Menú del administrador en su propia fila (muchas secciones) */
.topbar:not(.topbar-tech) .topbar-inner { flex-wrap: wrap; row-gap: .4rem; }
.topbar:not(.topbar-tech) .nav { order: 3; flex-basis: 100%; }
.topbar:not(.topbar-tech) .logout { margin-left: auto; }
img.brand-mark { width: 40px; height: 40px; object-fit: cover; padding: 0; background: var(--brand-dark); border: 1px solid rgba(255,255,255,.15); }
.table td.num { white-space: nowrap; }
/* Fase 2 */
.nested { border-left: 3px solid var(--brand-gold); padding-left: .9rem; }
.doc-lines td { vertical-align: middle; }
.doc-lines select { min-width: 260px; }
.approval-card { border-left: 5px solid var(--brand-gold); }
.claim { border-top: 1px solid var(--line); padding: .6rem 0; }
.claim:first-of-type { border-top: 0; }
.claim p { margin: .2rem 0; }
@media (max-width: 640px) {
  .doc-lines thead { display: none; }
  .doc-lines tbody tr { display: grid; grid-template-columns: 1fr 84px; gap: .4rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .doc-lines td { padding: 0 !important; border: 0; }
  .doc-lines td:nth-child(n+3) { grid-column: 1 / -1; }
  .doc-lines select { min-width: 0; }
  .doc-lines input[name="qty[]"]::placeholder { color: var(--muted); }
}
/* Fase 3 */
.topbar:not(.topbar-tech) .nav { flex-wrap: wrap; overflow: visible; }
.topbar:not(.topbar-tech) .nav a { padding: .35rem .6rem; font-size: .9rem; }
.sec-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.4rem 0 .6rem; }
.small-value { font-size: 1.05rem; }
.pad { padding: 1rem 1.2rem 0; }
.chart { margin: .5rem 0 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--ink-2); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
.chart .s1 { fill: #2b2b2b; } .chart .s2 { fill: #d9a52b; } .chart .s3 { fill: #9aa3ad; }
.chart figcaption { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); margin-top: .3rem; }
.chart .lg i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.lg i.s1 { background: #2b2b2b; } .lg i.s2 { background: #d9a52b; } .lg i.s3 { background: #9aa3ad; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .chart .s1, :root[data-theme="auto"] .lg i.s1 { fill: #e9e6df; background: #e9e6df; } }
:root[data-theme="oscuro"] .chart .s1, :root[data-theme="oscuro"] .lg i.s1 { fill: #e9e6df; background: #e9e6df; }
.seg-links { display: flex; gap: .25rem; }
.seg-links a { padding: .25rem .6rem; border-radius: 6px; border: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); text-decoration: none; }
.seg-links a.on { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.pnl .pnl-total td { font-weight: 700; border-top: 1px solid var(--ink-2); }
.pnl .pnl-sub td { color: var(--muted); font-size: .85rem; }
.pnl td:first-child { white-space: pre; }
.kit-custom { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.kit-custom h3 { margin: 0 0 .25rem; font-size: 1rem; }
ul.plain { list-style: none; padding: 0; margin: .25rem 0; }
ul.plain li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .2rem 0; }
/* Logotipo configurable */
img.brand-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.topbar img.brand-logo.chip { background: #fff; border-radius: 8px; padding: 3px 6px; box-sizing: content-box; }
img.brand-logo-lg { height: 64px; max-width: 220px; }
.auth-card img.brand-logo.art-light { background: var(--brand-dark); border-radius: 10px; padding: 6px 10px; box-sizing: content-box; }
.logo-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.logo-preview figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.logo-preview figcaption { font-size: .8rem; color: var(--muted); padding: .4rem .6rem; background: var(--surface-2); }
.logo-stage { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 1rem; }
.logo-stage img { max-width: 100%; max-height: 90px; height: auto; width: auto; }
.logo-stage.dark { background: var(--brand-dark); }
.logo-stage.light { background: #fff; }
.logo-stage.check { background-color: #fff; background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%), linear-gradient(-45deg, #e8e8e8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8e8 75%), linear-gradient(-45deg, transparent 75%, #e8e8e8 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo-stage .chip { background: #fff; border-radius: 8px; padding: 4px 8px; display: inline-flex; }
.logo-stage .chip img { max-height: 40px; }
.logo-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.logo-hist .item { border: 1px solid var(--line); border-radius: 10px; padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.logo-hist .item.on { border-color: var(--brand-gold); box-shadow: 0 0 0 2px var(--accent-soft); }
.logo-hist img { max-height: 56px; max-width: 100%; object-fit: contain; align-self: center; }
.logo-current { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .6rem; margin-bottom: 1rem; border-radius: 10px; background: var(--brand-dark); }
.logo-current small { color: #c9c4b8; }
.logo-current img.brand-logo.chip { background: #fff; border-radius: 8px; padding: 3px 6px; box-sizing: content-box; }
.logo-hist .badge { align-self: flex-start; }
.sem-critico { background: #8f2416; color: #fff; }
.sem-perdida { background: #1f1f1f; color: #ff7b6b; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .sem-critico { background: #8f2416; color: #fff; } }
:root[data-theme="oscuro"] .sem-critico { background: #8f2416; color: #fff; }
.pnl-head th { text-align: left; background: var(--surface-2); font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }

/* Evita desbordes horizontales en celular (selects con nombres largos) */
select { max-width: 100%; }

/* Equipos instalados (fichas con QR) */
.dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .45rem 1rem; margin: 0; }
.dl dt { color: var(--muted); font-size: .85rem; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.eq-qr { text-align: center; }
.eq-qr svg { width: 180px; height: 180px; max-width: 100%; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1rem .75rem; overflow-wrap: anywhere; }
.timeline li::before { content: ""; position: absolute; left: -1.42rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--brand-gold); }
.labels-qr { grid-template-columns: repeat(auto-fill, minmax(78mm, 1fr)); }
.label-eq { display: flex; align-items: center; gap: 2mm; text-align: left; }
.label-eq svg { width: 26mm; height: 26mm; flex: 0 0 26mm; }
.label-eq-txt { min-width: 0; }
.label-eq-code { font-size: 11pt; font-weight: 700; }
.label-eq-co { margin-top: 1mm; font-weight: 600; }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; gap: .1rem; } .dl dd { margin-bottom: .5rem; } }

/* Agenda MASTER */
.text-danger { color: var(--danger); }
.agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.agenda-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.agenda-cols .agenda-col { margin-bottom: 0; }
.agenda-day.is-today { border-color: var(--brand-gold); }
.visit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .75rem; padding: .6rem .7rem; margin: 0 0 .5rem; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 8px; color: inherit; text-decoration: none; }
.visit:hover { text-decoration: none; border-color: var(--accent); }
.visit-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.visit-main { min-width: 0; overflow-wrap: anywhere; }
.visit-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.visit-terminada { border-left-color: var(--ok); opacity: .8; }
.visit-cancelada { border-left-color: var(--line); opacity: .6; }
.visit-pendiente_regreso, .visit-pausada, .visit-trabajando { border-left-color: var(--warn, #c98a00); }
.visit-conflict { border-left-color: var(--danger); background: var(--danger-soft); }
.visit-badges .badge { margin-left: 0; }

/* Agenda del técnico */
.agenda-today { display: block; color: inherit; text-decoration: none; border-left: 4px solid var(--brand-gold); }
.ma-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ma-step { margin-bottom: .6rem; }
.ma-step input { margin-bottom: .4rem; }
.btn-block { display: block; width: 100%; text-align: center; }
details > summary.btn-block { list-style: none; margin-bottom: .5rem; }
.visit-when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.attention { border-color: var(--danger); }
.req-item { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .6rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline-form input:not([type=checkbox]) { flex: 1 1 180px; min-width: 0; }

/* Avisos */
.bell { position: relative; text-decoration: none; font-size: 1.15rem; padding: .2rem .4rem; border-radius: 8px; color: inherit; }
.bell.on { background: var(--brand-gold); }
.bell-n { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.1rem; }
.alerts-list { list-style: none; margin: 0; padding: 0; }
.al { display: flex; gap: .5rem; align-items: flex-start; border-left: 4px solid var(--info); padding: .5rem .6rem; margin-bottom: .5rem; background: var(--surface-2, transparent); border-radius: 6px; }
.al-warn { border-left-color: var(--warn); } .al-danger { border-left-color: var(--danger); } .al-read { opacity: .7; }
.al-open { flex: 1; min-width: 0; margin: 0; }
.al-btn { all: unset; cursor: pointer; display: block; width: 100%; overflow-wrap: anywhere; }
.al-btn:focus-visible { outline: 2px solid var(--accent); }
.al-rule { display: block; font-size: .75rem; color: var(--muted); }
.al-body { display: block; font-size: .85rem; }
li.al-danger strong { color: var(--danger); }

/* Historial de mantenimiento */
.stat-value.small-v { font-size: 1.1rem; }
.history .tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.history .tl-head .badge { margin-left: 0; }
.h-children { list-style: none; margin: .35rem 0 0; padding: .35rem .5rem; border-left: 2px dashed var(--line); }
.h-children li { padding: .15rem 0; overflow-wrap: anywhere; }
@media print { .history li { break-inside: avoid; } .stats { display: flex; flex-wrap: wrap; gap: 4mm; } }
.h-children li::before { display: none; }

/* Formularios técnicos (Entrega 3, módulo 2) */
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.form-sec { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0 0 1rem; }
.form-sec > legend { font-weight: 700; padding: 0 .4rem; }
.form-q { display: grid; gap: .3rem; padding: .6rem 0; border-bottom: 1px dashed var(--line, #ddd); }
.form-q:last-child { border-bottom: 0; }
.form-q[hidden] { display: none; }
.form-q-label { font-weight: 600; }
.req { color: var(--danger); font-weight: 700; }
.choice-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.num-unit { display: flex; align-items: center; gap: .5rem; max-width: 16rem; }
.photo-slot { border: 1px dashed var(--line, #ccc); border-radius: 8px; padding: .6rem; }
.field-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.field-list > li { border-bottom: 1px solid var(--line, #eee); padding: .55rem 0; }
.field-row { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
.field-row > div:first-child { min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.field-edit { margin-top: .6rem; padding: .75rem; border-radius: 8px; background: var(--soft, rgba(127,127,127,.08)); }
.row-inputs { display: flex; gap: .5rem; }
.row-inputs input { min-width: 0; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
/* Formularios en la orden (módulo 3) */
.photo-field { padding: .6rem 0; border-bottom: 1px solid var(--line, #eee); }
.photo-field:last-of-type { border-bottom: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.thumbs figure { margin: 0; display: grid; gap: .25rem; justify-items: center; }
.thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #ddd); }
.sticky-actions { position: sticky; bottom: 0; background: var(--card, var(--bg, #fff)); padding: .6rem 0; z-index: 2; }
.form-todo li { padding: .45rem 0; border-bottom: 1px solid var(--line, #eee); }
.form-todo li:last-child { border-bottom: 0; }
/* Firmas (módulo 5) */
.sign-pad { border: 2px dashed var(--line, #bbb); border-radius: 10px; background: #fff; touch-action: none; }
.sign-pad canvas { width: 100%; height: auto; display: block; touch-action: none; border-radius: 10px; }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.sig-box { display: grid; gap: .3rem; align-content: start; }
.sig-box img { width: 100%; max-width: 260px; background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; }

/* ===== Navegación adaptable (Entrega 3.5) ===== */
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--brand-gold); color: var(--brand-dark); padding: .5rem .8rem; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.mainnav { overflow: visible; align-items: center; flex-wrap: wrap; }
.navgroup { position: relative; }
.navgroup-btn { background: none; border: 0; font: inherit; font-weight: 500; color: #dcd8cf; padding: .45rem .7rem; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.navgroup-btn::after { content: "▾"; font-size: .7em; opacity: .8; }
.navgroup-btn:hover, .navgroup.open > .navgroup-btn { background: rgba(255,255,255,.08); }
.navgroup.has-on > .navgroup-btn { background: var(--brand-gold); color: var(--brand-dark); }
.nav-count { background: #c0392b; color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4rem; line-height: 1.3rem; min-width: 1.3rem; text-align: center; }
.navgroup-items { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 14rem; background: var(--brand-dark); border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--brand-gold); border-radius: 0 0 10px 10px; padding: .35rem; box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 30; }
.navgroup-items a { display: block; }
.navgroup:hover > .navgroup-items, .navgroup:focus-within > .navgroup-items, .navgroup.open > .navgroup-items { display: block; }
.nav-sheet-head, .mainnav [data-sheet-only], .tabbar { display: none; }
.topbar .mainnav a.on { background: var(--brand-gold); color: var(--brand-dark); }

/* Tableta: el menú baja a su propia fila, con los mismos grupos */
@media (min-width: 768px) and (max-width: 1100px) {
  .topbar-inner { flex-wrap: wrap; }
  .mainnav { order: 3; flex-basis: 100%; }
  .navgroup-btn, .mainnav > a { padding: .4rem .55rem; }
}

/* Celular: encabezado compacto, barra inferior y menú «Más» a pantalla completa */
@media (max-width: 767px) {
  .topbar-inner { flex-wrap: nowrap; padding: .45rem .75rem; gap: .5rem; }
  .brand small, .topbar .who { display: none; }
  .brand strong { font-size: .92rem; line-height: 1.15; }
  .brand-logo { width: 32px; height: 32px; }
  .logout { margin-left: 0; }
  .mainnav { display: none; }
  .mainnav:target, body.nav-open .mainnav { display: block; position: fixed; inset: 0; z-index: 60; background: var(--brand-dark); overflow-y: auto; padding: .75rem 1rem 6rem; }
  .nav-sheet-head { display: flex; justify-content: space-between; align-items: center; color: #fff; padding: .25rem 0 .75rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .5rem; }
  .nav-close { color: #fff; font-size: 1.3rem; padding: .3rem .6rem; }
  .navgroup { margin: .35rem 0 .75rem; }
  .navgroup-btn { cursor: default; padding: .3rem 0; color: var(--brand-gold); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; background: none !important; }
  .navgroup-btn::after { content: none; }
  .navgroup.has-on > .navgroup-btn { color: var(--brand-gold); }
  .navgroup-items { display: grid !important; position: static; grid-template-columns: 1fr 1fr; gap: .3rem; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .mainnav a { padding: .7rem .75rem; background: rgba(255,255,255,.05); border-radius: 8px; white-space: normal; }
  .mainnav > a { display: block; margin-bottom: .3rem; }
  .mainnav [data-sheet-only] { display: block; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--brand-dark); border-top: 2px solid var(--brand-gold);
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #dcd8cf; font-size: .72rem; padding: .35rem 0; border-radius: 8px; position: relative; text-decoration: none !important; min-height: 48px; justify-content: center; }
  .tab-ico { font-size: 1.15rem; line-height: 1; }
  .tab-on { color: var(--brand-gold); font-weight: 700; }
  .tab-n { position: absolute; top: .15rem; right: calc(50% - 1.4rem); background: #c0392b; color: #fff; border-radius: 999px; font-size: .62rem; padding: 0 .3rem; line-height: 1.05rem; }
  body { padding-bottom: 4.5rem; }
  .foot { padding-bottom: 1rem; }
  /* Toque cómodo: botones y campos más altos */
  .btn, input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}
@media (min-width: 1101px) { .topbar:not(.topbar-tech) .topbar-inner { flex-wrap: nowrap; } .topbar:not(.topbar-tech) .mainnav { order: 0; flex-basis: auto; flex-wrap: nowrap; } }
@media (max-width: 767px) { .brand { flex: 1; min-width: 0; } .brand strong { overflow: hidden; text-overflow: ellipsis; } .logout { flex: none; display: flex; align-items: center; } .bell { flex: none; } }
@media (min-width: 1440px) { .topbar-inner, .wrap { max-width: 1400px; } }

/* ===== Entrega 3.5 · Centro de operaciones y disponibilidad ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; }
.ops-grid > .card { margin-bottom: 0; }
.board, .attn, .today-list { list-style: none; margin: 0; padding: 0; }
.board-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 7.5rem auto; gap: .65rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.board-row:first-child { border-top: 0; }
.board-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--muted); }
.dot-ok { background: var(--ok); } .dot-info { background: var(--info); } .dot-warn { background: var(--warn); } .dot-danger { background: var(--danger); }
.board-main { min-width: 0; line-height: 1.35; }
.board-main small { overflow-wrap: anywhere; }
.board-load { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--ink-2); text-align: right; }
.meter { display: block; height: .4rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.board-link { font-size: 1.4rem; line-height: 1; padding: .25rem .5rem; color: var(--ink-2); text-decoration: none; }
.board-ausente .board-main, .board-descanso .board-main, .board-fuera_horario .board-main { opacity: .7; }
.attn li { border-top: 1px solid var(--line); }
.attn li:first-child { border-top: 0; }
.attn a { display: flex; gap: .5rem; align-items: baseline; padding: .5rem 0; color: var(--ink); text-decoration: none; }
.attn a:hover span { text-decoration: underline; }
.attn .badge { flex: none; margin-left: 0; }
.today-list li { border-top: 1px solid var(--line); }
.today-list li:first-child { border-top: 0; }
.today-list a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .55rem 0; color: var(--ink); text-decoration: none; }
.today-list .t-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.today-list .visit-terminada .t-main, .today-list .visit-cancelada .t-main { opacity: .65; }
.today-list .t-badges { text-align: right; }
.days-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.days-pick legend { font-weight: 600; margin-bottom: .25rem; width: 100%; }
.days-pick small { width: 100%; }
.avail-week th, .avail-week td { text-align: center; vertical-align: middle; }
.avail-week th[scope="row"] { text-align: left; min-width: 10rem; }
.avail-week .is-today { background: var(--accent-soft); }
.avail-abs { background: var(--surface-2); }
.avail-off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-2) 6px 12px); }
.avail-list li { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--line); }
.avail-list li:first-child { border-top: 0; }
.avail-list li.is-new { background: var(--accent-soft); }
.inline-details summary { cursor: pointer; color: var(--danger); font-size: .85rem; }
@media (max-width: 900px) { .ops-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .board-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .board-load { grid-column: 2 / 3; flex-direction: row; align-items: center; text-align: left; }
  .board-load .meter { flex: 1; }
  .today-list a { grid-template-columns: 3rem minmax(0, 1fr); }
  .today-list .t-badges { grid-column: 2; text-align: left; }
  .avail-list li { flex-direction: column; }
}
@media (max-width: 767px) {
  .ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ops-stats .stat { padding: .7rem .8rem; }
  .ops-stats .stat-value { font-size: 1.35rem; }
  .ops-stats .stat-label { font-size: .68rem; }
}

/* ===== Entrega 3.5 · Calendario en cuadrícula ===== */
.tc-0 { --tc: #2f6fb3; } .tc-1 { --tc: #c2571a; } .tc-2 { --tc: #2e8b57; } .tc-3 { --tc: #8e44ad; } .tc-4 { --tc: #b8892a; }
.tc-5 { --tc: #c0392b; } .tc-6 { --tc: #16a0a0; } .tc-7 { --tc: #6d4c41; } .tc-8 { --tc: #d1488f; } .tc-9 { --tc: #556b2f; }
.tc-none { --tc: #7a808a; }
.agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.cal-views { margin-right: .5rem; }
.cal-title { font-size: 1.05rem; margin-left: .25rem; }
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: 0; margin: 0 0 .6rem; font-size: .85rem; color: var(--ink-2); }
.cal-legend li { display: flex; align-items: center; gap: .35rem; }
.cal-sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--tc); vertical-align: -1px; margin-right: .3rem; }
.cal-sw-conflict { background: transparent; border: 2px solid var(--danger); }
.cal-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1rem; }
.cal { --cols: 7; --hours: 10; --hour: 3.25rem; display: grid; grid-template-columns: 1fr; min-width: 100%; }
.cal-body { height: calc(var(--hours) * var(--hour)); }
.cal-dia { min-width: calc(3.5rem + var(--cols) * 11rem); }
.cal-semana { min-width: 760px; }
.cal-head, .cal-allday, .cal-body { display: grid; grid-template-columns: 3.5rem repeat(var(--cols), minmax(0, 1fr)); }
.cal-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.cal-colhead { padding: .55rem .5rem; font-weight: 600; font-size: .9rem; border-left: 1px solid var(--line); display: flex; align-items: center; gap: .25rem; min-width: 0; }
.cal-colhead a:not(.cal-add) { color: var(--ink); }
.cal-colhead.is-today { color: var(--accent); background: var(--accent-soft); }
.cal-add { margin-left: auto; text-decoration: none; font-size: 1.1rem; line-height: 1; padding: .1rem .4rem; border-radius: 6px; color: var(--ink-2); }
.cal-add:hover { background: var(--surface-2); }
.cal-allday { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-allday .cal-gutter small { font-size: .7rem; color: var(--muted); }
.cal-allday-cell { border-left: 1px solid var(--line); padding: .25rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-abs { display: block; font-size: .75rem; padding: .1rem .35rem; border-radius: 4px; background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-body { position: relative; }
.cal-gutter { position: relative; display: flex; flex-direction: column; }
.cal-hour { height: var(--hour); font-size: .72rem; color: var(--muted); text-align: right; padding: 0 .4rem; transform: translateY(-.45rem); font-variant-numeric: tabular-nums; }
.cal-hour:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cal-col.is-today { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.cal-line { height: var(--hour); border-top: 1px solid var(--line); flex: none; }
.cal-line:first-child { border-top: 0; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cal-ev { position: absolute; box-sizing: border-box; padding: .2rem .35rem; margin: 1px; border-radius: 6px; overflow: hidden; z-index: 1;
  background: color-mix(in srgb, var(--tc) 16%, var(--surface)); border-left: 4px solid var(--tc); color: var(--ink); text-decoration: none; font-size: .78rem; line-height: 1.25; width: auto; }
.cal-ev:hover, .cal-ev:focus-visible { z-index: 4; box-shadow: 0 2px 8px rgba(0,0,0,.18); overflow: visible; min-height: fit-content; }
.cal-ev strong { font-weight: 600; }
.cal-ev-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cal-ev-sub { display: block; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-flags { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .1rem; }
.cal-ev-flags .badge { font-size: .65rem; padding: 0 .3rem; margin-left: 0; }
.cal-ev.is-short .cal-ev-sub, .cal-ev.is-short .cal-ev-flags { display: none; }
.cal-ev.is-conflict { outline: 2px solid var(--danger); outline-offset: -2px; }
.cal-ev.st-terminada { opacity: .6; }
.cal-ev.st-cancelada { opacity: .45; text-decoration: line-through; }
.cal-ev.st-trabajando, .cal-ev.st-en_sitio, .cal-ev.st-pausada, .cal-ev.st-en_camino { background: color-mix(in srgb, var(--tc) 30%, var(--surface)); }
.cal-empty { margin: .5rem 0 1rem; }
.cal-list { display: none; }
/* Mes */
.cal-month { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; box-shadow: var(--shadow); }
.cal-mhead, .cal-mweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mhead div { padding: .45rem .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-mday { min-height: 7.5rem; padding: .3rem; border-left: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .15rem; min-width: 0; position: relative; }
.cal-mweek .cal-mday:first-child { border-left: 0; }
.cal-mday.is-out { background: var(--surface-2); }
.cal-mday.is-out .cal-mnum { color: var(--muted); }
.cal-mday.is-off { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-2) 6px 12px); }
.cal-mday.is-today .cal-mnum { background: var(--accent); color: var(--accent-ink); }
.cal-mnum { align-self: flex-start; font-weight: 600; font-size: .85rem; min-width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); text-decoration: none; }
.cal-mcount { display: none; position: absolute; top: .4rem; right: .4rem; font-size: .7rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 0 .4rem; }
.cal-chip { display: block; font-size: .74rem; padding: .1rem .3rem; border-radius: 4px; background: color-mix(in srgb, var(--tc) 16%, var(--surface)); border-left: 3px solid var(--tc);
  color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip span { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cal-chip.is-conflict { outline: 2px solid var(--danger); outline-offset: -2px; }
.cal-chip.st-terminada { opacity: .6; }
.cal-more { font-size: .74rem; color: var(--ink-2); }
@media (max-width: 767px) {
  .cal-semana { display: none; }
  .cal-scroll:has(.cal-semana) { display: none; }
  .cal-list { display: block; }
  .cal-list .cal-abs { margin-bottom: .4rem; }
  .cal-mday { min-height: 3.6rem; padding: .2rem; }
  .cal-mday .cal-chip, .cal-mday .cal-more, .cal-mday .cal-abs { display: none; }
  .cal-mcount { display: block; position: static; align-self: center; }
  .cal-mnum { align-self: center; font-size: .8rem; }
  .agenda-nav .cal-title { width: 100%; order: -1; margin: 0; }
}
@media print { .cal-scroll { overflow: visible; } .cal-ev { break-inside: avoid; } }
details.attention > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
details.attention > summary::-webkit-details-marker { display: none; }
details.attention > summary h2 { margin: 0; display: inline; }
details.attention > summary::after { content: "▾"; margin-left: auto; color: var(--ink-2); }
details.attention[open] > summary { margin-bottom: .75rem; }
details.attention[open] > summary::after { content: "▴"; }
.cal-ev-more { --tc: var(--ink-2); display: grid; place-items: center; font-weight: 600; min-height: 1.6rem; background: var(--surface-2); border-left-color: var(--line); }

/* ===== Entrega 3.5 · GPS fase B: elegir en el mapa ===== */
.map-open { justify-self: start; }
.gmap-box { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .4rem; }
.gmap-bar { display: flex; flex-wrap: wrap; gap: .35rem; }
.gmap { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #e8e4da; touch-action: none; cursor: crosshair; user-select: none; }
.gmap-tiles { position: absolute; inset: 0; }
.gmap-tile { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.gmap-pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--danger); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; z-index: 2; }
.gmap-attr { position: absolute; right: 0; bottom: 0; z-index: 3; font-size: .7rem; padding: .1rem .35rem; background: rgba(255,255,255,.85); }
.gmap-attr a { color: #333; }
.gmap-info { margin: 0; }
@media (max-width: 767px) { .gmap { height: 60vh; } }

/* =====================================================================
   Identidad S.I.M. (Entrega 3.5 · diseño)
   La personalidad viene del membrete: carbón, dorado y las franjas diagonales.
   Lo llamativo vive en la pantalla de ingreso; el resto del sistema solo toma la
   tipografía geométrica en títulos, el saludo y un filo dorado en los indicadores.
   ===================================================================== */
@font-face { font-family: "SIM Display"; src: url("fonts/adventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SIM Display"; src: url("fonts/adventor-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
:root {
  --carbon: #262420; --grafito: #3a3731; --oro: #e3b94d; --oro-hondo: #a87b1f; --hueso: #f6f4ef;
  --display: "SIM Display", "TeX Gyre Adventor", "Century Gothic", "Avenir Next", system-ui, sans-serif;
}

/* ---------- Pantalla de ingreso ---------- */
body.auth { display: block; place-items: normal; padding: 0; min-height: 100vh; background: var(--carbon); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); }
.auth-hero { position: relative; overflow: hidden; background: var(--carbon); color: #f3efe6; display: grid; place-items: center; padding: 3rem 3.5rem; isolation: isolate; }
/* Las tres franjas del membrete, entrando desde la esquina */
.hero-bands { position: absolute; left: 0; top: 0; width: 58%; height: 74%; z-index: -1; pointer-events: none; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hero-bands i { position: absolute; top: 0; height: 100%; background: var(--oro); transform: skewX(24deg); transform-origin: top left; }
.hero-bands i:nth-child(1) { left: -12%; width: 22%; }
.hero-bands i:nth-child(2) { left: 18%; width: 8%; background: #c9992f; }
.hero-bands i:nth-child(3) { left: 34%; width: 2.4%; opacity: .5; }
.hero-inner { max-width: 34rem; text-align: center; display: flex; flex-direction: column; align-items: center; margin-left: 8%; }
.hero-logo { width: auto; height: clamp(150px, 26vh, 240px); max-width: 100%; object-fit: contain; }
.hero-logo-mono { filter: invert(1) brightness(1.08); }
.hero-logo-plate { background: #fff; border-radius: 18px; padding: 1rem 1.4rem; height: clamp(130px, 22vh, 200px); }
.hero-phrase { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.55rem); line-height: 1.18; letter-spacing: -.012em; margin: 2.2rem 0 0; color: #fff; text-wrap: balance; }
.hero-phrase::after { content: ""; display: block; width: 3.5rem; height: 4px; background: var(--oro); margin: 1.4rem auto 0; transform: skewX(-24deg); }
.hero-company { margin: 1.1rem 0 0; color: #bdb6a8; font-size: .95rem; letter-spacing: .01em; }
.auth-card { width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: var(--hueso); padding: 3rem clamp(1.75rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; border-top: 0; }
.auth-card > * { width: 100%; max-width: 380px; }
.auth-card h1 { font-family: var(--display); font-size: 2rem; letter-spacing: -.015em; margin: 0 0 .35rem; color: var(--carbon); }
.auth-lead { color: var(--ink-2); margin: 0 0 1.6rem; }
.auth-card .form { margin-top: 0; gap: 1rem; }
.auth-card input { min-height: 48px; font-size: 1rem; background: #fff; border-color: #d9d4c8; }
.auth-card input:focus { border-color: var(--oro-hondo); outline: 3px solid color-mix(in srgb, var(--oro) 45%, transparent); outline-offset: 1px; }
.auth-card .btn-primary { min-height: 50px; font-size: 1.02rem; font-weight: 700; background: var(--carbon); color: #fff; border-color: var(--carbon); margin-top: .4rem; position: relative; overflow: hidden; }
.auth-card .btn-primary::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 22px; background: var(--oro); transform: skewX(-24deg); }
.auth-card .btn-primary:hover { background: var(--grafito); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .auth-card { background: #1d1c19; } :root[data-theme="auto"] .auth-card h1 { color: #f3efe6; } :root[data-theme="auto"] .auth-card input { background: #262420; border-color: #3a3731; color: #f3efe6; } :root[data-theme="auto"] .auth-card .btn-primary { background: var(--oro); color: var(--carbon); border-color: var(--oro); } :root[data-theme="auto"] .auth-card .btn-primary::before { background: var(--carbon); opacity: .25; } }
:root[data-theme="oscuro"] .auth-card { background: #1d1c19; }
:root[data-theme="oscuro"] .auth-card h1 { color: #f3efe6; }
:root[data-theme="oscuro"] .auth-card input { background: #262420; border-color: #3a3731; color: #f3efe6; }
:root[data-theme="oscuro"] .auth-card .btn-primary { background: var(--oro); color: var(--carbon); border-color: var(--oro); }
:root[data-theme="oscuro"] .auth-card .btn-primary::before { background: var(--carbon); opacity: .25; }
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-hero { padding: 2.2rem 1.5rem 2.4rem; }
  .hero-inner { margin-left: 0; }
  .hero-bands { width: 45%; height: 60%; }
  .hero-bands i:nth-child(1) { left: -14%; width: 30%; }
  .hero-bands i:nth-child(2) { left: 24%; width: 10%; }
  .hero-bands i:nth-child(3) { display: none; }
  .hero-logo { height: 120px; }
  .hero-phrase { font-size: 1.45rem; margin-top: 1.2rem; }
  .hero-phrase::after { margin-top: 1rem; }
  .hero-company { font-size: .85rem; margin-top: .8rem; }
  .auth-card { padding: 2rem 1.25rem 2.5rem; justify-content: flex-start; align-items: center; }
  .auth-card h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bands i { animation: bands-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-bands i:nth-child(2) { animation-delay: .08s; }
  .hero-bands i:nth-child(3) { animation-delay: .16s; }
  @keyframes bands-in { from { transform: skewX(24deg) translateY(-105%); } to { transform: skewX(24deg) translateY(0); } }
}

/* ---------- Dentro del sistema ---------- */
h1, .page-head h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }
.page-head h1 { font-size: 1.65rem; }
.card > h2, .card-head h2, .sec-title { font-family: var(--display); }
.card > h2, .card-head h2 { font-size: 1.05rem; letter-spacing: -.005em; }
.sec-title { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--ink-2); font-weight: 700; }
.brand strong { font-family: var(--display); letter-spacing: .01em; }
/* Franjas del membrete en el borde izquierdo de la barra superior */
.topbar { position: relative; }
.topbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 64px; pointer-events: none;
  background: linear-gradient(114deg, var(--oro) 0 22px, transparent 22px 30px, #c9992f 30px 38px, transparent 38px); opacity: .95; }
@media (min-width: 1101px) { .topbar-inner { padding-left: 4.5rem; } }
@media (max-width: 1100px) { .topbar::before { width: 40px; background: linear-gradient(114deg, var(--oro) 0 12px, transparent 12px 17px, #c9992f 17px 22px, transparent 22px); } .topbar-inner { padding-left: 2.6rem; } }
/* Indicadores: filo dorado inclinado, como las franjas */
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 46%; background: linear-gradient(90deg, var(--oro) 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.stat-alert::before { background: var(--warn); }
.stat-label { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.stat-value { font-family: var(--display); }
/* Saludo de Inicio */
.greet { margin: .25rem 0 1rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.greet h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.greet p { margin: .2rem 0 0; color: var(--ink-2); }
.greet .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===== Importar y exportar ===== */
.io-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.io-grid > .card { margin: 0; display: flex; flex-direction: column; }
.io-card.is-sel { outline: 2px solid var(--oro); outline-offset: -2px; }
.io-dl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 1rem; }
.io-up { margin-top: auto; border-top: 1px solid var(--line); padding-top: .9rem; }
.io-up input[type=file] { padding: .5rem; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 8px; width: 100%; }
.io-tips { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.io-confirm p { margin: 0 0 .75rem; }
.io-table td ul { margin: 0; padding: 0; list-style: none; }
.io-table tr.io-error td { background: var(--danger-soft); }
.io-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .io-grid { grid-template-columns: 1fr; } .io-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Foto del equipo y componentes ===== */
.eq-media { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; align-items: start; }
.eq-media > .card { margin: 0; }
.eq-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.photo-form { margin-top: .6rem; }
.file-btn { position: relative; display: inline-block; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-btn input[type=file]:focus-visible + .btn, .file-btn:focus-within .btn { outline: 3px solid color-mix(in srgb, var(--oro) 50%, transparent); outline-offset: 2px; }
.comp-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.comp { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.comp:first-child { border-top: 0; padding-top: 0; }
.comp-ph img, .comp-ph-empty { display: grid; place-items: center; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; color: var(--muted); }
.comp-body strong { font-size: 1rem; }
.comp-loc { margin: .2rem 0; font-weight: 500; }
.comp-hist summary, .comp-act summary { cursor: pointer; color: var(--accent); font-size: .88rem; margin-top: .3rem; }
.comp-hist ul li { padding: .3rem 0; border-top: 1px dashed var(--line); }
.comp-act form { margin-top: .5rem; }
.comp-retire { margin-top: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.comp-new > summary { list-style: none; display: inline-block; }
.comp-new > summary::-webkit-details-marker { display: none; }
.comp-new form { margin-top: .6rem; }
.scan-eq { margin: .75rem 0; }
@media (max-width: 900px) { .eq-media { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .comp { grid-template-columns: 64px minmax(0, 1fr); } .comp-ph img, .comp-ph-empty { width: 64px; height: 64px; } }

/* =====================================================================
   Paleta de tono medio (descanso visual) y apariencia por persona
   Claro suave: fondo piedra cálida y tarjetas marfil (sin blanco que encandile).
   Oscuro suave: grafito cálido (sin negro puro), texto hueso.
   ===================================================================== */
:root {
  --bg: #e6e2da; --surface: #f7f5f1; --surface-2: #efece6; --line: #d8d2c7;
  --ink: #25231f; --ink-2: #4c4740; --muted: #736d63;
  --accent: #87631a; --accent-ink: #ffffff; --accent-soft: #f3e6c4;
  --brand-dark: #2f2d29;
  --shadow: 0 1px 2px rgba(60, 50, 30, .06), 0 2px 6px rgba(60, 50, 30, .05);
  --t-op: #17877a; --t-ve: #c27b12; --t-in: #3366b8; --t-fi: #2e8a4b; --t-ad: #7c4e9d; --t-home: #b8892a;
}
:root[data-theme="oscuro"] {
  --bg: #2b2a27; --surface: #35332f; --surface-2: #3d3b36; --line: #4b4842;
  --ink: #eeeae2; --ink-2: #d2ccc1; --muted: #a9a296;
  --accent: #e3b94d; --accent-ink: #2b2a27; --accent-soft: #4a4130; --primary: #e3b94d; --primary-ink: #2b2a27;
  --brand-dark: #23221f; --shadow: 0 1px 2px rgba(0, 0, 0, .25); color-scheme: dark;
  --t-op: #4fc2b2; --t-ve: #eba94a; --t-in: #7aa6ee; --t-fi: #6ccb8b; --t-ad: #bb92dd; --t-home: #e3b94d;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #2b2a27; --surface: #35332f; --surface-2: #3d3b36; --line: #4b4842;
    --ink: #eeeae2; --ink-2: #d2ccc1; --muted: #a9a296;
    --accent: #e3b94d; --accent-ink: #2b2a27; --accent-soft: #4a4130; --primary: #e3b94d; --primary-ink: #2b2a27;
    --brand-dark: #23221f; --shadow: 0 1px 2px rgba(0, 0, 0, .25); color-scheme: dark;
    --t-op: #4fc2b2; --t-ve: #eba94a; --t-in: #7aa6ee; --t-fi: #6ccb8b; --t-ad: #bb92dd; --t-home: #e3b94d;
  }
}
:root[data-theme="claro"] { color-scheme: light; }
body { background: var(--bg); }
input, select, textarea { background: var(--surface); color: var(--ink); }

/* ---------- Iconos ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.tone-op { --tone: var(--t-op); } .tone-ve { --tone: var(--t-ve); } .tone-in { --tone: var(--t-in); } .tone-fi { --tone: var(--t-fi); } .tone-ad { --tone: var(--t-ad); } .tone-home { --tone: var(--t-home); }
/* Menú superior (sobre carbón): iconos de color claro de su grupo */
.navgroup-btn .gic { width: 1.1rem; height: 1.1rem; color: color-mix(in srgb, var(--tone) 55%, #fff); }
.navgroup.has-on > .navgroup-btn .gic { color: var(--brand-dark); }
.mainnav a { display: flex; align-items: center; gap: .55rem; }
.mainnav .nic { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--tone, var(--t-home)) 28%, transparent); color: color-mix(in srgb, var(--tone, var(--t-home)) 45%, #fff); }
.mainnav .nic .ic { width: 1.1rem; height: 1.1rem; }
.navgroup .nic { --tone: inherit; }
.navgroup-items a { padding: .4rem .5rem; border-radius: 8px; }
.mainnav a.on .nic { background: var(--brand-dark); color: var(--brand-gold); }
@media (min-width: 1101px) { .mainnav > a .nic { width: 1.5rem; height: 1.5rem; border-radius: 6px; } .mainnav > a .nic .ic { width: .95rem; height: .95rem; } }
.bell .ic { width: 1.35rem; height: 1.35rem; color: #f1e6c8; }
/* Barra inferior del celular */
.tab .tab-ico { display: grid; place-items: center; }
.tab .tab-ico .ic { width: 1.45rem; height: 1.45rem; }
.tab.tab-on .tab-ico { color: var(--accent); }
/* Indicadores con icono */
.stat-ic { position: absolute; right: .8rem; top: .8rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px;
  background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.stat-ic .ic { width: 1.25rem; height: 1.25rem; }
.stat:has(.stat-ic) { padding-right: 3.6rem; }
/* Botones grandes del técnico */
.big-ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 16px; margin: 0 auto .5rem;
  background: color-mix(in srgb, var(--tone, var(--t-home)) 18%, transparent); color: var(--tone, var(--t-home)); font-size: 0; }
.big-ico .ic { width: 1.9rem; height: 1.9rem; }
.scan-cam { padding: .35rem .6rem; }
.scan-cam .ic { width: 1.3rem; height: 1.3rem; }
/* Apariencia (Mi cuenta) */
.theme-pick { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.theme-opt { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.theme-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.theme-swatch { display: flex; width: 3.2rem; height: 1.6rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.theme-swatch i { flex: 1; }
.theme-opt-claro .theme-swatch i:nth-child(1) { background: #e6e2da; } .theme-opt-claro .theme-swatch i:nth-child(2) { background: #f7f5f1; } .theme-opt-claro .theme-swatch i:nth-child(3) { background: #87631a; }
.theme-opt-oscuro .theme-swatch i:nth-child(1) { background: #2b2a27; } .theme-opt-oscuro .theme-swatch i:nth-child(2) { background: #35332f; } .theme-opt-oscuro .theme-swatch i:nth-child(3) { background: #e3b94d; }
.theme-opt-auto .theme-swatch i:nth-child(1) { background: #e6e2da; } .theme-opt-auto .theme-swatch i:nth-child(2) { background: #35332f; } .theme-opt-auto .theme-swatch i:nth-child(3) { background: #e3b94d; }
.theme-pick .btn { align-self: center; }

/* ---------- Avisos en pantalla y campanita ---------- */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.toast { display: flex; flex-direction: column; gap: .1rem; padding: .75rem 1rem .8rem; border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none !important;
  border-left: 6px solid var(--warn); box-shadow: 0 8px 24px rgba(30, 25, 15, .22); }
.toast strong { font-size: .78rem; color: var(--warn); }
.toast-danger { border-left-color: var(--danger); }
.toast-danger strong { color: var(--danger); }
.toast-out { opacity: 0; transform: translateY(6px); }
.sound-pref { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
@media (max-width: 767px) { .toasts { left: 1rem; right: 1rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); max-width: none; } }

/* ---------- Movimiento suave (solo si la persona no pidió reducirlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .stat-link, .mainnav .nic, .big-btn, .menu-btn, .tab, .toast, .theme-opt, .cal-ev, .cal-chip, .attn a, .comp-ph img { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, opacity .3s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .stat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(60, 50, 30, .1); }
  .mainnav a:hover .nic { transform: scale(1.08); }
  .big-btn:hover .big-ico { transform: translateY(-2px); }
  .big-ico { transition: transform .18s ease; }
  .toast { animation: toast-in .28s ease both; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .bell.ring .ic { animation: bell-ring 1s ease; transform-origin: 50% 10%; }
  @keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
  .bell.has .bell-n { animation: pulse-n 2.4s ease-in-out infinite; }
  @keyframes pulse-n { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); } 50% { box-shadow: 0 0 0 5px rgba(192, 57, 43, 0); } }
}

/* ---------- Lectura cómoda ---------- */
body { font-size: 15.5px; line-height: 1.55; letter-spacing: .005em; }
@media (max-width: 767px) { body { font-size: 16px; } }
small, .small { line-height: 1.45; }
/* Alertas más visibles: franja de color a la izquierda */
.alert { border-left-width: 5px; border-left-style: solid; }
.alert-error { border-left-color: var(--danger); }
.alert-ok { border-left-color: var(--ok); }
.alert-info { border-left-color: var(--info); }
.alert-warn { border-left-color: var(--warn); }
.badge-danger { font-weight: 700; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--oro) 60%, transparent); outline-offset: 2px; }
/* Marca en la barra: una sola línea; en pantallas medianas solo el logotipo para dar espacio al menú */
.topbar .brand strong { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1439px) { .topbar:not(.topbar-tech) .brand > span { display: none; } }
/* Botones grandes del técnico: icono con buen contraste sobre su fondo */
.big-prod .big-ico { background: rgba(255, 255, 255, .09); color: var(--oro); }
.big-tool .big-ico { background: rgba(38, 36, 32, .1); color: var(--carbon); }

/* ---------- PIN rápido ---------- */
.pin-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.pin-alt { margin-top: .75rem; }
.pin-set { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.pin-off summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; margin-top: .5rem; }
@media (max-width: 767px) { .pin-set { grid-template-columns: 1fr; } }

/* ---------- Modo sin señal ---------- */
.offline-bar { position: sticky; top: 0; z-index: 60; background: #6b4f12; color: #fff6dc; padding: .55rem 1rem; text-align: center; font-weight: 600; font-size: .92rem; }
.outbox-pill { position: fixed; left: 1rem; bottom: 1rem; z-index: 70; border: 0; border-radius: 999px; padding: .6rem 1rem; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--warn); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.outbox-pill.has-err { background: var(--danger); }
.outbox-panel { position: fixed; left: 1rem; bottom: 4.2rem; z-index: 80; width: min(420px, calc(100vw - 2rem)); max-height: 60vh; overflow: auto; margin: 0; }
.outbox-items li { padding: .55rem 0; border-top: 1px solid var(--line); }
.outbox-items li:first-child { border-top: 0; }
.outbox-err { color: var(--danger); margin: .3rem 0; font-size: .88rem; }
.offline-card { max-width: 560px; margin: 2rem auto; }
.toast-ok { border-left-color: var(--ok); }
@media (max-width: 767px) { .outbox-pill { bottom: calc(4.8rem + env(safe-area-inset-bottom)); } .outbox-panel { bottom: calc(8rem + env(safe-area-inset-bottom)); } }

/* ===== Inicio del técnico estilo app ===== */
.tech-sec { margin: .25rem 0 1.1rem; }
.tech-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.tech-sec-head h2 { margin: 0; font-family: var(--display); font-size: 1.12rem; display: flex; align-items: center; gap: .45rem; }
.tech-sec-head h2 .ic { color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 62px; padding: .7rem .95rem; border-radius: 14px; text-decoration: none !important; color: var(--ink);
  border: 1px solid transparent; font-weight: 600; }
.tile strong { font-family: var(--display); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.tile-all  { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); }
.tile-wait { background: color-mix(in srgb, #e3b94d 26%, var(--surface)); }
.tile-live { background: color-mix(in srgb, var(--t-fi) 22%, var(--surface)); }
.tile-done { background: color-mix(in srgb, var(--t-in) 18%, var(--surface)); }
.tile-late { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.tile-late.is-hot { border-color: var(--danger); }
.tile-late.is-hot strong { color: var(--danger); }
.tiles .tile:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.late-line { display: flex; align-items: center; gap: .45rem; margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: .92rem; }
.next-visit { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; padding: .75rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; box-shadow: var(--shadow); }
.next-visit .ic { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }
.next-visit span { display: flex; flex-direction: column; line-height: 1.3; }
.next-visit small { color: var(--muted); }
.offline-copy .oc-head { display: flex; gap: .8rem; align-items: flex-start; }
.offline-copy h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.oc-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); flex: none; }
.oc-status { display: flex; align-items: center; gap: .45rem; margin: .6rem 0; padding: .45rem .7rem; border-radius: 999px; background: var(--surface-2); }
.oc-status .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.oc-status .dot-ok { background: var(--ok); }
.oc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.big-grid-sm .big-btn { min-height: 120px; font-size: 1.1rem; }
.big-grid-sm .big-ico { width: 2.8rem; height: 2.8rem; }
@media (max-width: 520px) { .big-grid-sm { grid-template-columns: 1fr 1fr; } .big-grid-sm .big-btn { min-height: 110px; } }
/* Descuento del técnico */
.disc-pick { border: 0; padding: 0; margin: 0; }
.disc-pick legend { font-weight: 600; margin-bottom: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-block; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--oro) 60%, transparent); outline-offset: 2px; }
.chip-ask input:checked + span { background: var(--warn); border-color: var(--warn); color: #fff; }
.disc-ask { display: none; gap: .6rem; margin-top: .6rem; padding: .7rem; border-radius: 10px; background: var(--warn-soft); }
.disc-pick:has(input[value="mas"]:checked) .disc-ask { display: grid; }

/* ===== Inicio inteligente (3.12): semáforos, atención, gráficas, mapa ===== */
:root { --st-verde: var(--ok); --st-amarillo: #c98a0b; --st-rojo: var(--danger); --st-gris: var(--muted); }
.ksem-wrap { margin: .25rem 0 1rem; }
.ksem-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .6rem; }
.ksem-head h2 { margin: 0; font-family: var(--display); font-size: 1.2rem; }
.ksem-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; position: relative; }
.ksem { --st: var(--st-gris); position: relative; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-top: 5px solid var(--st); transition: transform .18s ease, box-shadow .18s ease; }
.ksem-verde { --st: var(--st-verde); } .ksem-amarillo { --st: var(--st-amarillo); } .ksem-rojo { --st: var(--st-rojo); }
.ksem-sin_datos { background: var(--surface-2); border-top-style: dashed; }
.ksem > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic name" "ic state" "line line"; gap: .1rem .65rem; padding: .85rem .95rem .9rem; border-radius: 16px; }
.ksem > summary::-webkit-details-marker { display: none; }
.ksem > summary:hover { background: color-mix(in srgb, var(--st) 6%, transparent); }
.ksem > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--st) 55%, transparent); outline-offset: 2px; }
.ksem:hover { transform: translateY(-1px); }
.ksem-ic { grid-area: ic; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: color-mix(in srgb, var(--st) 15%, transparent); color: var(--st); align-self: center; }
.ksem-ic .ic { width: 1.3rem; height: 1.3rem; }
.ksem-name { grid-area: name; font-weight: 700; color: var(--ink); }
.ksem-state { grid-area: state; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: color-mix(in srgb, var(--st) 85%, var(--ink)); }
.ksem-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 22%, transparent); }
.ksem-rojo .ksem-dot { animation: sem-pulse 2.4s ease-in-out infinite; }
@keyframes sem-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st) 10%, transparent); } }
.ksem-line { grid-area: line; margin-top: .45rem; font-size: .84rem; color: var(--ink-2); line-height: 1.3; }
.ksem-panel { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; width: min(34rem, 92vw); padding: .9rem 1rem; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(30, 25, 15, .18); animation: sem-in .16s ease-out; }
.ksem:nth-child(4) .ksem-panel, .ksem:nth-child(5) .ksem-panel { left: auto; right: 0; }
@keyframes sem-in { from { opacity: 0; transform: translateY(-4px); } }
.ksem-panel-h { margin: 0 0 .6rem; }
.ksem-crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ksem-crit li { padding: .6rem .7rem; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--muted); }
.ksem-crit li.crit-verde { border-left-color: var(--st-verde); } .ksem-crit li.crit-amarillo { border-left-color: var(--st-amarillo); } .ksem-crit li.crit-rojo { border-left-color: var(--st-rojo); }
.ksem-crit p { margin: .3rem 0 0; }
.crit-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.crit-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .9rem; }
.period-bar input, .period-bar select { padding: .35rem .5rem; }
.period-note { flex-basis: 100%; margin: 0; }
.dash-periods { display: flex; flex-wrap: wrap; gap: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; }
.dash-periods a { padding: .4rem .85rem; border-radius: 999px; color: var(--ink-2); text-decoration: none !important; font-weight: 600; font-size: .9rem; }
.dash-periods a.on { background: var(--brand-dark); color: var(--oro); }
.delta { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-weight: 700; font-size: .75rem; vertical-align: middle; font-family: system-ui, sans-serif; }
.delta-up { background: var(--info-soft); color: var(--info); } .delta-down { background: var(--surface-2); color: var(--ink-2); } .delta-eq, .delta-new { background: var(--surface-2); color: var(--ink-2); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .75rem; margin-bottom: .75rem; align-items: start; }
.home-grid > .card { margin: 0; }
.attn2 { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.attn2 li { display: flex; align-items: center; gap: .4rem; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--info); padding-right: .3rem; }
.attn2 li.attn-danger { border-left-color: var(--danger); } .attn2 li.attn-warn { border-left-color: var(--st-amarillo); }
.attn2 a { flex: 1; display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; color: var(--ink); text-decoration: none !important; min-width: 0; }
.attn2 a:hover .attn-t strong { text-decoration: underline; }
.attn-n { flex: none; min-width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface); }
.attn-danger .attn-n { color: var(--danger); } .attn-warn .attn-n { color: var(--warn); } .attn-info .attn-n { color: var(--info); }
.attn-t { display: flex; flex-direction: column; min-width: 0; } .attn-t small { color: var(--muted); }
.attn2 form { margin: 0; }
.inline-form { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.chart-goal .bar { fill: color-mix(in srgb, var(--t-ve) 70%, var(--surface)); transition: fill .15s ease; }
.chart-goal .bar-met { fill: color-mix(in srgb, var(--t-fi) 80%, var(--surface)); }
.chart-goal a:hover .bar, .chart-goal a:focus .bar { fill: var(--t-ve); } .chart-goal a:hover .bar-met { fill: var(--t-fi); }
.chart-goal .hit { fill: transparent; }
.chart-goal a:hover .hit { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.chart-goal .goal { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 3; }
.chart-goal .prev { fill: var(--surface); stroke: var(--t-in); stroke-width: 2; }
.chart-goal .lg i { border-radius: 3px; }
.chart-goal .k-bar { background: var(--t-ve); } .chart-goal .k-met { background: var(--t-fi); }
.chart-goal .k-goal { background: var(--ink); height: .2rem !important; vertical-align: 3px !important; } .chart-goal .k-prev { border: 2px solid var(--t-in); border-radius: 50% !important; }
.area-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.acard { padding: 1rem 1.05rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .45rem; }
.acard h3 { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: 1rem; }
.acard-ic { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.acard-ic .ic { width: 1.15rem; height: 1.15rem; }
.acard-big { margin: 0; font-family: var(--display); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.acard-list { list-style: none; margin: 0; padding: 0; }
.acard-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .32rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.acard-list li strong { font-variant-numeric: tabular-nums; }
.split-bar { height: .6rem; border-radius: 999px; background: color-mix(in srgb, var(--st-amarillo) 55%, var(--surface)); overflow: hidden; }
.split-bar .sb-ok { display: block; height: 100%; background: var(--t-fi); border-radius: 999px 0 0 999px; }
.split-lg { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; }
.split-lg i { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.split-lg .k-ok { background: var(--t-fi); } .split-lg .k-idle { background: color-mix(in srgb, var(--st-amarillo) 55%, var(--surface)); }
.meter-lg { height: .5rem; }
.tech-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.ts-items { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.ts-items > div { display: flex; flex-direction: column; }
.ts-items strong { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.tech-strip .btn .ic { width: 1.1rem; height: 1.1rem; vertical-align: -3px; }
.geo-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gmap-svg { width: 100%; height: auto; max-height: 560px; display: block; }
.gmap-svg .zone { stroke: var(--surface); stroke-linejoin: round; transition: fill .15s ease, opacity .15s ease; }
.gmap-svg a:hover .zone, .gmap-svg a:focus .zone { opacity: .78; }
.gmap-svg .zone-sel { stroke: var(--ink); }
.zone.q0, .zone-key.q0 { fill: var(--surface-2); background: var(--surface-2); }
.zone.q1, .zone-key.q1 { fill: color-mix(in srgb, var(--t-op) 20%, var(--surface)); background: color-mix(in srgb, var(--t-op) 20%, var(--surface)); }
.zone.q2, .zone-key.q2 { fill: color-mix(in srgb, var(--t-op) 38%, var(--surface)); background: color-mix(in srgb, var(--t-op) 38%, var(--surface)); }
.zone.q3, .zone-key.q3 { fill: color-mix(in srgb, var(--t-op) 56%, var(--surface)); background: color-mix(in srgb, var(--t-op) 56%, var(--surface)); }
.zone.q4, .zone-key.q4 { fill: color-mix(in srgb, var(--t-op) 76%, var(--surface)); background: color-mix(in srgb, var(--t-op) 76%, var(--surface)); }
.zone.q5, .zone-key.q5 { fill: var(--t-op); background: var(--t-op); }
.geo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin-top: .5rem; font-size: .85rem; }
.lg-item { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.zone-key { display: inline-block; width: 1rem; height: .8rem; border-radius: 3px; border: 1px solid var(--line); }
.geo-attr { margin: .3rem 0 0; }
.geo-missing { margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 10px; background: var(--surface-2); font-size: .9rem; }
.geo-missing.has { background: var(--warn-soft); }
.geo-side h3 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.05rem; }
.zone-clients { list-style: none; margin: .7rem 0 0; padding: 0; max-height: 22rem; overflow: auto; }
.zone-clients li { padding: .35rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: .5rem; }
.city-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cb-top { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .2rem; color: var(--ink); }
.city-bars .meter > span { background: var(--t-op); }
@media (max-width: 1100px) { .ksem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksem:nth-child(3) .ksem-panel { left: auto; right: 0; } .ksem:nth-child(4) .ksem-panel { left: 0; right: auto; } }
@media (max-width: 900px) { .home-grid, .geo-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ksem-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; padding-bottom: .4rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .ksem { flex: 0 0 72%; scroll-snap-align: start; }
  .ksem[open] { flex-basis: 92%; }
  .ksem-panel, .ksem:nth-child(n) .ksem-panel { position: static; width: auto; box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
  .area-cards { grid-template-columns: 1fr; }
  .period-bar .inline { flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) { .ksem, .ksem-panel, .ksem-rojo .ksem-dot { animation: none; transition: none; } }

/* ===== Rendimiento por técnico ===== */
.perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem; }
.perf { padding: 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .5rem; }
.perf-top { display: flex; align-items: center; gap: .7rem; }
.perf-top h3 { margin: 0; font-size: 1.05rem; }
.avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-weight: 800; font-size: .9rem; color: #fff; flex: none; }
.av-0 { background: var(--t-op); } .av-1 { background: var(--t-ve); } .av-2 { background: var(--t-in); } .av-3 { background: var(--t-fi); } .av-4 { background: var(--t-ad); } .av-5 { background: var(--t-home); }
.perf-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.perf-nums div { padding: .5rem; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; }
.perf-nums strong { font-family: var(--display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.perf-nums span { font-size: .78rem; color: var(--muted); }
.perf-note { margin: 0; font-size: .85rem; color: var(--ink-2); }
.mini-bars { display: flex; align-items: flex-end; gap: .3rem; height: 4.5rem; }
.mini-bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .15rem; height: 100%; font-size: .7rem; color: var(--muted); }
.mini-bars i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--t-op) 70%, var(--surface)); min-height: 2px; }

/* ===== Ajustes de semáforos ===== */
.kpi-area { margin-bottom: 1rem; }
.kpi-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .6rem 1rem; }
.kpi-params label { display: flex; flex-direction: column; gap: .25rem; }
.kpi-params .in-unit { display: flex; align-items: center; gap: .4rem; }
.kpi-params input { max-width: 8rem; }
.kpi-params .sug { font-size: .78rem; color: var(--muted); }
.kpi-params .custom input { border-color: var(--accent); }
.seg-act > summary { list-style: none; }
.seg-act > summary::-webkit-details-marker { display: none; }
.seg-act[open] { min-width: 16rem; }
.seg-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.warn-text { color: var(--warn); font-weight: 600; }
.period-more > summary { list-style: none; }
.period-more > summary::-webkit-details-marker { display: none; }
.period-more-in { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; }
@media (max-width: 640px) { .period-more-in .inline { flex: 1 1 45%; } }
@media (max-width: 640px) { .attn2 .btn-sm { padding: .3rem .45rem; font-size: .78rem; } .attn2 a { gap: .5rem; padding: .5rem; } }
/* Check-in (3.12) */
.btn-xl { min-height: 3.6rem; font-size: 1.15rem; }
.checkin-card .geo-msg { min-height: 1.2em; }
.checkin-exc { margin-top: .6rem; }
.checkin-exc > summary { list-style: none; } .checkin-exc > summary::-webkit-details-marker { display: none; }
.chips-set { border: 0; padding: 0; margin: 0 0 .5rem; } .chips-set legend { font-weight: 600; margin-bottom: .4rem; }
.checkin-auto-msg { padding: .6rem .8rem; border-radius: 10px; background: var(--info-soft); color: var(--ink); }
.auto-checkin { position: fixed; left: 50%; transform: translateX(-50%); bottom: 5rem; z-index: 50; padding: .6rem 1rem; border-radius: 999px; background: var(--brand-dark); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 92vw; }
/* Formularios simples (3.12 Fase 2) */
.chips-big .chip span { padding: .75rem 1.15rem; font-size: 1.02rem; min-width: 3.4rem; text-align: center; }
.out-why { margin-top: .4rem; padding: .55rem .7rem; border-radius: 10px; background: var(--warn-soft); }
.autosave-state { position: sticky; top: .3rem; z-index: 5; margin: 0 0 .6rem; padding: .35rem .7rem; border-radius: 999px; background: var(--surface-2); display: inline-block; }
.ok-text { color: var(--ok); font-weight: 600; }
.dl-compact { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; } .dl-compact dt { color: var(--muted); } .dl-compact dd { margin: 0; }
.form-fill input[type=text], .form-fill textarea, .form-fill select { font-size: 1.02rem; min-height: 2.8rem; }
.photo-field input[type=file], .checkin-card input[type=file] { max-width: 100%; width: 100%; }
/* Fase 3: materiales, fotos y pausas */
.mat-card > summary { list-style: none; cursor: pointer; } .mat-card > summary::-webkit-details-marker { display: none; }
.mat-card > summary h2::before { content: '▸ '; color: var(--muted); } .mat-card[open] > summary h2::before { content: '▾ '; }
.mat-search { display: flex; gap: .5rem; flex-wrap: wrap; } .mat-search input[type=search] { flex: 1 1 14rem; min-height: 3rem; font-size: 1.02rem; }
.photo-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.photo-group h3 { margin: 0 0 .4rem; font-size: 1rem; }
.photo-pick { position: relative; min-height: 3.2rem; display: flex; align-items: center; justify-content: center; }
.thumbs figure { position: relative; } .thumbs figure form { position: absolute; top: .2rem; right: .2rem; } .thumbs figure .btn-sm { background: rgba(255,255,255,.9); }
.pause-box > summary { list-style: none; } .pause-box > summary::-webkit-details-marker { display: none; }
.pause-box[open] > summary { margin-bottom: .5rem; }
/* Fase 4: terminar */
.finish-check { padding: .7rem .9rem; border-radius: 12px; background: var(--danger-soft, #fbe9e7); margin-bottom: .7rem; }
.finish-check li { padding: .25rem 0; }
.finish-ok { padding: .6rem .8rem; border-radius: 12px; background: var(--ok-soft, #e6f4ea); font-weight: 600; }
.finish-alt { margin-top: .6rem; } .finish-alt > summary { list-style: none; } .finish-alt > summary::-webkit-details-marker { display: none; }
.finish-alt[open] > summary { margin-bottom: .5rem; }
.receipt { margin: .4rem 0 .6rem; }
/* Fase 6: agenda Día / Semana / Mes */
.agenda-views { margin-bottom: .7rem; display: inline-flex; }
.week-day { padding: .4rem 0; border-top: 1px solid var(--line); } .week-day.is-today .week-day-h { color: var(--accent); }
.week-day-h { display: block; font-weight: 700; color: var(--ink); text-decoration: none !important; margin-bottom: .3rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.mg-day { min-width: 0; overflow: hidden; } .mg-day > span:last-child, .mg-day .mg-n { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; }
.mg-h { text-align: center; font-size: .78rem; color: var(--muted); font-weight: 700; }
.mg-day { aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: var(--ink); text-decoration: none !important; font-weight: 600; }
.mg-day.is-today { outline: 2px solid var(--accent); } .mg-day.has { background: var(--surface); border: 1px solid var(--line); }
.mg-day i, .dot-open, .dot-done { font-style: normal; font-size: .7rem; min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px; color: #fff; text-align: center; display: inline-block; }
.dot-open { background: var(--accent); } .dot-done { background: var(--muted); }
/* Fase 6: Necesito ayuda */
.help-fab { position: fixed; right: .7rem; bottom: 5.1rem; z-index: 40; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 3rem; height: 3rem; padding: 0 .7rem; border-radius: 999px;
  background: #c62828; color: #fff !important; font-weight: 800; font-size: .85rem; text-decoration: none !important; box-shadow: 0 4px 12px rgba(198,40,40,.35);
  transition: transform .2s ease, opacity .2s ease; }
.help-fab span { font-size: .8rem; }
/* Burbuja que no tapa: se esconde al bajar y reaparece al subir o al llegar arriba */
.help-fab.is-away { transform: translateY(160%); opacity: 0; pointer-events: none; }
body.has-help-fab main, body.has-help-fab .main { padding-bottom: 4.5rem; }
@media (min-width: 900px) { .help-fab { bottom: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .help-fab { transition: none; } }
.help-card { display: flex; flex-direction: column; gap: .8rem; }
.help-call { background: var(--ok); color: #fff !important; border: 0; line-height: 1.2; }
.help-send { background: #c62828; color: #fff; border: 0; position: relative; overflow: hidden; touch-action: none; user-select: none; }
.help-send::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #fff; }
.help-send.holding::after { width: 100%; transition: width 1s linear; }
.help-warn { padding: .6rem .8rem; border-radius: 10px; background: var(--warn-soft); font-weight: 700; color: var(--ink); }
.help-item.is-open { border-left: 5px solid #c62828; }
@media (prefers-reduced-motion: reduce) { .help-send.holding::after { transition: none; } }

/* Informe para el cliente (enlace sin iniciar sesión) */
.pub-body { background: var(--bg); min-height: 100vh; margin: 0; }
.pub-wrap { max-width: 30rem; margin: 0 auto; padding: 2rem 1rem; }
.pub-card { background: var(--surface); border: 1px solid var(--line, #e3e1dc); border-top: 4px solid var(--accent); border-radius: 14px; padding: 1.6rem 1.3rem; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.pub-logo { max-width: 220px; max-height: 110px; width: auto; height: auto; margin: 0 auto 1rem; display: block; }
.pub-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--muted); margin: 0; }
.pub-card h1 { margin: .2rem 0 1rem; font-size: 1.5rem; }
.pub-data { text-align: left; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.pub-data div { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; border-bottom: 1px solid var(--line, #e3e1dc); padding-bottom: .4rem; }
.pub-data dt { color: var(--muted); font-size: .9rem; }
.pub-data dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pub-btn { display: block; width: 100%; padding: .9rem; font-size: 1.05rem; box-sizing: border-box; }
.pub-note { font-size: .8rem; color: var(--muted); margin: .9rem 0 0; }
.pub-contact { margin: 1rem 0 0; }
.pub-foot { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 1rem; }
.report-link { border-top: 1px solid var(--line, #e3e1dc); margin-top: .9rem; padding-top: .7rem; }
.report-link h3 { font-size: 1rem; margin: 0 0 .3rem; }
.mono-input { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; margin: .3rem 0 .5rem; box-sizing: border-box; }

/* Mapas · Personal en ruta */
.map-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.2rem 0 .8rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.map-tabs-t { font-weight: 700; margin-right: .4rem; }
.map-tab { padding: .35rem .8rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); }
.map-tab.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.smap { position: relative; height: 360px; overflow: hidden; border-radius: 10px; background: var(--surface-2); touch-action: none; user-select: none; border: 1px solid var(--line); }
.smap-tall { height: 460px; }
.smap .gmap-tiles { position: absolute; inset: 0; }
.smap .gmap-tile { position: absolute; width: 256px; height: 256px; max-width: none; }
.smap-trail { position: absolute; inset: 0; pointer-events: none; }
.smap-trail polyline { fill: none; stroke: #2463eb; stroke-width: 3; stroke-opacity: .7; stroke-dasharray: 6 4; }
.smap-marks { position: absolute; inset: 0; pointer-events: none; }
.smk { position: absolute; transform: translate(-50%, -50%); min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff; background: #6b7280; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); text-decoration: none; pointer-events: auto; box-sizing: border-box; }
.smk.activo { background: #15803d; } .smk.reciente { background: #c2780a; } .smk.antiguo, .smk.sin { background: #6b7280; }
.smk.punto { background: #2463eb; min-width: 1.5rem; height: 1.5rem; font-size: .68rem; } .smk.llegada { background: #15803d; } .smk.ayuda { background: #c0262d; }
.smap-bar { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; z-index: 2; }
.smap .gmap-attr { position: absolute; right: 0; bottom: 0; font-size: .7rem; background: rgba(255,255,255,.85); padding: 0 .3rem; z-index: 2; }
.smap-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin: .5rem 0; color: var(--muted); }
.smk-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 999px; margin-right: .3rem; vertical-align: -1px; background: #6b7280; }
.smk-key.activo, .smk-key.llegada { background: #15803d; } .smk-key.reciente { background: #c2780a; } .smk-key.punto { background: #2463eb; } .smk-key.ayuda { background: #c0262d; }
.staff-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.staff-list li { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.sl-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.sl-links { margin-top: .2rem; }
.loc-notice { margin-top: 1rem; }
.day-nav { display: inline-flex; gap: .3rem; }

/* Eliminación controlada (MASTER) */
.btn-danger-text { color: var(--danger, #b42318) !important; }
.purge-table { max-width: 28rem; }
.purge-form { max-width: 28rem; margin-top: 1rem; }

/* Migración 2Workers (simulación) */
.m2w-sum { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 .8rem; }
.m2w-table tr.m2w-revisar td:first-child { box-shadow: inset 3px 0 0 #c2780a; }
.m2w-table tr.m2w-error td:first-child { box-shadow: inset 3px 0 0 #b42318; }
.tiles-down { position: absolute; left: .6rem; right: .6rem; bottom: 1.6rem; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.gmap-tile-bad { visibility: hidden; }

/* Avisos con sonido (3.12) */
.toast { display: flex; flex-direction: column; gap: .2rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid #2463eb; border-radius: 10px; padding: .6rem .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.18); text-decoration: none; font-size: .92rem; }
.toast-importante { border-left-color: #c2780a; }
.toast-critica { border-left-color: #c0262d; }
.toast-unlock { cursor: pointer; font-weight: 600; text-align: left; }
.toast-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.toast-x { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.toast-title { color: inherit; font-weight: 600; text-decoration: none; }
.toast-body { color: var(--muted); font-size: .85rem; }
.toast-acts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.toast-out { opacity: 0; transition: opacity .4s; }
.sos-bar { position: sticky; top: 0; z-index: 70; background: #c0262d; color: #fff; padding: .5rem .8rem; display: grid; gap: .4rem; }
.sos-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sos-txt { font-weight: 700; margin-right: .4rem; }
.sos-bar .btn { background: #fff; color: #8a1a1f; border-color: #fff; }
.sos-bar .btn-primary { background: #1f2937; color: #fff; border-color: #1f2937; }
.sound-pref { display: grid; gap: .5rem; margin-top: 1rem; }
.sound-pref h3 { margin: 0; font-size: 1rem; }
.sound-tests { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.sound-vol input { vertical-align: middle; width: 10rem; }
.al-critica { border-left: 4px solid #c0262d; }
.toast-normal { border-left-color: #2463eb; } .toast-normal strong { color: #2463eb; }
.toast-importante strong { color: var(--warn); }
.toast-critica { border-left-color: var(--danger); } .toast-critica strong { color: var(--danger); }

/* Mochila y conteos (3.12) */
.mochila-card { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; border-left: 5px solid var(--warn); margin-bottom: 1rem; }
.mochila-card.is-done { border-left-color: var(--ok, #15803d); }
.mochila-ico { font-size: 1.8rem; }
.repo-row { display: grid; grid-template-columns: 1fr 7rem; gap: .5rem; margin-bottom: .4rem; }
.photo-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.photo-grid img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; }
.inline-details { display: inline-block; }
.text-warn { color: var(--warn); }
.mochila-intro { white-space: normal; line-height: 1.45; font-size: .92rem; }
.mochila-foot { text-align: center; margin: 1rem 0 .5rem; font-size: .9rem; }
.forms-preview:not(:empty) { border: 1px dashed var(--line); border-radius: .6rem; padding: .6rem .8rem; background: var(--surface); }
.forms-preview ul { margin: .2rem 0 .3rem; }