/* Importar estilos base desde index.html */
    :root {
      /* ─── Colores - Tema Claro (por defecto) ─────────────── */
      --bg: #f4f1ea;
      --bg-gradient-start: #fff6dc;
      --bg-gradient-mid: #f8f4ec;
      --panel: #fffdf8;
      --panel-subtle: #fbf8f1;
      --ink: #1c1a17;
      --muted: #6b655d;
      --line: #ddd3c4;
      --accent: #0c6c67;
      --accent-soft: #dff3f1;
      --accent-hover: #0a5955;
      --warn: #a85d1a;
      --warn-soft: #fff0df;
      --shadow: 0 18px 40px rgba(42, 31, 12, 0.08);
      --shadow-sm: 0 2px 8px rgba(42, 31, 12, 0.06);
      --hero-gradient: linear-gradient(135deg, #123c52, #0c6c67 58%, #f0a83a 140%);
      
      /* ─── Tipografía ─────────────────────────────────────── */
      --font-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      --font-mono: "Consolas", "Monaco", "Courier New", monospace;
      
      /* Tamaños de fuente */
      --text-xs: 11px;
      --text-sm: 13px;
      --text-base: 14px;
      --text-md: 16px;
      --text-lg: 18px;
      --text-xl: 20px;
      --text-2xl: 24px;
      --text-3xl: 32px;
      --text-4xl: 44px;
      
      /* Pesos de fuente */
      --font-normal: 400;
      --font-medium: 500;
      --font-semibold: 600;
      --font-bold: 700;
      --font-extrabold: 800;
      
      /* Altura de línea */
      --leading-tight: 1.2;
      --leading-normal: 1.4;
      --leading-relaxed: 1.6;
      
      /* ─── Espaciado (Márgenes y Padding) ────────────────── */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 20px;
      --space-2xl: 24px;
      --space-3xl: 32px;
      --space-4xl: 40px;
      --space-5xl: 56px;
      
      /* ─── Bordes redondeados ────────────────────────────── */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 18px;
      --radius-xl: 24px;
      --radius-2xl: 28px;
      --radius-full: 999px;
      
      /* ─── Transiciones ──────────────────────────────────── */
      --transition-fast: 0.15s ease;
      --transition-base: 0.2s ease;
      --transition-slow: 0.3s ease;
    }

    /* ─── TEMA OSCURO ──────────────────────────────────────── */
    [data-theme="dark"] {
      --bg: #1a1a1a;
      --bg-gradient-start: #2d2d2d;
      --bg-gradient-mid: #222222;
      --panel: #2a2a2a;
      --panel-subtle: #252525;
      --ink: #e8e8e8;
      --muted: #999999;
      --line: #404040;
      --accent: #26a69a;
      --accent-soft: #1e4d47;
      --accent-hover: #2ec4b6;
      --warn: #ff9800;
      --warn-soft: #4a3a28;
      --shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
      --hero-gradient: linear-gradient(135deg, #1e3a47, #26a69a 58%, #ff9800 140%);
    }

    /* ─── TEMA AZUL ───────────────────────────────────────── */
    [data-theme="blue"] {
      --bg: #e8f4f8;
      --bg-gradient-start: #e3f2fd;
      --bg-gradient-mid: #e8f4f8;
      --panel: #ffffff;
      --panel-subtle: #f5fafc;
      --ink: #0d47a1;
      --muted: #546e7a;
      --line: #b3e5fc;
      --accent: #1976d2;
      --accent-soft: #e3f2fd;
      --accent-hover: #1565c0;
      --warn: #fb8c00;
      --warn-soft: #fff3e0;
      --shadow: 0 18px 40px rgba(13, 71, 161, 0.08);
      --shadow-sm: 0 2px 8px rgba(13, 71, 161, 0.06);
      --hero-gradient: linear-gradient(135deg, #0d47a1, #1976d2 58%, #42a5f5 140%);
    }

    /* ─── TEMA VERDE ──────────────────────────────────────── */
    [data-theme="green"] {
      --bg: #e8f5e9;
      --bg-gradient-start: #e8f5e9;
      --bg-gradient-mid: #f1f8e9;
      --panel: #ffffff;
      --panel-subtle: #f5faf5;
      --ink: #1b5e20;
      --muted: #558b2f;
      --line: #c8e6c9;
      --accent: #2e7d32;
      --accent-soft: #e8f5e9;
      --accent-hover: #1b5e20;
      --warn: #f57c00;
      --warn-soft: #fff8e1;
      --shadow: 0 18px 40px rgba(27, 94, 32, 0.08);
      --shadow-sm: 0 2px 8px rgba(27, 94, 32, 0.06);
      --hero-gradient: linear-gradient(135deg, #1b5e20, #2e7d32 58%, #66bb6a 140%);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-primary);
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }

    /* Control flotante de zoom */
    .zoom-control {
      position: fixed;
      bottom: var(--space-xl);
      right: var(--space-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: var(--space-xs);
      box-shadow: var(--shadow);
      z-index: 9999;
      transition: all var(--transition-fast);
    }
    
    .zoom-control:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    
    .zoom-btn {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: white;
      color: var(--accent);
      font-size: 18px;
      font-weight: var(--font-bold);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    .zoom-btn:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      transform: scale(1.05);
    }
    
    .zoom-btn:active {
      transform: scale(0.95);
    }
    
    .zoom-display {
      text-align: center;
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
      color: var(--muted);
      padding: var(--space-xs) 0;
      user-select: none;
    }

    .shell {
      max-width: 1280px;
      width: 100%;
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
    }
    
    .hero {
      background: var(--hero-gradient);
      color: white;
      border-radius: var(--radius-2xl);
      padding: var(--space-2xl) var(--space-3xl);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      transition: all var(--transition-base);
    }
    
    .hero::after {
      content: "";
      position: absolute;
      inset: auto -60px -60px auto;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
    }
    
    .hero h1 { 
      margin: 0 0 var(--space-sm); 
      font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); 
      font-weight: var(--font-bold);
      line-height: var(--leading-tight);
    }
    
    .hero p { 
      margin: var(--space-xs) 0; 
      color: rgba(255,255,255,0.85); 
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
    }
    
    .hero-meta { 
      display: flex; 
      flex-wrap: wrap; 
      gap: var(--space-md); 
      margin-top: var(--space-lg); 
    }
    
    .hero-chip {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-full);
      font-size: var(--text-base);
      font-weight: var(--font-medium);
      transition: all var(--transition-fast);
    }

    .hero-chip-new {
      background: rgba(76, 175, 80, 0.22);
      border-color: rgba(255,255,255,0.35);
      font-weight: var(--font-bold);
    }

    .designated-person-panel {
      margin: var(--space-md) 0 var(--space-sm);
      padding: var(--space-md);
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line) 70%);
      border-radius: var(--radius-md);
      background: color-mix(in srgb, var(--accent-soft) 48%, var(--panel) 52%);
    }

    .designated-person-panel.is-required {
      border-color: color-mix(in srgb, var(--warn) 55%, var(--line) 45%);
      background: color-mix(in srgb, var(--warn-soft) 46%, var(--panel) 54%);
    }

    .designated-person-head {
      display: flex;
      justify-content: space-between;
      gap: var(--space-md);
      align-items: flex-start;
      margin-bottom: var(--space-md);
    }

    .designated-person-panel.is-compact {
      padding: 10px 12px;
    }

    .designated-person-panel.is-compact .designated-person-head {
      align-items: center;
      margin-bottom: 0;
    }

    .designated-person-panel.is-compact .designated-person-grid,
    .designated-person-panel.is-compact #designatedPersonStatus {
      display: none;
    }

    .designated-person-head h3 {
      margin: 0 0 2px;
      font-size: var(--text-md);
      color: var(--ink);
    }

    .designated-person-head-actions {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex: 0 0 auto;
    }

    .designated-person-badge {
      flex: 0 0 auto;
      padding: 4px 8px;
      border-radius: var(--radius-full);
      background: var(--warn-soft);
      color: var(--warn);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
    }

    .designated-person-badge.is-ok {
      background: var(--accent);
      color: #fff;
    }

    .designated-person-edit {
      width: 32px;
      height: 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--accent-hover);
      cursor: pointer;
      font-size: 15px;
      font-weight: var(--font-bold);
      line-height: 1;
      transition: all var(--transition-fast);
    }

    .designated-person-edit:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .designated-person-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-sm);
      align-items: end;
    }

    .designated-person-actions {
      display: flex;
      align-items: end;
    }

    .designated-person-actions .button {
      width: 100%;
      min-height: 42px;
    }

    .manual-designated-panel {
      margin-top: var(--space-sm);
      padding-top: var(--space-sm);
      border-top: 1px solid color-mix(in srgb, var(--line) 74%, #fff 26%);
    }

    .manual-designated-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-sm);
      margin-bottom: var(--space-xs);
    }

    .manual-designated-head h4 {
      margin: 0 0 2px;
      color: var(--ink);
      font-size: var(--text-sm);
    }

    .manual-designated-close {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 4px 9px;
      border: 1px solid color-mix(in srgb, var(--line) 80%, #fff 20%);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--muted);
      cursor: pointer;
      font-size: 10px;
      font-weight: var(--font-bold);
    }

    .manual-designated-close:hover {
      border-color: var(--accent);
      color: var(--accent-hover);
    }

    .manual-designated-grid {
      display: grid;
      grid-template-columns: minmax(150px, 1.4fr) minmax(86px, 0.6fr) repeat(2, minmax(118px, 0.8fr));
      gap: var(--space-xs);
      align-items: end;
    }

    .manual-designated-schedule-field {
      grid-column: span 2;
    }

    .manual-designated-days {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
      min-height: 38px;
    }

    .manual-designated-days label {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-height: 27px;
      padding: 3px 7px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, #fff 22%);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--muted);
      font-size: 10px;
      font-weight: var(--font-bold);
    }

    .manual-designated-grid .button {
      min-height: 38px;
    }

    .ranking-config-actions {
      display: flex;
      justify-content: flex-end;
      margin: -2px 0 var(--space-xs);
    }

    .ranking-config-toggle {
      min-height: 32px;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      font-size: 11px;
      line-height: 1;
    }

    .ranking-config-panel {
      margin: 0 0 var(--space-sm);
      padding: var(--space-sm);
      border: 1px solid color-mix(in srgb, var(--line) 74%, #fff 26%);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel-subtle) 48%, var(--panel) 52%);
    }

    .ranking-config-head,
    .ranking-config-footer {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-sm);
    }

    .ranking-config-head {
      margin-bottom: var(--space-xs);
    }

    .ranking-config-head h3 {
      margin: 0 0 2px;
      color: var(--ink);
      font-size: var(--text-sm);
    }

    .ranking-config-grid {
      display: grid;
      grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(86px, 0.7fr));
      gap: var(--space-xs);
      align-items: end;
    }

    .ranking-config-footer {
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: var(--space-xs);
    }

    .smart-alerts-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin: 0 0 var(--space-sm);
      padding: 8px 9px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, #fff 22%);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel-subtle) 48%, var(--panel) 52%);
    }

    .smart-alerts-title {
      margin-right: 2px;
      color: var(--ink);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .smart-alert-chip {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 3px 7px;
      border: 1px solid color-mix(in srgb, var(--line) 74%, #fff 26%);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--muted);
      font-size: 10px;
      font-weight: var(--font-bold);
      line-height: 1.1;
    }

    .smart-alert-chip-strong {
      border-color: color-mix(in srgb, var(--accent) 35%, var(--line) 65%);
      color: var(--accent-hover);
    }

    .smart-alert-chip-warn {
      border-color: color-mix(in srgb, var(--warn) 40%, var(--line) 60%);
      color: #8a5a00;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      padding: var(--space-2xl);
      box-shadow: var(--shadow);
      transition: all var(--transition-base);
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      margin-bottom: var(--space-md);
      color: var(--ink);
    }

    .muted { 
      color: var(--muted); 
      font-size: var(--text-sm);
    }

    .button {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
      color: var(--ink);
      padding: var(--space-sm) var(--space-lg);
      font: inherit;
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
      display: inline-block;
    }

    .button:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .button.secondary {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }

    .button.secondary:hover {
      background: var(--accent-hover);
    }

    .button.is-active,
    .button[aria-pressed="true"] {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .notification-settings-btn {
      width: 48px;
      min-width: 48px;
      height: 42px;
      padding: 0;
      border-radius: 12px;
      position: relative;
    }

    .notification-settings-btn.is-notification-enabled {
      background: #0b8a6f;
      border-color: #08745d;
      color: #fff;
      box-shadow: 0 0 0 3px color-mix(in srgb, #0b8a6f 18%, transparent);
    }

    .notification-settings-btn.is-notification-off {
      background: #b42318;
      border-color: #8f1c14;
      color: #fff;
      box-shadow: none;
    }

    .notification-settings-btn:disabled {
      opacity: 0.62;
    }

    .notification-bell-icon {
      display: inline-flex;
      width: 22px;
      height: 22px;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .notification-bell-svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notification-bell-slash {
      display: none;
      stroke-width: 2.8;
    }

    .notification-settings-btn.is-notification-off .notification-bell-slash,
    .notification-settings-btn.is-notification-blocked .notification-bell-slash {
      display: block;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }

    .toolbar > * {
      min-width: 0;
    }
    
    .toolbar input, .toolbar select {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-md);
      background: var(--panel);
      font: inherit;
      font-size: var(--text-base);
      color: var(--ink);
      min-width: 180px;
      transition: all var(--transition-fast);
    }
    
    .toolbar input:focus, .toolbar select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .table-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      max-height: none;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-base);
      table-layout: auto;
    }

    th, td {
      text-align: left;
      padding: var(--space-md) var(--space-sm);
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }

    th {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-weight: var(--font-bold);
      position: sticky;
      top: 0;
      background: var(--panel);
      z-index: 10;
      white-space: nowrap;
      box-shadow: 0 1px 0 var(--line);
    }

    tbody tr {
      transition: background var(--transition-fast);
    }

    tbody tr:hover {
      background: var(--accent-soft);
    }

    td strong {
      color: var(--ink);
      font-weight: var(--font-bold);
    }

    .expand-cell {
      width: 110px;
      white-space: normal;
      padding: var(--space-sm) !important;
      vertical-align: middle;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-start;
    }

    .toggle-details {
      border: 1px solid var(--line);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--accent);
      padding: var(--space-sm) var(--space-md);
      font: inherit;
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      cursor: pointer;
      transition: all var(--transition-base);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 40px;
      white-space: nowrap;
    }

    .toggle-details .toggle-icon {
      display: inline-block;
      transition: transform var(--transition-base);
      transform-origin: center;
      line-height: 1;
    }

    .toggle-details:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .toggle-details[aria-expanded="true"] {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }

    .toggle-details[aria-expanded="true"] .toggle-icon {
      transform: rotate(90deg);
    }

    .offer-row.is-open {
      background: var(--accent-soft);
    }

    .offer-detail-row td {
      padding: 0 var(--space-sm) var(--space-lg);
      background: var(--panel-subtle);
    }

    .offer-detail-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--panel);
      padding: var(--space-lg);
      box-shadow: var(--shadow-sm);
    }

    .detail-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .detail-card-header h3 {
      margin: 0;
      font-size: 17px;
    }

    .horarios-cell {
      padding: var(--space-md) var(--space-sm) !important;
      vertical-align: middle;
      min-width: 150px;
      max-width: 250px;
      font-size: var(--text-xs);
      line-height: var(--leading-normal);
      color: var(--ink);
    }

    .horarios-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .horarios-text {
      font-size: var(--text-sm);
      text-align: center;
      width: 100%;
      line-height: 1.4;
    }

    .horario-line {
      margin: 2px 0;
      font-weight: var(--font-semibold);
    }

    .day-badges {
      display: flex;
      gap: 4px;
      justify-content: center;
    }

    .horarios-cell .muted {
      font-style: normal;
      color: var(--muted);
    }

    .offer-detail-card .sched-grid {
      gap: 8px;
      min-width: 100%;
    }

    .offer-detail-card .sched-cell {
      padding: 10px 6px;
    }

    .offer-detail-card .sched-cell-day {
      font-size: 10px;
      margin-bottom: 4px;
    }

    #resultCount { 
      font-size: var(--text-sm); 
      color: var(--muted); 
      margin: 0 0 var(--space-lg); 
    }

    /* ─── Availability filter panel ──────────────────────── */
    .offers-refresh-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .offers-updating-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 9px;
      border-radius: var(--radius-full);
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
      background: color-mix(in srgb, var(--accent-soft) 76%, #fff 24%);
      color: var(--accent);
      font-weight: var(--font-bold);
      white-space: nowrap;
    }

    .offers-updating-pill::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      animation: offerPulse 0.9s ease-in-out infinite;
    }

    .offers-refresh-note {
      font-size: var(--text-xs);
      color: var(--muted);
    }

    .offers-loading-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-md);
    }

    .offers-loading-card {
      min-height: 230px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
      padding: var(--space-md);
      overflow: hidden;
    }

    .offers-loading-line {
      height: 12px;
      border-radius: var(--radius-full);
      margin-bottom: 10px;
      background: linear-gradient(90deg, #ececec 0%, #f8f8f8 48%, #ececec 100%);
      background-size: 220% 100%;
      animation: offerSkeleton 1.15s ease-in-out infinite;
    }

    .offers-loading-line.title {
      height: 18px;
      width: 72%;
      margin-top: 8px;
    }

    .offers-loading-line.short { width: 42%; }
    .offers-loading-line.medium { width: 62%; }
    .offers-loading-line.full { width: 100%; }

    @keyframes offerSkeleton {
      from { background-position: 220% 0; }
      to { background-position: -220% 0; }
    }

    @keyframes offerPulse {
      0%, 100% { opacity: 0.38; transform: scale(0.86); }
      50% { opacity: 1; transform: scale(1); }
    }

    .avail-panel {
      background: #f0f6ff;
      border: 1px solid #c3dafe;
      border-radius: 12px;
      padding: 8px 12px;
      margin-bottom: 14px;
      display: inline-block;
    }
    .avail-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
    .avail-check { display: flex; align-items: center; gap: 4px; cursor: pointer; }
    .avail-check input { width: 14px; height: 14px; accent-color: #2b4acb; cursor: pointer; margin: 0; }
    .avail-check span { font-size: 12px; font-weight: 600; color: #2d3748; user-select: none; white-space: nowrap; }

    /* ─── Oblea compact section ──────────────────────────── */
    .oblea-compact {
      display: flex;
      gap: var(--space-md);
      align-items: flex-end;
      flex-wrap: wrap;
    }
    
    .oblea-select-group {
      flex: 1;
      min-width: 240px;
    }
    
    .oblea-actions {
      display: flex;
      gap: var(--space-xs);
    }

    .oblea-access-panel {
      margin-top: var(--space-xl);
    }

    .oblea-access-panel .oblea-compact {
      align-items: flex-end;
    }
    
    .btn-icon {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
      cursor: pointer;
      transition: all var(--transition-fast);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .btn-icon:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    
    .btn-icon:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }
    
    .oblea-editor {
      margin-top: var(--space-lg);
      background: var(--panel-subtle);
      border: 2px solid var(--line);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      animation: slideDown 0.2s ease;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .editor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--line);
    }
    
    .editor-header h3 {
      margin: 0;
      font-size: var(--text-lg);
      font-weight: var(--font-bold);
      color: var(--ink);
    }
    
    .btn-close {
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 20px;
      color: var(--muted);
      transition: all var(--transition-fast);
      border-radius: var(--radius-sm);
    }
    
    .btn-close:hover {
      background: var(--line);
      color: var(--ink);
    }
    
    .editor-content {
      display: grid;
      gap: var(--space-md);
    }
    
    .field-label {
      display: block;
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      color: var(--muted);
      margin-bottom: var(--space-xs);
    }
    
    .field-label input,
    .field-label select,
    .field-label textarea {
      display: block;
      width: 100%;
      margin-top: var(--space-xs);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      background: var(--panel);
      font: inherit;
      font-size: var(--text-base);
      color: var(--ink);
      transition: all var(--transition-fast);
    }
    
    .field-label textarea {
      resize: vertical;
      min-height: 120px;
      font-family: var(--font-mono);
      line-height: 1.5;
    }
    
    .field-label input:focus,
    .field-label select:focus,
    .field-label textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    
    .oblea-preview {
      background: var(--panel);
      border: 1px solid var(--accent);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      margin-top: var(--space-md);
    }
    
    .oblea-preview h4 {
      margin: 0 0 var(--space-sm);
      font-size: var(--text-md);
      font-weight: var(--font-bold);
      color: var(--accent);
    }
    
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-md);
    }
    
    .preview-item {
      font-size: var(--text-sm);
    }
    
    .preview-item strong {
      display: block;
      font-weight: var(--font-bold);
      color: var(--ink);
      margin-bottom: 4px;
    }
    
    .preview-item span {
      color: var(--muted);
    }
    
    .editor-actions {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
      margin-top: var(--space-md);
    }

    .editor-actions > * {
      flex: 1 1 180px;
    }
    
    /* Tabs del editor */
    .editor-tabs {
      display: flex;
      gap: var(--space-xs);
      margin: 0 var(--space-lg) var(--space-md);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    
    .tab-btn {
      padding: var(--space-sm) var(--space-md);
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      color: var(--muted);
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      margin-bottom: -1px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    
    .tab-btn:hover {
      color: var(--ink);
      background: var(--panel-subtle);
    }
    
    .tab-btn.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    .tab-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    
    .tab-content {
      display: none;
    }
    
    .tab-content.active {
      display: block;
    }
    
    .status-message {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-top: var(--space-md);
      font-style: italic;
    }

    .status-message-error { color: #e53935; }
    .status-message-success { color: #4caf50; }
    .status-message-info { color: var(--muted); }
    
    .btn-icon-emoji {
      display: inline-block;
    }
    
    .btn-text {
      display: inline-block;
    }

    /* ─── Modal de detalle ──────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-lg);
      animation: fadeIn 0.2s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .modal-content {
      background: var(--panel);
      border-radius: var(--radius-xl);
      max-width: 900px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
      animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: var(--space-2xl);
      border-bottom: 1px solid var(--line);
      gap: var(--space-lg);
    }
    
    .modal-header h3 {
      margin: 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      color: var(--ink);
      flex: 1;
    }
    
    .modal-close {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
      cursor: pointer;
      font-size: 24px;
      color: var(--muted);
      transition: all var(--transition-fast);
      flex-shrink: 0;
    }
    
    .modal-close:hover {
      background: var(--line);
      color: var(--ink);
      transform: scale(1.1);
    }
    
    .modal-body {
      padding: var(--space-2xl);
    }

    .notification-prompt-modal {
      background: rgba(24, 35, 34, 0.58);
    }

    .notification-prompt-content {
      max-width: 560px;
      border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line) 74%);
      border-radius: 16px;
    }

    .notification-prompt-header {
      align-items: center;
      padding-bottom: var(--space-lg);
    }

    .notification-prompt-kicker {
      margin: 0 0 4px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .notification-prompt-body {
      display: grid;
      gap: var(--space-md);
      padding-top: var(--space-lg);
    }

    .notification-prompt-body p {
      margin: 0;
      color: var(--muted);
      font-size: var(--text-base);
      line-height: 1.5;
    }

    .notification-prompt-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .notification-prompt-list span {
      min-height: 54px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line) 80%);
      border-radius: 10px;
      background: color-mix(in srgb, var(--accent-soft) 62%, var(--panel) 38%);
      color: var(--accent-hover);
      font-size: 12px;
      font-weight: var(--font-bold);
      line-height: 1.25;
    }

    .notification-prompt-status {
      min-height: 18px;
      margin: 0;
    }

    .notification-prompt-actions {
      display: flex;
      gap: var(--space-sm);
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .detail-map-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      margin: 0 0 var(--space-lg);
      padding: 8px 14px;
      border: 1px solid var(--accent);
      border-radius: var(--radius-full);
      background: var(--accent-soft);
      color: var(--accent);
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      text-decoration: none;
    }

    .offer-detail-layout {
      min-width: 0;
    }

    .offer-map-panel {
      display: none;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--panel);
      box-shadow: var(--shadow-sm);
    }

    .offer-map-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      padding: var(--space-md);
      border-bottom: 1px solid var(--line);
    }

    .offer-map-head .detail-section-title {
      margin: 0;
    }

    .offer-map-link {
      flex: 0 0 auto;
      color: var(--accent);
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      text-decoration: none;
    }

    .offer-map-link:hover {
      text-decoration: underline;
    }

    .offer-map-frame-wrap {
      width: 100%;
      aspect-ratio: 4 / 3;
      min-height: 320px;
      overflow: hidden;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      background: var(--panel-subtle);
    }

    .offer-map-frame {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

    @media (min-width: 980px) {
      .modal-content {
        max-width: min(1180px, calc(100vw - 32px));
      }

      .modal-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
        align-items: start;
        gap: var(--space-lg);
      }

      .modal-body > .detail-badge-row {
        grid-column: 1 / -1;
      }

      .modal-body > .detail-map-action {
        display: none;
      }

      .modal-body > :not(.detail-badge-row):not(.detail-map-action):not(.offer-map-panel) {
        grid-column: 1;
      }

      .modal-body > .offer-map-panel {
        grid-column: 2;
        grid-row: 2 / span 12;
      }

      .offer-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
        align-items: start;
        gap: var(--space-lg);
      }

      .offer-map-panel {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: var(--space-lg);
      }

      .offer-map-panel-table {
        position: static;
      }
    }

    .detail-section {
      margin-bottom: var(--space-2xl);
    }
    
    .detail-section:last-child {
      margin-bottom: 0;
    }
    
    .detail-section-title {
      font-size: var(--text-md);
      font-weight: var(--font-bold);
      color: var(--accent);
      margin-bottom: var(--space-md);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-md);
    }
    
    .detail-item {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
    
    .detail-label {
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .detail-item strong {
      font-size: var(--text-base);
      color: var(--ink);
      font-weight: var(--font-semibold);
    }
    
    .sched-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-xs);
      margin-top: var(--space-sm);
      min-width: 0;
    }

    .sched-grid-detail {
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      width: 100%;
    }
    
    .sched-cell {
      background: var(--panel-subtle);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: var(--space-sm);
      text-align: center;
      min-width: 0;
    }
    
    .sched-cell.active {
      background: #c8f5d0;
      border-color: #4caf50;
    }
    
    .sched-cell.inactive {
      background: var(--line);
      opacity: 0.5;
    }
    
    .sched-cell-day {
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      color: var(--muted);
      margin-bottom: 4px;
    }
    
    .sched-cell-hours {
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      color: var(--ink);
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.3;
    }
    
    .meta-summary {
      cursor: pointer;
      font-weight: var(--font-bold);
      color: var(--accent);
      padding: var(--space-md);
      background: var(--panel-subtle);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }
    
    .meta-summary:hover {
      background: var(--accent-soft);
    }

    /* ═══════════════════════════════════════════════════════
       VISTA DE CARDS
       ═══════════════════════════════════════════════════════ */

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-2xl);
    }

    .offer-card {
      background: var(--panel);
      border: 2px solid var(--line);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      transition: all var(--transition-base);
      position: relative;
      overflow: hidden;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .offer-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: var(--accent);
    }

    .offer-card.score-urgente {
      border-left: 3px solid #e53935;
      background: linear-gradient(135deg, #fff9f9 0%, var(--panel) 100%);
    }

    .offer-card.score-alta {
      border-left: 3px solid #4caf50;
      background: linear-gradient(135deg, #f5fbf6 0%, var(--panel) 100%);
    }

    .offer-card.score-media {
      border-left: 3px solid #ffc107;
    }

    .offers-map-view {
      display: grid;
      gap: var(--space-md);
      margin-bottom: var(--space-2xl);
    }

    .offers-map-view.hidden {
      display: none !important;
    }

    .offers-map-list {
      display: grid;
      gap: 8px;
      min-width: 0;
      overflow-y: auto;
      padding-right: 2px;
      scrollbar-width: thin;
    }

    .cards-map-list {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 0;
    }

    .offer-card-map-selectable {
      cursor: pointer;
    }

    .offer-card-map-selectable[data-selected-card="true"] {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .offers-map-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
    }

    .offers-map-item.is-selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: var(--shadow-sm);
    }

    .offers-map-item-designada {
      border-color: #d6a23a;
      border-left: 4px solid #b97900;
      background: #fffaf0;
    }

    .offers-map-item-designada.is-selected {
      border-color: #b97900;
      background: #fff3d1;
      box-shadow: 0 0 0 3px rgba(185, 121, 0, 0.14);
    }

    .offers-map-item-button {
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
      font: inherit;
    }

    .offers-map-item-button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 6px;
    }

    .offers-map-item-title,
    .offers-map-item-meta,
    .offers-map-item-schedule {
      display: block;
      min-width: 0;
    }

    .offers-map-item-title {
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .offers-map-item-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: var(--font-bold);
      line-height: 1.35;
    }

    .offers-map-item-schedule {
      margin-top: 3px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 850;
      line-height: 1.35;
    }

    .offers-map-item-link {
      align-self: stretch;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-full);
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .offers-map-item-link:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .offers-map-panel {
      min-width: 0;
    }

    .offers-map-empty {
      padding: var(--space-lg);
      border: 1px dashed var(--line);
      border-radius: var(--radius-md);
      background: var(--panel-subtle);
      color: var(--muted);
      font-weight: var(--font-bold);
    }

    @media (min-width: 980px) {
      .offers-map-view {
        grid-template-columns: minmax(320px, 0.85fr) minmax(380px, 1.15fr);
        align-items: start;
      }

      .offers-map-list {
        max-height: calc(100vh - 230px);
      }

      .offers-map-panel {
        position: sticky;
        top: var(--space-lg);
      }

      .offers-map-panel .offer-map-panel {
        display: flex;
        flex-direction: column;
      }

      .offer-map-panel-results .offer-map-frame-wrap {
        aspect-ratio: 16 / 10;
        min-height: 460px;
      }
    }

    @media (max-width: 979px) {
      .offers-map-view {
        grid-template-columns: 1fr;
      }

      .offers-map-list {
        max-height: min(390px, 48vh);
        padding-right: 4px;
      }

      .offers-map-panel .offer-map-panel {
        display: flex;
        flex-direction: column;
      }

      .offer-map-panel-results .offer-map-frame-wrap {
        aspect-ratio: 16 / 9;
        min-height: 280px;
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: var(--space-sm);
      gap: var(--space-xs);
    }

    .card-estado-badge {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      flex-wrap: wrap;
    }

    .estado-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 2px var(--panel);
    }

    .card-ige {
      font-size: var(--text-xs);
      color: var(--muted);
      font-weight: var(--font-bold);
      text-align: right;
      line-height: 1.1;
      white-space: nowrap;
    }

    .card-ige-label {
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 10px;
    }

    .card-ige-value {
      display: block;
      font-size: var(--text-sm);
      color: var(--ink);
    }

    .badge {
      display: inline-block;
      padding: 2px var(--space-xs);
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: var(--font-bold);
      letter-spacing: 0.03em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    
    .badge-alta    { background: #e6f4ec; color: #1d6b3a; }
    .badge-media   { background: #fff8e1; color: #7d5800; }
    .badge-normal  { background: #f0f0f0; color: #666; }
    .badge-urgente { background: #fdecea; color: #b71c1c; }

    .card-cargo {
      font-size: var(--text-md);
      font-weight: var(--font-bold);
      color: var(--ink);
      margin-bottom: var(--space-xs);
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .card-sigla {
      display: inline;
      padding: 2px var(--space-xs);
      border-radius: var(--radius-sm);
      background: #efe9db;
      color: #5a4732;
      font-weight: var(--font-bold);
      font-size: 11px;
      white-space: nowrap;
    }

    .card-nivel {
      font-size: var(--text-sm);
      color: var(--muted);
      margin-bottom: var(--space-sm);
    }

    .card-divider {
      height: 1px;
      background: var(--line);
      margin: var(--space-sm) 0;
    }

    .card-info-row {
      font-size: var(--text-xs);
      color: var(--ink);
      margin-bottom: var(--space-xs);
      line-height: 1.4;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .card-info-row strong {
      font-weight: var(--font-bold);
      color: var(--muted);
    }

    .oferta-tiempo-panel {
      display: grid;
      gap: 8px;
      margin: var(--space-md) 0;
      padding: 11px 12px;
      border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
      border-left: 5px solid var(--accent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--accent-soft) 72%, #fff 28%);
      color: var(--ink);
      font-size: var(--text-sm);
      line-height: 1.25;
      min-width: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
    }

    .suplencia-highlight {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 6px;
      align-items: baseline;
      margin: var(--space-md) 0 var(--space-sm);
      padding: 10px 11px;
      border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
      border-left: 5px solid var(--accent);
      border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--accent-soft) 72%, #fff 28%);
      color: var(--ink);
      font-size: var(--text-sm);
      line-height: 1.25;
      min-width: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
    }

    .oferta-tiempo-panel .suplencia-highlight {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .suplencia-highlight-label {
      color: var(--accent);
      font-weight: var(--font-bold);
      font-size: 12px;
      letter-spacing: 0;
    }

    .suplencia-highlight-range {
      font-weight: var(--font-bold);
      overflow-wrap: anywhere;
      color: var(--accent);
    }

    .suplencia-highlight-duration {
      justify-self: end;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      background: var(--accent);
      color: #fff;
      font-weight: var(--font-bold);
      white-space: nowrap;
      font-size: 11px;
    }

    .oferta-tiempo-row {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .oferta-tiempo-label {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--font-bold);
      letter-spacing: 0;
    }

    .oferta-tiempo-value {
      font-weight: var(--font-bold);
      overflow-wrap: anywhere;
    }

    .schedule-grouped-value {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      min-width: 0;
    }

    .schedule-group {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }

    .schedule-day-chip {
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #18804f;
      color: #fff;
      font-size: 11px;
      font-weight: var(--font-bold);
      line-height: 1;
      box-shadow: 0 0 0 2px #cdebdc;
    }

    .schedule-group-hours {
      margin-left: 3px;
      font-weight: var(--font-bold);
      color: var(--ink);
      white-space: nowrap;
    }

    .schedule-group-hours::before {
      content: "- ";
      color: var(--muted);
    }

    .schedule-group-separator {
      color: var(--muted);
      font-weight: var(--font-bold);
    }

    .suplencia-cell {
      min-width: 150px;
      vertical-align: middle;
    }

    .suplencia-cell .suplencia-highlight {
      margin: 0;
      min-width: 150px;
    }

    .card-escuela {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
    }

    .card-distrito {
      color: var(--muted);
      font-size: var(--text-xs);
    }

    .card-schedule {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin: 0;
      padding: 0;
    }

    .sched-dot {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: var(--font-bold);
      transition: all var(--transition-fast);
    }
    
    .sched-dot.active   { background: #18804f; color: #fff; box-shadow: 0 0 0 2px #cdebdc; }
    .sched-dot.inactive { background: #edf0ef; color: #a2aaa6; }

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-top: var(--space-sm);
    }

    .card-btn {
      flex: 1 1 120px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--panel);
      color: var(--accent);
      padding: var(--space-xs) var(--space-sm);
      font: inherit;
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      cursor: pointer;
      transition: all var(--transition-fast);
      text-align: center;
      text-decoration: none;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .card-btn:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      transform: scale(1.02);
    }

    .card-btn.primary {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }

    .card-btn.primary:hover {
      background: var(--accent-hover);
    }

    .offer-alert-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin: 0 0 6px;
    }

    .offer-alert-badge {
      display: inline-flex;
      align-items: center;
      min-height: 17px;
      padding: 1px 5px;
      border-radius: var(--radius-full);
      background: #f0efeb;
      color: #65615b;
      font-size: 8px;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .offer-alert-badge-new {
      background: #edf7f0;
      color: #1d6b42;
    }

    .offer-alert-badge-changed {
      background: #eef2f8;
      color: #435273;
    }

    .offer-alert-badge-seen {
      background: #f0efeb;
      color: #6b655d;
    }

    .offer-alert-badge-closing {
      background: #fff6dd;
      color: #8a5a00;
    }

    .offer-alert-badge-long {
      background: #edf7f6;
      color: #0c6c67;
    }

    .offer-alert-badge-conflict {
      background: #f8e9e4;
      color: #8a3f2d;
    }

    .offer-alert-badge-manual {
      background: #f1efea;
      color: #5f5a50;
    }

    .manual-assignment-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-top: 7px;
      padding-top: 6px;
      border-top: 1px solid color-mix(in srgb, var(--line) 72%, #fff 28%);
    }

    .manual-assignment-label {
      color: var(--muted);
      font-size: 8px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .manual-assignment-buttons {
      display: inline-flex;
      gap: 4px;
    }

    .manual-assignment-btn {
      min-height: 24px;
      padding: 3px 8px;
      border: 1px solid color-mix(in srgb, var(--line) 82%, #fff 18%);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--accent-hover);
      cursor: pointer;
      font-size: 9px;
      font-weight: var(--font-bold);
    }

    .manual-assignment-btn-danger {
      color: #8a3f2d;
    }

    .manual-assignment-add-card {
      min-height: 220px;
      border-style: dashed;
      background: color-mix(in srgb, var(--panel-subtle) 58%, var(--panel) 42%);
    }

    .manual-assignment-add-card.is-open {
      min-height: auto;
      border-style: solid;
      background: color-mix(in srgb, var(--panel-subtle) 70%, var(--panel) 30%);
    }

    .manual-assignment-add-button {
      display: flex;
      width: 100%;
      min-height: 100%;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
      padding: 18px;
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
    }

    .manual-assignment-add-button:hover strong,
    .manual-assignment-add-button:focus-visible strong {
      color: var(--accent);
    }

    .manual-assignment-add-button strong {
      color: var(--accent-hover);
      font-size: var(--text-md);
      line-height: 1.2;
    }

    .manual-assignment-add-button span:last-child {
      color: var(--muted);
      font-size: var(--text-sm);
      line-height: 1.35;
    }

    .manual-assignment-add-kicker {
      display: inline-flex;
      padding: 3px 7px;
      border-radius: var(--radius-full);
      background: #f1efea;
      color: #5f5a50;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .manual-assignment-inline-form {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
    }

    .manual-assignment-inline-head {
      display: grid;
      gap: 4px;
    }

    .manual-assignment-inline-head strong {
      color: var(--accent-hover);
      font-size: var(--text-md);
      line-height: 1.2;
    }

    .manual-assignment-inline-head span:last-child {
      color: var(--muted);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
    }

    .manual-assignment-inline-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .manual-assignment-inline-wide {
      grid-column: 1 / -1;
    }

    .manual-assignment-inline-days {
      min-height: 0;
      padding-top: 2px;
    }

    .manual-assignment-inline-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
      gap: 7px;
    }

    .manual-assignment-inline-actions .button {
      min-height: 34px;
      font-size: 10px;
    }

    .personal-status-control {
      margin-top: 7px;
      padding: 6px 0 0;
      border: 0;
      border-top: 1px solid color-mix(in srgb, var(--line) 72%, #fff 28%);
      border-radius: 0;
      background: transparent;
    }

    .personal-status-label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .personal-status-options {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .personal-status-btn {
      flex: 1 1 auto;
      min-height: 25px;
      border: 1px solid color-mix(in srgb, var(--line) 82%, #fff 18%);
      border-radius: var(--radius-full);
      background: var(--panel);
      color: var(--muted);
      cursor: pointer;
      font-size: 9px;
      font-weight: var(--font-bold);
      line-height: 1.1;
      padding: 3px 7px;
      transition: all var(--transition-fast);
    }

    .personal-status-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .personal-status-btn.is-active {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent-soft) 64%, var(--panel) 36%);
      color: var(--accent-hover);
    }

    .table-calendar-btn {
      width: auto;
      margin: 6px 0;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 10px;
    }

    .offer-card-compact {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--line) 82%, #fff 18%);
      border-radius: 9px;
      background: var(--panel);
      box-shadow: none;
    }

    .offer-card-compact:hover {
      transform: none;
      box-shadow: 0 8px 22px rgba(56, 44, 28, 0.08);
    }

    .offer-card-compact.score-urgente,
    .offer-card-compact.score-alta,
    .offer-card-compact.score-media {
      border-left-width: 1px;
      background: var(--panel);
    }

    .offer-card-compact.offer-card-designada {
      border-color: #dfc58e;
      border-left: 3px solid #b97900;
      background: var(--panel);
    }

    .offer-card-compact.offer-card-designada:hover {
      border-color: #b97900;
      box-shadow: 0 8px 22px rgba(151, 94, 0, 0.10);
    }

    .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
    }

    .card-status {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }

    .offer-card-compact .estado-dot {
      width: 9px;
      height: 9px;
      box-shadow: none;
    }

    .offer-card-compact .badge {
      padding: 2px 6px;
      border-radius: var(--radius-full);
      background: #eff0ef;
      color: #666;
      font-size: 9px;
      font-weight: 850;
    }

    .offer-card-compact .card-ige {
      line-height: 1;
    }

    .offer-card-compact .card-ige-label {
      margin-bottom: 1px;
      color: var(--muted);
      font-size: 9px;
      letter-spacing: 0;
    }

    .offer-card-compact .card-ige-value {
      font-family: Georgia, serif;
      font-size: 14px;
      color: var(--ink);
      font-weight: var(--font-bold);
    }

    .card-role {
      margin-bottom: 8px;
    }

    .card-role-row {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      min-width: 0;
    }

    .card-role h3 {
      margin: 0;
      min-width: 0;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.2;
      font-weight: var(--font-bold);
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .card-role-code {
      flex: 0 0 auto;
      padding: 2px 5px;
      border-radius: 5px;
      background: #f1eadc;
      color: #66583f;
      font-size: 9px;
      font-weight: 850;
      white-space: nowrap;
    }

    .offer-card-compact .card-nivel {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: var(--font-bold);
      text-transform: uppercase;
    }

    .card-basic-info {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      margin: 0 0 7px;
      padding: 0 0 7px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, #fff 30%);
    }

    .card-basic-info .card-data-row:last-child {
      grid-column: 1 / -1;
    }

    .card-data-row {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 6px;
      font-size: 10px;
      line-height: 1.3;
    }

    .card-data-row dt,
    .card-data-row dd {
      margin: 0;
      min-width: 0;
    }

    .card-data-row dt {
      color: var(--muted);
      font-weight: var(--font-bold);
    }

    .card-address-value {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .card-address-copy {
      flex: 1 1 auto;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .card-district-inline {
      color: var(--accent);
      font-weight: var(--font-bold);
      white-space: nowrap;
    }

    .offer-card-compact .map-link {
      flex: 0 0 auto;
      width: 25px;
      height: 25px;
      display: inline-grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent-soft) 38%, var(--panel) 62%);
      color: var(--accent);
      text-decoration: none;
    }

    .offer-card-compact .map-link svg {
      width: 13px;
      height: 13px;
      fill: currentColor;
    }

    .card-summary-grid {
      display: grid;
      grid-template-columns: 1.5fr 0.65fr 0.85fr;
      gap: 5px;
      margin-bottom: 7px;
    }

    .card-summary-item,
    .card-secondary-item {
      min-width: 0;
      border: 1px solid color-mix(in srgb, var(--line) 72%, #fff 28%);
      border-radius: 7px;
      background: var(--panel);
    }

    .card-summary-item {
      padding: 6px 7px;
    }

    .card-label {
      display: block;
      margin-bottom: 2px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .card-value {
      font-size: 10px;
      font-weight: var(--font-bold);
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .card-modules {
      color: var(--accent);
      font-size: 15px;
    }

    .card-secondary-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-bottom: 7px;
    }

    .card-secondary-item {
      padding: 5px 7px;
      background: color-mix(in srgb, var(--panel-subtle) 38%, var(--panel) 62%);
      font-size: 9px;
      line-height: 1.25;
    }

    .card-secondary-item strong {
      color: var(--muted);
    }

    .card-secondary-item-full {
      grid-column: 1 / -1;
    }

    .card-date-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 7px;
    }

    .card-date-item {
      min-width: 0;
      padding: 7px 8px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, #fff 30%);
      border-radius: 7px;
      background: color-mix(in srgb, var(--panel-subtle) 44%, var(--panel) 56%);
    }

    .card-date-closing {
      border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
      border-left: 3px solid var(--accent);
      background: color-mix(in srgb, var(--accent-soft) 34%, var(--panel) 66%);
    }

    .card-date-label {
      display: block;
      margin-bottom: 2px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }

    .card-date-closing .card-date-label {
      color: var(--accent-hover);
    }

    .card-date-value {
      display: block;
      color: var(--ink);
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
      white-space: nowrap;
    }

    .card-date-time {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 9px;
      font-weight: var(--font-bold);
    }

    .designated-info {
      margin-bottom: 7px;
      padding: 8px 9px;
      border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      background: color-mix(in srgb, var(--accent-soft) 32%, var(--panel) 68%);
    }

    .offer-card-designada .designated-info {
      border-color: #e2cfa7;
      border-left-color: #b97900;
      background: #fff8e8;
    }

    .designated-info-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .offer-card-designada .designated-info-title {
      color: #8a5a00;
    }

    .designated-match-badge {
      padding: 2px 6px;
      border-radius: var(--radius-full);
      background: var(--accent);
      color: #fff;
      font-size: 9px;
      font-weight: 850;
      white-space: nowrap;
    }

    .offer-card-designada .designated-match-badge {
      background: #b97900;
    }

    .offer-card-compact.offer-card-designada .badge {
      background: #f2e4c5;
      color: #6d4b05;
    }

    .offer-card-compact.offer-card-designada .designated-match-badge {
      background: #b97900;
      color: #fff;
    }

    .designated-info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px 8px;
    }

    .designated-info-row {
      min-width: 0;
      font-size: 9px;
      line-height: 1.25;
    }

    .designated-info-row span {
      display: block;
      color: var(--muted);
      font-weight: var(--font-bold);
    }

    .designated-info-row strong {
      display: block;
      color: var(--ink);
      overflow-wrap: anywhere;
    }

    .designated-info-detail {
      margin: var(--space-md) 0;
    }

    .card-replacement {
      margin-top: auto;
      padding: 8px 9px;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line) 68%);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      background: color-mix(in srgb, var(--accent-soft) 36%, var(--panel) 64%);
    }

    .card-replacement-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }

    .card-replacement-title {
      margin: 0;
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .card-duration {
      padding: 2px 6px;
      border-radius: var(--radius-full);
      border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line) 64%);
      background: var(--panel);
      color: var(--accent-hover);
      font-size: 9px;
      font-weight: 850;
      white-space: nowrap;
    }

    .card-replacement-dates {
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 10px;
      font-weight: var(--font-bold);
    }

    .card-schedule-list {
      display: grid;
      gap: 3px;
    }

    .card-schedule-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
      min-height: 25px;
      padding-top: 3px;
      border-top: 1px solid rgba(12, 108, 103, 0.12);
    }

    .card-schedule-row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .card-schedule-days {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }

    .card-schedule-day {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 21px;
      padding: 0 4px;
      border-radius: 6px;
      background: #16845a;
      color: #fff;
      font-size: 9px;
      font-weight: 850;
    }

    .card-schedule-time {
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }

    .card-schedule-empty {
      color: var(--muted);
      font-size: 10px;
      font-weight: var(--font-bold);
    }

    .offer-card-compact .card-actions {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-top: 7px;
    }

    .offer-card-compact .card-btn {
      min-height: 31px;
      border-radius: var(--radius-full);
      font-size: 9px;
      font-weight: 900;
    }

    .offer-card-compact .card-btn:not(.primary) {
      background: transparent;
      color: var(--accent-hover);
    }

    .offer-card-compact .card-btn:hover {
      transform: none;
    }

    @media (max-width: 540px) {
      .card-basic-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .card-data-row {
        grid-template-columns: 1fr;
        gap: 1px;
      }

      .card-basic-info .card-data-row:last-child {
        grid-column: 1 / -1;
      }

      .card-summary-grid,
      .card-date-grid,
      .card-secondary-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .card-summary-main,
      .card-date-item:last-child {
        grid-column: 1 / -1;
      }

      .card-schedule-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
      }

      .card-schedule-time {
        justify-self: end;
      }

      .offer-card-compact .card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .offer-card-compact .card-actions .card-btn:first-child {
        grid-column: 1 / -1;
      }
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-lg);
      gap: var(--space-sm);
      flex-wrap: wrap;
    }

    .panel-head-start {
      min-width: 0;
      flex: 1;
    }

    .panel-head-actions,
    .offers-actions {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
      min-width: 0;
    }

    .offers-actions {
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: auto;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .offers-actions > * {
      flex: 0 0 auto;
    }

    .offers-actions .button,
    .offers-actions a.button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-sm);
      }
    }

    @media (max-width: 768px) {
      .shell {
        padding: var(--space-lg) 0 var(--space-3xl);
      }

      .hero,
      .panel,
      .offer-card {
        border-radius: 0;
      }

      .hero {
        padding: var(--space-xl) var(--space-md);
      }

      .panel,
      .offer-card {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }

      .cards-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
      }

      .designated-person-grid {
        grid-template-columns: 1fr;
      }

      .manual-designated-grid {
        grid-template-columns: 1fr;
      }

      .manual-designated-schedule-field {
        grid-column: auto;
      }

      .manual-assignment-inline-grid,
      .manual-assignment-inline-actions {
        grid-template-columns: 1fr;
      }

      .ranking-config-actions {
        justify-content: stretch;
      }

      .ranking-config-toggle {
        width: 100%;
      }

      .ranking-config-head,
      .ranking-config-footer {
        flex-direction: column;
        align-items: stretch;
      }

      .ranking-config-grid {
        grid-template-columns: 1fr;
      }

      .designated-person-head {
        flex-direction: column;
        align-items: stretch;
      }

      .designated-info-grid {
        grid-template-columns: 1fr;
      }

      .offer-card-compact {
        border-radius: 11px;
        padding: 11px;
      }

      .zoom-control {
        bottom: var(--space-lg);
        right: var(--space-lg);
        padding: 6px;
      }
      
      .zoom-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
      }

      .toolbar input, .toolbar select {
        min-width: 100%;
      }

      .offer-card {
        padding: var(--space-sm);
      }

      .sched-dot {
        width: 26px;
        height: 26px;
        font-size: 11px;
      }
      
      #toggleConfigBtn .btn-text {
        display: none;
      }
      
      .modal-overlay {
        padding: 0;
      }
      
      .modal-content {
        max-height: 100vh;
        border-radius: 0;
      }
      
      .modal-header,
      .modal-body {
        padding: var(--space-lg);
      }
      
      .modal-header h3 {
        font-size: var(--text-lg);
      }

      .notification-prompt-content {
        border-radius: 0;
      }

      .notification-prompt-list {
        grid-template-columns: 1fr;
      }

      .notification-prompt-actions {
        justify-content: stretch;
      }

      .notification-prompt-actions .button {
        flex: 1 1 100%;
      }

      .panel-head {
        align-items: flex-start;
      }

      .panel-head-actions,
      .offers-actions {
        width: 100%;
      }

      .panel-head-actions > * {
        flex: 1 1 100%;
      }

      .offers-actions {
        gap: var(--space-xs);
      }

      .offers-actions .button,
      .offers-actions a.button {
        min-width: 44px;
        justify-content: center;
        padding: var(--space-sm);
      }

      .offers-actions .action-label {
        display: inline;
        font-size: 11px;
        line-height: 1.15;
      }
      
      .sched-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .oblea-editor {
        padding: var(--space-md);
        border-radius: var(--radius-md);
      }

      .editor-header {
        align-items: flex-start;
        gap: var(--space-sm);
      }

      .editor-header h3 {
        font-size: var(--text-md);
        line-height: 1.3;
      }

      .editor-tabs {
        margin: 0 0 var(--space-md);
      }

      .tab-btn {
        padding: var(--space-sm) var(--space-sm);
      }

      .field-label input,
      .field-label select,
      .field-label textarea {
        font-size: 16px;
      }

      .preview-grid {
        grid-template-columns: 1fr;
      }

      .editor-actions > * {
        flex: 1 1 100%;
      }
    }

    .hidden { display: none; }
    body.auth-blocked { display: none; }

    .panel-spaced { margin-top: var(--space-xl); }
    .panel-head-spaced { margin-bottom: var(--space-md); }
    .panel-head-offers {
      align-items: flex-start;
      margin-bottom: var(--space-md);
    }
    .flex-1 { flex: 1; }
    .u-m-0 { margin: 0; }
    .u-mt-xs { margin: var(--space-xs) 0 0; }
    .search-info {
      margin: var(--space-xs) 0 0;
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }
    .search-timestamp {
      font-size: 0.85em;
      margin: var(--space-sm) 0 0;
    }
    .zoom-btn-reset { font-size: 14px; }
    body.modal-open { overflow: hidden; }
    body.zoom-scale-50 { zoom: 0.5; }
    body.zoom-scale-60 { zoom: 0.6; }
    body.zoom-scale-70 { zoom: 0.7; }
    body.zoom-scale-80 { zoom: 0.8; }
    body.zoom-scale-90 { zoom: 0.9; }
    body.zoom-scale-100 { zoom: 1; }
    body.zoom-scale-110 { zoom: 1.1; }
    body.zoom-scale-120 { zoom: 1.2; }
    body.zoom-scale-130 { zoom: 1.3; }
    body.zoom-scale-140 { zoom: 1.4; }
    body.zoom-scale-150 { zoom: 1.5; }

    .inline-warning { color: var(--warn); }
    .preview-check-list {
      display: grid;
      gap: 6px;
      margin: 8px 0 12px;
    }
    .preview-check {
      padding: 8px;
      border-radius: 8px;
      border-left: 3px solid #9e9e9e;
      background: #fafafa;
    }
    .preview-check.ok {
      border-left-color: #2e7d32;
      background: #f1f8e9;
    }
    .preview-check-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .preview-check-help {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .badge-status {
      color: #fff;
      padding: 4px 12px;
    }
    .badge-status-publicada { background: #4caf50; }
    .badge-status-designada { background: #b97900; }
    .badge-status-cerrada { background: #f44336; }
    .badge-status-pendiente { background: #ff9800; }
    .badge-status-default { background: #999; }
    .estado-dot-publicada { background: #4caf50; }
    .estado-dot-designada { background: #b97900; }
    .estado-dot-cerrada { background: #f44336; }
    .estado-dot-pendiente { background: #ff9800; }
    .estado-dot-default { background: #999; }
    .badge-accent {
      background: var(--accent-soft);
      color: var(--accent);
      padding: 4px 12px;
    }
    .detail-badge-row {
      display: flex;
      gap: var(--space-sm);
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }
    .detail-grid-spaced { margin-top: var(--space-md); }
    .detail-grid-tight { margin-top: 10px; }
    .map-link {
      font-size: 16px;
      text-decoration: none;
    }
    .loading-line-tall { height: 42px; margin-top: 16px; }
    .loading-line-action { height: 32px; margin-top: 18px; }
    .empty-state-padded {
      padding: var(--space-xl);
      text-align: center;
      color: var(--muted);
    }
    .table-empty-cell { padding: var(--space-xl); }
    .table-empty-cell-centered {
      padding: var(--space-xl);
      text-align: center;
      color: var(--muted);
    }
    .stat-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: var(--panel);
    }
    .stat-card-label {
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 12px;
    }
    .stat-card-value {
      margin: 0;
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
    }
    .summary-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    .summary-list-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px dashed var(--line);
      padding: 6px 0;
    }
    .dashboard-summary-panel { padding: 12px; }
    .dashboard-summary-title {
      margin: 0 0 10px;
      font-size: 15px;
    }
    .table-school-note { color: var(--muted); }
    .table-row-badge-wrap { margin-top: 6px; }

    .auth-user-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 12px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted);
      font-size: 14px;
      box-shadow: var(--shadow-sm);
    }

    .auth-user-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .auth-user-avatar {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid color-mix(in srgb, var(--accent) 38%, #ffffff 62%);
      flex-shrink: 0;
    }

    .auth-user-info-block {
      display: grid;
      min-width: 0;
    }

    .auth-user-session-state {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--muted) 70%, var(--accent) 30%);
    }

    .auth-user-session-state::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #1fba6a;
      box-shadow: 0 0 0 4px rgba(31, 186, 106, 0.16);
    }

    .auth-user-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .auth-user-icon-btn {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--accent);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }

    .auth-user-icon-btn:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      transform: translateY(-1px);
    }

    .auth-user-icon-btn:disabled {
      cursor: not-allowed;
      opacity: 0.55;
      transform: none;
    }

    .auth-user-icon-svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .auth-user-strip-name {
      max-width: min(55vw, 420px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
    }

    .auth-user-strip-btn {
      border: 1px solid color-mix(in srgb, #d32f2f 28%, var(--line) 72%);
      background: color-mix(in srgb, #fff3f3 70%, var(--panel) 30%);
      color: #b3261e;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    }

    .auth-user-strip-btn:hover {
      background: #ffe8e8;
      border-color: color-mix(in srgb, #d32f2f 50%, #ffffff 50%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(211, 47, 47, 0.16);
    }

    .auth-user-strip-btn:disabled {
      opacity: 0.65;
      cursor: wait;
    }

    .oblea-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: var(--space-xl);
      padding: var(--space-lg) var(--space-xl);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
      margin-bottom: var(--space-xl);
      align-items: center;
    }

    .oblea-section,
    .search-section {
      display: flex;
      gap: var(--space-md);
      align-items: center;
      min-width: 0;
    }

    .oblea-section.oblea-empty,
    .search-section.search-empty {
      opacity: 0.7;
    }

    .oblea-icon,
    .search-icon {
      font-size: 28px;
      line-height: 1;
      flex-shrink: 0;
    }

    .oblea-info,
    .search-info {
      flex: 1;
      min-width: 0;
    }

    .oblea-label,
    .search-label {
      font-size: var(--text-xs);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: var(--font-semibold);
      margin-bottom: 2px;
    }

    .oblea-name {
      font-size: var(--text-lg);
      font-weight: var(--font-bold);
      color: var(--ink);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .oblea-hint,
    .search-hint {
      font-size: var(--text-sm);
      color: var(--muted);
    }

    .search-date {
      font-size: var(--text-md);
      font-weight: var(--font-semibold);
      color: var(--ink);
      margin-bottom: 4px;
    }

    .oblea-details,
    .search-details {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .oblea-chip,
    .search-chip {
      display: inline-block;
      padding: 2px 8px;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: var(--font-medium);
      white-space: nowrap;
    }

    .actions-section {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-sm);
      min-width: 0;
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-md) var(--space-lg);
      background: var(--panel);
      color: var(--accent);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .btn-secondary:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
    }

    .btn-refresh {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      background: var(--accent);
      color: white;
      border: none;
      border-radius: var(--radius-sm);
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition-fast);
      box-shadow: var(--shadow-sm);
    }

    .btn-refresh:hover:not(:disabled) {
      background: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(12, 108, 103, 0.3);
    }

    .btn-refresh:active:not(:disabled) {
      transform: translateY(0);
    }

    .btn-refresh:disabled,
    .btn-refresh.disabled {
      background: var(--muted);
      cursor: not-allowed;
      opacity: 0.5;
    }

    .btn-refresh.loading {
      cursor: wait;
    }

    .refresh-icon,
    .spinner,
    .success-icon,
    .error-icon {
      font-size: 18px;
    }

    .spinner {
      animation: oblea-header-spin 1s linear infinite;
    }

    @keyframes oblea-header-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .success-icon {
      color: #4caf50;
    }

    .error-icon {
      color: #f44336;
    }

    @media (max-width: 768px) {
      .auth-user-strip {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 12px;
      }

      .auth-user-meta {
        flex: 1 1 auto;
        min-width: 0;
      }

      .auth-user-strip-name {
        max-width: 45vw;
        font-size: 14px;
      }

      .auth-user-actions {
        flex: 0 0 auto;
      }

      .auth-user-strip-btn {
        text-align: center;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 12px;
      }

      .oblea-header {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .actions-section {
        justify-content: stretch;
      }

      .btn-secondary,
      .btn-refresh {
        width: 100%;
        justify-content: center;
      }
    }