/* ============================================================
   SYNKFLOW — Skin Dashboard v1.6
   v1.6: - "GENERAL" eliminado definitivamente (display none)
         - Expansión SOLO por :hover (fuera :focus-within, que
           retenía la barra abierta tras hacer clic en un item)
         - Acento de marca oficial: #f1511b (naranja del logo)
           remapea todas las clases violet del dashboard
   - Las etiquetas permanecen en el DOM (compatibilidad RBAC)
   ============================================================ */

/* ===== 1) SIDEBAR NEGRO PURO (ambos temas) ===== */
#sidebar {
  background: #000000 !important;
  border-color: #1f1f1f !important;
}

/* Items de menú: iconos y texto BLANCO PURO */
#sidebar .nav-item,
#sidebar .nav-item svg,
#sidebar .nav-item span { color: #ffffff !important; }

/* Logout: blanco; el hover conserva el rojo destructivo */
#logout,
#logout svg,
#logout span { color: #ffffff !important; }
#logout:hover,
#logout:hover svg,
#logout:hover span { color: #ef4444 !important; }

/* Eliminado definitivo del título "GENERAL" (residuo v1) */
#sidebar nav > div { display: none !important; }

/* Crédito Naptec: discreto, neutro */
#sidebar > div.border-t a { color: rgba(255, 255, 255, .45) !important; }
#sidebar > div.border-t a:hover { color: rgba(255, 255, 255, .75) !important; }

/* Hover de items: blanco translúcido sobre negro */
#sidebar .nav-item:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
}

/* Centrado vertical SEGURO del grupo de items */
#sidebar nav::before { content: ''; margin-top: auto; }
#sidebar nav::after  { content: ''; margin-bottom: auto; }

body.light-mode #sidebar img { filter: none !important; }

#sidebar > div.border-t { border-color: #1f1f1f !important; }

#sidebar ::-webkit-scrollbar-track { background: transparent; }
#sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* ===== 2) HOVER-EXPAND (solo desktop, solo :hover) ===== */
@media (min-width: 1024px) {

  #sidebar {
    width: 76px;
    padding: 16px 10px;
    transition: width .22s cubic-bezier(.4, 0, .2, 1),
                padding .22s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s ease;
  }
  #sidebar:hover {
    width: 264px;
    padding: 16px 14px;
    box-shadow: 28px 0 64px rgba(0, 0, 0, .45);
  }
  body.light-mode #sidebar:hover {
    box-shadow: 28px 0 64px rgba(15, 23, 42, .22);
  }

  /* Marca: logo simplificado colapsado, logo completo expandida */
  #sidebar > div:first-child {
    justify-content: center;
    margin-bottom: 26px;
    padding: 0;
  }
  #sidebar > div:first-child::before {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background-image: url('/assets/logo-sidebar.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  #sidebar > div:first-child img { display: none; }

  #sidebar:hover > div:first-child { justify-content: flex-start; }
  #sidebar:hover > div:first-child::before { display: none; }
  #sidebar:hover > div:first-child img { display: block; }

  /* Items: solo iconos centrados */
  #sidebar .nav-item,
  #logout {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  #sidebar .nav-item span,
  #logout span {
    width: 0;
    min-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .18s ease .06s;
  }
  #sidebar .nav-item svg,
  #logout svg { flex: none; width: 22px; height: 22px; }

  /* Expandida: texto a la izquierda */
  #sidebar:hover .nav-item,
  #sidebar:hover #logout {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }
  #sidebar:hover .nav-item span,
  #sidebar:hover #logout span {
    width: auto;
    margin-left: 12px;
    opacity: 1;
  }

  /* Bloque Naptec */
  #sidebar > div.border-t a { display: none; }
  #sidebar:hover > div.border-t a { display: flex; }

  /* Contenido: margen fijo del ancho colapsado */
  main { margin-left: 76px !important; }
}

/* ===== 3) ACENTO DE MARCA OFICIAL: #f1511b =====
   Remapea las clases violet (que el hack de Tailwind pintaba
   del naranja viejo #ff6b35) al naranja real del logo.
   Aplica en ambos temas y a todo el dashboard. */

.text-violet-400, .text-violet-500, .text-violet-600 { color: #f1511b !important; }
.bg-violet-500, .bg-violet-600, .bg-violet-700 { background-color: #f1511b !important; }
.hover\:bg-violet-700:hover { background-color: #cd4517 !important; }
.hover\:text-violet-500:hover, .hover\:text-violet-600:hover { color: #f1511b !important; }
.border-violet-500, .border-violet-600 { border-color: #f1511b !important; }
.focus\:border-violet-500:focus { border-color: #f1511b !important; }
.focus\:ring-violet-500:focus { --tw-ring-color: #f1511b !important; }
.bg-violet-500\/10, .hover\:bg-violet-500\/10:hover { background-color: rgb(241 81 27 / .1) !important; }
.from-violet-500 {
  --tw-gradient-from: #f1511b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(241 81 27 / 0)) !important;
}

/* ===== 4) TEMA CLARO: BLANCO PURO + TARJETAS ELEVADAS ===== */

html body.light-mode,
html body.light-mode .bg-slate-950 {
  background-color: #ffffff !important;
}

html body.light-mode .bg-slate-900.rounded-2xl {
  background-color: #ffffff !important;
  border-color: #eef1f5 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .05),
    0 12px 32px rgba(15, 23, 42, .07) !important;
}

html body.light-mode .bg-slate-800\/50 { background-color: rgba(15, 23, 42, .05) !important; }
html body.light-mode .bg-slate-800\/40 { background-color: rgba(15, 23, 42, .04) !important; }
html body.light-mode .bg-slate-800\/30 { background-color: rgba(15, 23, 42, .03) !important; }
html body.light-mode .bg-slate-700\/50 { background-color: rgba(15, 23, 42, .07) !important; }

body.light-mode nav.fixed.bottom-0 {
  box-shadow: 0 -6px 20px rgba(15, 23, 42, .07) !important;
}

/* ===== 5) v1.7 — ITEM ACTIVO DEL SIDEBAR + REMAP COMPLETO DE ACENTOS ===== */

/* 5a. Estado ACTIVO: showView() agrega la clase bg-violet-600/10 al item
     de la vista actual (tinte al 10% = el "naranjo leve" reportado).
     Se pinta SOLIDO con el naranja de marca y texto blanco.
     Especificidad ID+2 clases: gana a las reglas blancas de la sección 1. */
#sidebar .nav-item.bg-violet-600\/10 {
  background-color: #f1511b !important;
  color: #ffffff !important;
}
#sidebar .nav-item.bg-violet-600\/10 svg,
#sidebar .nav-item.bg-violet-600\/10 span {
  color: #ffffff !important;
}
/* Hover del activo: naranja oscurecido (no el blanco translúcido del resto) */
#sidebar .nav-item.bg-violet-600\/10:hover {
  background-color: #cd4517 !important;
}

/* 5b. Tintes translúcidos: variantes con opacidad que faltaban en v1.6 */
.bg-violet-600\/10, .hover\:bg-violet-600\/10:hover { background-color: rgb(241 81 27 / .1) !important; }
.bg-violet-500\/20, .hover\:bg-violet-500\/20:hover { background-color: rgb(241 81 27 / .2) !important; }

/* 5c. Clases de acento fuera del remap v1.6 (según inventario real) */
.hover\:bg-violet-600:hover { background-color: #f1511b !important; }
.hover\:text-violet-400:hover { color: #f1511b !important; }
.hover\:border-violet-500:hover { border-color: #f1511b !important; }
.accent-violet-500 { accent-color: #f1511b !important; }
.checked\:bg-violet-600:checked { background-color: #f1511b !important; }

/* 5d. Botón de subida de archivos (antes: lavanda + naranja viejo mezclados) */
.file\:bg-violet-50::file-selector-button { background-color: #fff1ec !important; }
.file\:text-violet-700::file-selector-button { color: #f1511b !important; }
.hover\:file\:bg-violet-100:hover::file-selector-button { background-color: #ffe3da !important; }

/* ===== 6) v1.8 — SEPARADOR: Configuración como sección inferior ===== */
#sidebar button[onclick="showView('configuracion')"] {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ===== 7) v1.10 — GRUPOS DEL MENÚ: separador del bloque de gestión ===== */
#sidebar .nav-item[onclick="showView('rrhh')"] {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ===== 8) v1.11 — BOTÓN COTIZAR (vista Clientes) ===== */
#view-clientes .btn-cotizar {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; margin-right: 10px;
  padding: 8px 16px; border: 1px solid #f1511b; border-radius: 8px;
  color: #f1511b; font-weight: 500; font-size: .875rem;
  background: transparent; transition: all .2s; cursor: pointer;
}
#view-clientes .btn-cotizar:hover { background: #f1511b; color: #ffffff; }

/* ===== 9) v1.13 — FORMULARIO NUEVA PARTIDA (modal flotante) ===== */
#form-partida { max-width: 720px; }
#form-partida .partida-total-box {
  background: rgba(241, 81, 27, .08);
  border: 1px solid rgba(241, 81, 27, .35);
  border-radius: 12px;
  padding: 10px 14px;
}
body.light-mode #form-partida .partida-total-box {
  background: rgba(241, 81, 27, .05);
  border-color: rgba(241, 81, 27, .3);
}

/* ===== 10) v1.14 — ACORDEÓN DE PARTIDAS REDISEÑADO ===== */
#lista-partidas-accordion .partida-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241, 81, 27, .12);
  border: 1px solid rgba(241, 81, 27, .35);
  color: #f1511b;
  font-weight: 800; font-size: .9rem;
  border-radius: 12px;
}
#lista-partidas-accordion .partida-pill {
  display: inline-block;
  background: rgba(148, 163, 184, .12);
  color: #94a3b8;
  font-size: .7rem; font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
#lista-partidas-accordion .partida-mini-bar {
  width: 90px; height: 6px;
  background: rgba(148, 163, 184, .15);
  border-radius: 999px;
  overflow: hidden;
}
#lista-partidas-accordion .partida-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #f1511b, #ff7a45);
  border-radius: 999px;
  transition: width .4s ease;
}
#lista-partidas-accordion .partida-card:has(.border-t:not(.hidden)),
#lista-partidas-accordion .partida-card.expandida {
  border-color: rgba(241, 81, 27, .45);
}
body.light-mode #lista-partidas-accordion .partida-pill { color: #64748b; }

/* ===== 10) v1.14 — ACORDEÓN DE PARTIDAS REDISEÑADO ===== */
#lista-partidas-accordion .partida-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241, 81, 27, .12);
  border: 1px solid rgba(241, 81, 27, .35);
  color: #f1511b;
  font-weight: 800; font-size: .9rem;
  border-radius: 12px;
}
#lista-partidas-accordion .partida-pill {
  display: inline-block;
  background: rgba(148, 163, 184, .12);
  color: #94a3b8;
  font-size: .7rem; font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
#lista-partidas-accordion .partida-mini-bar {
  width: 90px; height: 6px;
  background: rgba(148, 163, 184, .15);
  border-radius: 999px;
  overflow: hidden;
}
#lista-partidas-accordion .partida-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #f1511b, #ff7a45);
  border-radius: 999px;
  transition: width .4s ease;
}
body.light-mode #lista-partidas-accordion .partida-pill { color: #64748b; }

/* ===== 11) v1.15 — MODALES PALETA SISTEMA + SELECT PLANOS + BOTONES ACCIÓN ===== */

/* Modales: fuera el azul #0f172a hardcodeado del core, dentro la paleta Synkflow.
   Aplica a TODOS los modales del sistema (partida, trabajador, cliente, gastos...) */
#synk-modal-overlay > * {
  background-color: #141921 !important;
  border: 1px solid #2a323f !important;
}
body.light-mode #synk-modal-overlay > * {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Select de plano asociado: legible y cómodo */
.sp-plano {
  padding: 7px 10px !important;
  font-size: .75rem !important;
  border-radius: 8px !important;
  cursor: pointer;
}

/* Botones de acción del proyecto: simetría total */
button[onclick="exportarPartidasCSV()"],
#btn-informe-proy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
#btn-informe-proy {
  background-color: #f1511b !important;
  color: #ffffff !important;
  transition: background-color .2s !important;
}
#btn-informe-proy:hover { background-color: #cd4517 !important; }

/* ===== 12) v1.16 — PROGRAMACIÓN DE OBRA ===== */
#gantt-view-btns button {
  color: #94a3b8; background: transparent; border: none;
  padding: 8px 14px; font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
#gantt-view-btns button:hover { color: #e8ecf1; }
#gantt-view-btns button.activo { background: #f1511b; color: #ffffff; }
#btn-modo-reprogramar {
  padding: 9px 16px; border-radius: 10px; font-size: .8rem; font-weight: 700;
  border: 1px solid #2a323f; background: #1E2430; color: #e8ecf1;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
#btn-modo-reprogramar.activo {
  background: #f1511b; border-color: #f1511b; color: #ffffff;
  box-shadow: 0 4px 14px rgba(241, 81, 27, .3);
}
body.light-mode #btn-modo-reprogramar { background: #ffffff; color: #0f172a; border-color: #e2e8f0; }
body.light-mode #btn-modo-reprogramar.activo { background: #f1511b; color: #ffffff; border-color: #f1511b; }
/* Modo vista: sin manijas de resize y cursor neutro */
.no-reprogram .handle-group { display: none !important; }
.no-reprogram .bar-wrapper { cursor: default !important; }

/* ===== 13) v1.17 — GANTT: colores semánticos y contraste ===== */
/* Barras por estado (custom_class aplica al bar-wrapper en frappe 0.6.1) */
.bar-wrapper .bar { fill: #3b82f6; }
.bar-wrapper.gp-pend .bar, .bar.gp-pend { fill: #3b82f6; }
.bar-wrapper.gp-curso .bar, .bar.gp-curso { fill: #f1511b; }
.bar-wrapper.gp-done .bar, .bar.gp-done { fill: #059669; }

/* Etiquetas: blanco legible dentro, oscuro cuando caen fuera */
.bar-wrapper .bar-label { fill: #ffffff !important; font-weight: 600; font-size: 12px; }
.bar-label.big { fill: #334155 !important; }

/* Progreso interno y manijas */
.bar-progress { fill: rgba(0, 0, 0, .22); }
.handle { fill: #0f172a; }

/* Flechas de dependencia (predecesoras, fase 2) */
.arrow { stroke: #64748b; }
.arrow path, .arrow polygon { fill: #64748b; }

/* ===== 14) v1.18 — FLECHAS DE DEPENDENCIA MÁS ELEGANTES ===== */
#gantt-container .arrow { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
#gantt-container .arrow path,
#gantt-container .arrow polygon { fill: #94a3b8 !important; }
#gantt-container .arrow polygon { transform: scale(0.65); transform-origin: center; }
#gantt-container .bar-wrapper:hover .arrow { stroke: #f1511b; }

/* ===== 15) v1.19 — FLECHAS: version compatible (sin transform) ===== */
#gantt-container .arrow { stroke-width: 1.5 !important; opacity: .55; }
#gantt-container .arrow polygon { fill: #64748b !important; }
#gantt-container .bar-wrapper:hover + .arrow,
#gantt-container .arrow:hover { opacity: 1; }

/* ===== 16) v1.20 — DEPENDENCIAS: líneas con punta de flecha fina ===== */
#gantt-container .arrow { stroke: #64748b !important; stroke-width: 1.5 !important; fill: none !important; marker-end: url(#gantt-arrow-head); }
#gantt-container .arrow polygon { display: none !important; }
#gantt-container .arrow path { fill: none !important; }

/* ===== 17) v1.21 — DASHBOARD RESUMEN REDISEÑADO ===== */
.dash-kicker{font-size:.72rem;font-weight:700;color:#f1511b;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.dash-title{color:#0f172a}
.dash-user-foto{width:80px;height:80px;border-radius:50%;object-fit:cover;border:4px solid #f1511b;flex:none}
.dash-kpi{background:#fff;border:1px solid #eef1f5;border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.05)}
.dash-kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.dash-kpi-valor{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:#0f172a;margin:4px 0 2px;line-height:1.1}
.dash-kpi-sub{font-size:.75rem;color:#94a3b8}
.dash-section{margin-top:8px}
.dash-card{background:#fff;border:1px solid #eef1f5;border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.05)}
.dash-obra{background:#fff;border:1px solid #eef1f5;border-radius:14px;padding:16px 18px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.dash-obra:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.1)}
.dash-obra-cod{font-family:ui-monospace,monospace;font-size:.7rem;color:#f1511b;font-weight:700}
.dash-obra-nombre{font-weight:700;color:#0f172a;font-size:.95rem}
.dash-obra-personal{font-size:.68rem;color:#059669;font-weight:600;background:rgba(5,150,105,.08);padding:3px 8px;border-radius:99px;white-space:nowrap}
.dash-obra-barra{height:8px;background:#f1f5f9;border-radius:99px;overflow:hidden;margin-top:10px}
.dash-obra-barra div{height:100%;border-radius:99px;transition:width .4s}
.dash-pill{font-size:.72rem;padding:3px 10px;border-radius:99px;background:#f1f5f9;color:#64748b;font-weight:600}
.dash-pill-ok{background:rgba(5,150,105,.1);color:#059669}
/* Campanita en sidebar */
.notif-sidebar-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:10px 0;margin:4px 0 8px;color:#fff;background:transparent;border:none;cursor:pointer;border-radius:10px;transition:background .2s}
.notif-sidebar-btn:hover{background:rgba(255,255,255,.08)}
.notif-badge{position:absolute;top:4px;right:calc(50% - 26px);min-width:18px;height:18px;border-radius:99px;background:#f1511b;color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* ===== 19) v1.23 — KPIs EN UNA FILA (grid propio, a prueba de purga de Tailwind) ===== */
#resumen-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  #resumen-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #resumen-kpis { grid-template-columns: 1fr; }
}

/* Tarjeta de obra: padding inferior que acomoda la alerta */
.dash-obra { padding-bottom: 20px; }
.dash-obra p.text-amber-600 { margin-top: 6px; line-height: 1.4; }

/* Grids del resumen generados por JS: protegidos contra purga */
#resumen-finanzas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 960px) {
  #resumen-finanzas { grid-template-columns: 1fr; }
}
#resumen-equipo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 960px) {
  #resumen-equipo { grid-template-columns: 1fr; }
}

/* ===== 20) v1.24 — SLIDER DE AVANCE EN TERRENO (protagonista, mobile-first) ===== */
.terreno-slider{
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #f1511b var(--p, 0%), #e2e8f0 var(--p, 0%));
  outline: none;
}
.terreno-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid #f1511b;
  box-shadow: 0 2px 8px rgba(15,23,42,.25); cursor: pointer;
}
.terreno-slider::-moz-range-thumb{
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid #f1511b;
  box-shadow: 0 2px 8px rgba(15,23,42,.25); cursor: pointer;
}
body.light-mode .terreno-slider{ background: linear-gradient(90deg, #f1511b var(--p, 0%), #f1f5f9 var(--p, 0%)); }

/* ===== 21) v1.25 — TERRENO v2: resumen, chips, filtros ===== */
.terreno-global{margin-bottom:14px}
.terreno-global-bar{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden}
body:not(.light-mode) .terreno-global-bar{background:#1E2430}
.terreno-global-bar div{height:100%;background:linear-gradient(90deg,#f1511b,#ff7a45);border-radius:99px;transition:width .5s}
.terreno-global-txt{display:flex;justify-content:space-between;margin-top:6px;font-size:.85rem;color:var(--muted,#64748b)}
.terreno-global-txt b{color:#0f172a;font-size:1rem}
body:not(.light-mode) .terreno-global-txt b{color:#fff}
.terreno-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.terreno-chip{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s}
body:not(.light-mode) .terreno-chip{background:#1E2430;border-color:#2a323f;color:#94a3b8}
.terreno-chip:hover{border-color:#f1511b;color:#f1511b}
.terreno-chip-activa{background:#f1511b !important;border-color:#f1511b !important;color:#fff !important}
.terreno-tareas-chip{font-size:.68rem;font-weight:600;color:#64748b;background:rgba(148,163,184,.12);padding:2px 10px;border-radius:99px;margin-left:10px;white-space:nowrap}

/* ===== 22) v1.26 — ETIQUETA RESPONSABLE con foto (Avance) ===== */
.terreno-resp{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(241,81,27,.08);border:1px solid rgba(241,81,27,.25);
  border-radius:999px;padding:3px 12px 3px 4px;
}
.terreno-resp img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid #f1511b}
.terreno-resp b{font-size:.72rem;color:#f1511b;font-weight:700}

/* ===== 23) v1.27 - DRAWER MOVIL DESDE LA DERECHA (estilo app) =====
   El sidebar existente se convierte en drawer derecho bajo 1024px.
   Semantica del core preservada: clase -translate-x-full presente = cerrado.
   Escritorio (>=1024px) intacto: hover-expand y margen de main sin cambios. */
@media (max-width: 1023px) {
  #sidebar {
    display: flex !important;
    left: auto;
    right: 0;
    top: 0;
    width: 264px;
    padding: 16px 14px;
    border-right-width: 0;
    border-left: 1px solid #1f1f1f;
    transform: translateX(0);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .5);
  }
  #sidebar.-translate-x-full { transform: translateX(100%) !important; }
  #sidebar .nav-item, #sidebar #logout {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }
  #sidebar .nav-item span, #sidebar #logout span {
    width: auto;
    min-width: 0;
    margin-left: 12px;
    opacity: 1;
    overflow: visible;
    white-space: nowrap;
  }
  #sidebar .nav-item svg, #sidebar #logout svg { flex: none; }
  #notificaciones-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 14px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (min-width: 1024px) {
  #sidebar.-translate-x-full { transform: none !important; }
}