/* ═══════════════════════════════════════════════════════════════════
   INVENTARIO ROCA — Sistema de diseño "ROCA Clásico" (v1.4)
   Colores del logo: negro #1D1D1D · verde #01B149 · crema #FBFCF1.
   Sin degradados ni brillos: superficies planas, bordes finos, una sola
   tipografía de interfaz (Source Sans 3) y serif (Source Serif 4) en
   títulos, como el logotipo.
   Cargar DESPUÉS de Bootstrap CSS y ANTES de estilos inline de página.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Marca */
  --rc-ink:        #1D1D1D;   /* negro del logo */
  --rc-ink-2:      #2E2D2A;
  --rc-sidebar:    #161616;
  --rc-green:      #01B149;   /* verde del logo: acentos y botón principal (texto negro) */
  --rc-green-600:  #019A40;
  --rc-green-700:  #0B7A39;   /* verde para texto/enlaces sobre crema (AA) */
  --rc-green-800:  #075C2A;
  --rc-green-50:   #E9F5ED;
  --rc-green-100:  #D3ECDC;
  --rc-cream:      #FBFCF1;   /* crema del logo: texto sobre negro */
  --rc-cream-dim:  #C9C5B6;

  /* Neutros cálidos */
  --rc-bg:         #F4F1E8;   /* fondo crema */
  --rc-surface:    #FFFEFA;   /* tarjetas */
  --rc-surface-2:  #FAF7EF;   /* cabeceras de tabla, hovers */
  --rc-line:       #E6E1D3;
  --rc-line-2:     #D6D0BE;
  --rc-text:       #26241F;
  --rc-muted:      #6E6A5E;
  --rc-subtle:     #9A9587;

  /* Estados (tonos sobrios) */
  --rc-danger:     #B42318;  --rc-danger-50: #FBE9E6;  --rc-danger-700: #8F1C13;
  --rc-warn:       #B7791F;  --rc-warn-50:   #FAF0DA;  --rc-warn-700:   #6F470C;
  --rc-stone-50:   #EEEBE2;  --rc-stone-700: #4B4840;
  --rc-info-50:    #E8EFEB;  --rc-info-700:  #2F5244;

  --rc-font:       'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rc-serif:      'Source Serif 4', Georgia, 'Times New Roman', serif;
  --rc-mono:       'Cascadia Mono', 'Consolas', 'SFMono-Regular', monospace;

  --rc-r-sm: 6px;  --rc-r: 10px;  --rc-r-lg: 12px;
  --rc-shadow-sm: 0 1px 2px rgba(29,29,29,.05);
  --rc-shadow:    0 1px 3px rgba(29,29,29,.07), 0 1px 2px rgba(29,29,29,.04);
  --rc-shadow-lg: 0 16px 40px rgba(29,29,29,.16);
  --rc-ease: 160ms ease;

  /* Compatibilidad con estilos inline existentes */
  --primario:        var(--rc-green-700);
  --primario-dark:   var(--rc-green-800);
  --primario-light:  var(--rc-green-50);
  --primario-rgb:    11, 122, 57;
  --font-ui:         var(--rc-font);
  --color-bg:        var(--rc-bg);
  --color-surface:   var(--rc-surface);
  --color-surface-alt: var(--rc-surface-2);
  --color-border:    var(--rc-line);
  --color-text:      var(--rc-text);
  --color-muted:     var(--rc-muted);
  --color-dark:      var(--rc-ink);
  --shadow-xs: var(--rc-shadow-sm); --shadow-sm: var(--rc-shadow); --shadow-md: var(--rc-shadow); --shadow-lg: var(--rc-shadow-lg);
  --radius-sm: var(--rc-r-sm); --radius-md: var(--rc-r); --radius-lg: var(--rc-r-lg); --radius-xl: var(--rc-r-lg); --radius-pill: 9999px;
  --transition: var(--rc-ease);

  /* Tema de Bootstrap 5.3 */
  --bs-body-font-family: var(--rc-font);
  --bs-body-bg: var(--rc-bg);
  --bs-body-color: var(--rc-text);
  --bs-border-color: var(--rc-line);
  --bs-secondary-color: var(--rc-muted);
  --bs-link-color: var(--rc-green-700);
  --bs-link-color-rgb: 11, 122, 57;
  --bs-link-hover-color: var(--rc-green-800);
  --bs-link-hover-color-rgb: 7, 92, 42;
  --bs-primary: #0B7A39;   --bs-primary-rgb: 11, 122, 57;
  --bs-success: #01B149;   --bs-success-rgb: 1, 177, 73;
  --bs-danger:  #B42318;   --bs-danger-rgb: 180, 35, 24;
  --bs-warning: #B7791F;   --bs-warning-rgb: 183, 121, 31;
  --bs-info:    #3F6B5A;   --bs-info-rgb: 63, 107, 90;
  --bs-secondary: #6E6A5E; --bs-secondary-rgb: 110, 106, 94;
  --bs-dark:    #1D1D1D;   --bs-dark-rgb: 29, 29, 29;
  --bs-light:   #FAF7EF;   --bs-light-rgb: 250, 247, 239;
  --bs-border-radius: var(--rc-r-sm);
  --bs-border-radius-lg: var(--rc-r);
  --bs-focus-ring-color: rgba(1, 177, 73, .30);
}

/* ── 2. BASE & A11Y ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rc-font);
  background: var(--rc-bg);
  color: var(--rc-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--rc-ink); letter-spacing: -.01em; }
h1, h2, h3, .h1, .h2, .h3, .modal-title { font-family: var(--rc-serif); font-weight: 600; }
a { color: var(--rc-green-700); text-underline-offset: 2px; }
a:hover { color: var(--rc-green-800); }
code { color: var(--rc-green-700); font-family: var(--rc-mono); }
.text-muted { color: var(--rc-muted) !important; }
.text-success { color: var(--rc-green-700) !important; }
.text-primary { color: var(--rc-green-700) !important; }
.text-danger  { color: var(--rc-danger) !important; }
.text-warning { color: var(--rc-warn) !important; }
.fw-bold { font-weight: 600 !important; }
::selection { background: var(--rc-green-100); color: var(--rc-ink); }

.skip-to-main {
  position: absolute; top: -999px; left: 1rem;
  background: var(--rc-ink); color: var(--rc-cream);
  padding: .5rem 1.25rem; border-radius: 0 0 var(--rc-r-sm) var(--rc-r-sm);
  font-weight: 600; font-size: .875rem; z-index: 10000; text-decoration: none;
}
.skip-to-main:focus { top: 0; color: var(--rc-cream); }

:focus-visible { outline: 2px solid var(--rc-green) !important; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none !important; }

/* ── 3. NAVBAR (páginas antiguas) ──────────────────────────────────── */
.navbar { background: var(--rc-ink) !important; box-shadow: none !important; border-bottom: 2px solid var(--rc-green); }
.navbar-brand { font-weight: 700; color: var(--rc-cream) !important; }

/* ── 4. CARDS ──────────────────────────────────────────────────────── */
.card {
  --bs-card-border-radius: var(--rc-r);
  --bs-card-inner-border-radius: calc(var(--rc-r) - 1px);
  --bs-card-bg: var(--rc-surface);
  border: 1px solid var(--rc-line) !important;
  border-radius: var(--rc-r) !important;
  box-shadow: var(--rc-shadow-sm) !important;
  background: var(--rc-surface);
}
.card-header {
  border-bottom: 2px solid var(--rc-green) !important;
  padding: .8rem 1.25rem;
  background: var(--rc-surface-2);
}
.card-header h5, .card-header h6 { font-family: var(--rc-serif); font-weight: 600; letter-spacing: 0; }
.card-footer { background: var(--rc-surface-2) !important; border-top: 1px solid var(--rc-line) !important; }

/* ── 5. STAT / ACTION CARDS (legado) ───────────────────────────────── */
.stat-card { background: var(--rc-surface); border-radius: var(--rc-r) !important; padding: 1.25rem; border: 1px solid var(--rc-line) !important; box-shadow: var(--rc-shadow-sm) !important; height: 100%; }
.stat-card h3 { font-size: 1.9rem; font-weight: 600; color: var(--rc-ink); margin-bottom: .25rem; line-height: 1.1; font-family: var(--rc-serif); }
.action-card { background: var(--rc-surface); border: 1px solid var(--rc-line) !important; border-radius: var(--rc-r) !important; padding: 1.25rem; display: block; text-decoration: none !important; height: 100%; transition: border-color var(--rc-ease), background var(--rc-ease); }
.action-card:hover { border-color: var(--rc-green) !important; background: var(--rc-surface-2); }
.action-card h5 { color: var(--rc-ink); font-weight: 600; margin-bottom: .25rem; }
.action-card p { color: var(--rc-muted); font-size: .875rem; margin: 0; }
.action-card .stat-icon { margin-bottom: 1rem; }

/* ── 6. TABLES ─────────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--rc-surface-2); color: var(--rc-text); }
.table thead th, .table-light th {
  background: var(--rc-surface-2) !important;
  color: var(--rc-muted) !important;
  font-size: .72rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem 1rem !important;
  border-bottom: 1px solid var(--rc-line-2) !important;
  white-space: nowrap;
}
.table-light { --bs-table-bg: var(--rc-surface-2); --bs-table-color: var(--rc-muted); }
.table tbody tr { transition: background var(--rc-ease); }
.table-hover tbody tr:hover > *, .table tbody tr:hover { background-color: var(--rc-surface-2) !important; }
.table tbody td { padding: .7rem 1rem !important; border-color: var(--rc-line) !important; font-size: .9rem; vertical-align: middle !important; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: none !important; }

.ne-code {
  background: var(--rc-stone-50); color: var(--rc-ink) !important;
  font-family: var(--rc-mono); font-weight: 600; font-size: .8rem;
  padding: 2px 8px; border-radius: var(--rc-r-sm); display: inline-block;
}

/* ── 7. BADGES — tonos suaves, legibles ───────────────────────────── */
.badge {
  font-size: .72rem !important; font-weight: 600 !important;
  padding: .32em .7em !important; border-radius: var(--rc-r-sm) !important;
  letter-spacing: .01em;
}
.badge.bg-success   { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important; }
.badge.bg-danger    { background: var(--rc-danger-50) !important; color: var(--rc-danger-700) !important; }
.badge.bg-warning   { background: var(--rc-warn-50) !important;   color: var(--rc-warn-700) !important; }
.badge.bg-secondary { background: var(--rc-stone-50) !important;  color: var(--rc-stone-700) !important; }
.badge.bg-info      { background: var(--rc-info-50) !important;   color: var(--rc-info-700) !important; }
.badge.bg-primary   { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important; }
.badge.bg-dark      { background: var(--rc-ink) !important;       color: var(--rc-cream) !important; }
.badge.bg-light     { background: var(--rc-surface-2) !important; color: var(--rc-ink) !important; border: 1px solid var(--rc-line) !important; }

.badge-activo        { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important; }
.badge-dañado        { background: var(--rc-danger-50) !important; color: var(--rc-danger-700) !important; }
.badge-reparacion    { background: var(--rc-warn-50) !important;   color: var(--rc-warn-700) !important; }
.badge-reemplazado   { background: var(--rc-stone-50) !important;  color: var(--rc-stone-700) !important; }
.badge-almacenado    { background: var(--rc-stone-50) !important;  color: var(--rc-stone-700) !important; }
.badge-mantenimiento { background: var(--rc-warn-50) !important;   color: var(--rc-warn-700) !important; }
.ab-Asignado    { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important; }
.ab-Desasignado { background: var(--rc-stone-50) !important;  color: var(--rc-stone-700) !important; }
.ab-Dañado      { background: var(--rc-danger-50) !important; color: var(--rc-danger-700) !important; }
.ab-Reparado    { background: var(--rc-info-50) !important;   color: var(--rc-info-700) !important; }
.eb-Activo      { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important; }
.eb-Dañado      { background: var(--rc-danger-50) !important; color: var(--rc-danger-700) !important; }
.eb-Sin-asignar { background: var(--rc-stone-50) !important;  color: var(--rc-stone-700) !important; }

/* Rellenos de barras / puntos (no badges) */
.bg-success { background-color: var(--rc-green) !important; }
.bg-danger  { background-color: var(--rc-danger) !important; }
.bg-warning { background-color: var(--rc-warn) !important; }
.bg-info    { background-color: var(--bs-info) !important; }

/* ── 8. BUTTONS ────────────────────────────────────────────────────── */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--rc-r-sm);
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(1,177,73,.28);
  font-family: var(--rc-font); letter-spacing: .01em;
  transition: background-color var(--rc-ease), border-color var(--rc-ease), color var(--rc-ease);
}
.btn.rounded-3, .btn.rounded-pill { border-radius: var(--rc-r-sm) !important; }
/* Principal: verde de marca con texto negro (como "GOLF" en el logo) */
.btn-success, .btn-primary {
  --bs-btn-color: var(--rc-ink); --bs-btn-bg: var(--rc-green); --bs-btn-border-color: var(--rc-green);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: var(--rc-green-600); --bs-btn-hover-border-color: var(--rc-green-600);
  --bs-btn-active-color: var(--rc-ink); --bs-btn-active-bg: var(--rc-green-600); --bs-btn-active-border-color: var(--rc-green-600);
  --bs-btn-disabled-color: var(--rc-ink); --bs-btn-disabled-bg: var(--rc-green); --bs-btn-disabled-border-color: var(--rc-green);
}
.btn-success.text-white, .btn-primary.text-white { color: var(--rc-ink) !important; }
.btn-dark {
  --bs-btn-color: var(--rc-cream); --bs-btn-bg: var(--rc-ink); --bs-btn-border-color: var(--rc-ink);
  --bs-btn-hover-color: var(--rc-cream); --bs-btn-hover-bg: var(--rc-ink-2); --bs-btn-hover-border-color: var(--rc-ink-2);
  --bs-btn-active-bg: var(--rc-ink-2); --bs-btn-active-color: var(--rc-cream);
}
/* Secundario (p.ej. "Cancelar"): no compite con la acción principal */
.btn-secondary {
  --bs-btn-color: var(--rc-ink); --bs-btn-bg: var(--rc-surface); --bs-btn-border-color: var(--rc-line-2);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: var(--rc-surface-2); --bs-btn-hover-border-color: var(--rc-ink);
  --bs-btn-active-color: var(--rc-ink); --bs-btn-active-bg: var(--rc-surface-2); --bs-btn-active-border-color: var(--rc-ink);
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--rc-danger); --bs-btn-border-color: var(--rc-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--rc-danger-700); --bs-btn-hover-border-color: var(--rc-danger-700);
}
.btn-warning {
  --bs-btn-color: var(--rc-ink); --bs-btn-bg: #E6B04A; --bs-btn-border-color: #E6B04A;
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: #D9A036; --bs-btn-hover-border-color: #D9A036;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #325747; --bs-btn-hover-border-color: #325747;
}
.btn-outline-secondary, .btn-outline-dark, .btn-light {
  --bs-btn-color: var(--rc-ink); --bs-btn-bg: var(--rc-surface); --bs-btn-border-color: var(--rc-line-2);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: var(--rc-surface-2); --bs-btn-hover-border-color: var(--rc-ink);
  --bs-btn-active-color: var(--rc-ink); --bs-btn-active-bg: var(--rc-surface-2); --bs-btn-active-border-color: var(--rc-ink);
}
.btn-outline-success, .btn-outline-primary {
  --bs-btn-color: var(--rc-green-700); --bs-btn-bg: transparent; --bs-btn-border-color: var(--rc-green-700);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: var(--rc-green); --bs-btn-hover-border-color: var(--rc-green);
  --bs-btn-active-color: var(--rc-ink); --bs-btn-active-bg: var(--rc-green); --bs-btn-active-border-color: var(--rc-green);
}
.btn-outline-danger {
  --bs-btn-color: var(--rc-danger); --bs-btn-border-color: rgba(180,35,24,.45);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--rc-danger); --bs-btn-hover-border-color: var(--rc-danger);
}
.btn-outline-warning {
  --bs-btn-color: var(--rc-warn-700); --bs-btn-border-color: rgba(183,121,31,.5);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: #E6B04A; --bs-btn-hover-border-color: #E6B04A;
}
.btn-outline-light {
  --bs-btn-color: var(--rc-cream); --bs-btn-border-color: rgba(251,252,241,.35);
  --bs-btn-hover-color: var(--rc-ink); --bs-btn-hover-bg: var(--rc-cream); --bs-btn-hover-border-color: var(--rc-cream);
}
.btn-link { --bs-btn-color: var(--rc-green-700); --bs-btn-hover-color: var(--rc-green-800); }

/* ── 9. FORMS ──────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: #fff;
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-sm) !important;
  font-size: .9rem; color: var(--rc-text);
  transition: border-color var(--rc-ease), box-shadow var(--rc-ease);
}
.form-control::placeholder { color: var(--rc-subtle); }
.form-control:focus, .form-select:focus {
  border-color: var(--rc-green) !important;
  box-shadow: 0 0 0 3px rgba(1,177,73,.16) !important;
}
.form-label { font-size: .82rem; color: var(--rc-ink); }
.form-check-input:checked { background-color: var(--rc-green); border-color: var(--rc-green); }
.form-check-input:focus { border-color: var(--rc-green); box-shadow: 0 0 0 3px rgba(1,177,73,.2); }
.input-group-text { background: var(--rc-surface-2); border-color: var(--rc-line-2); color: var(--rc-muted); }

/* ── 10. ALERTS ────────────────────────────────────────────────────── */
.alert {
  border: 1px solid transparent !important; border-left-width: 3px !important;
  border-radius: var(--rc-r-sm) !important; font-size: .9rem;
}
.alert-success { background: var(--rc-green-50) !important;  color: var(--rc-green-800) !important;  border-color: var(--rc-green-100) !important;  border-left-color: var(--rc-green) !important; }
.alert-danger  { background: var(--rc-danger-50) !important; color: var(--rc-danger-700) !important; border-color: #F3CFC9 !important;              border-left-color: var(--rc-danger) !important; }
.alert-warning { background: var(--rc-warn-50) !important;   color: var(--rc-warn-700) !important;   border-color: #F0DDB3 !important;              border-left-color: var(--rc-warn) !important; }
.alert-secondary, .alert-light, .alert-dark { background: var(--rc-stone-50) !important; color: var(--rc-stone-700) !important; border-color: var(--rc-line) !important; border-left-color: var(--rc-line-2) !important; }
.alert-info    { background: var(--rc-info-50) !important;   color: var(--rc-info-700) !important;   border-color: #D3DFD8 !important;              border-left-color: var(--bs-info) !important; }

/* ── 11. MODALS ────────────────────────────────────────────────────── */
.modal-backdrop.show { opacity: .45; }
.modal-content {
  border: 1px solid var(--rc-line) !important;
  border-radius: var(--rc-r-lg) !important;
  box-shadow: var(--rc-shadow-lg) !important;
  background: var(--rc-surface);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--rc-line) !important; padding: 1rem 1.25rem; }
.modal-header[style*="--rc-ink"] { border-bottom: 2px solid var(--rc-green) !important; }
.modal-header[style*="--rc-ink"] .modal-title, .modal-header[style*="--rc-ink"] h5 { color: var(--rc-cream) !important; }
.modal-title { font-size: 1.1rem; }
.modal-footer { border-top: 1px solid var(--rc-line) !important; background: var(--rc-surface-2); }
.modal-body { font-size: .9rem; }
.btn-close:focus { box-shadow: 0 0 0 3px rgba(1,177,73,.28); }

/* ── 12. FILTER PANEL ──────────────────────────────────────────────── */
.filtros-panel { background: var(--rc-surface); border-radius: var(--rc-r); padding: 1.1rem 1.25rem; border: 1px solid var(--rc-line); margin-bottom: 1.5rem; }

/* ── 13. ODÓMETRO TRACK ────────────────────────────────────────────── */
.odo-track { height: 6px; background: var(--rc-line); border-radius: 3px; overflow: hidden; min-width: 80px; }
.odo-track > div { height: 100%; border-radius: 3px; transition: width .4s ease; }
.odo-mini-track { height: 4px; background: var(--rc-line); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.odo-mini-track > div { height: 100%; border-radius: 2px; }

/* ── 14. NOTIFICACIONES (legado) ───────────────────────────────────── */
.notif-panel { background: var(--rc-surface); border-radius: var(--rc-r); border: 1px solid var(--rc-line); overflow: hidden; }
.notif-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rc-line); }
.notif-item:last-child { border-bottom: none; }
.notif-item.no-leida { background: var(--rc-surface-2); }

/* ── 15. TABS ──────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--rc-line-2) !important; gap: 4px; }
.nav-tabs .nav-link {
  color: var(--rc-muted) !important; font-weight: 600 !important;
  background: none !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  padding: .6rem 1rem !important; margin: 0 0 -1px !important;
  transition: color var(--rc-ease), border-color var(--rc-ease);
}
.nav-tabs .nav-link:hover { color: var(--rc-ink) !important; }
.nav-tabs .nav-link.active { color: var(--rc-ink) !important; border-bottom-color: var(--rc-green) !important; }
.nav-pills .nav-link.active { background: var(--rc-ink); color: var(--rc-cream); }

/* ── 16. DROP ZONE (reportes.php) ──────────────────────────────────── */
.drop-zone {
  border: 1.5px dashed var(--rc-line-2) !important; border-radius: var(--rc-r) !important;
  padding: 2.25rem 1.5rem; text-align: center; cursor: pointer;
  transition: border-color var(--rc-ease), background var(--rc-ease);
  background: var(--rc-surface-2) !important;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--rc-green) !important; background: var(--rc-green-50) !important; }

/* ── 17. WORKER / MOBILE (clases compartidas) ──────────────────────── */
.activo-card {
  background: var(--rc-surface); border: 1px solid var(--rc-line);
  border-radius: var(--rc-r); padding: 12px 14px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: border-color var(--rc-ease), background var(--rc-ease);
  border-left: 3px solid var(--rc-line-2);
}
.activo-card:hover { background: var(--rc-surface-2); }
.activo-card.estado-Activo        { border-left-color: var(--rc-green); }
.activo-card.estado-Dañado        { border-left-color: var(--rc-danger); }
.activo-card.estado-Reparacion    { border-left-color: var(--rc-warn); }
.activo-card.estado-Baja          { border-left-color: var(--rc-stone-700); }
.activo-card.estado-Almacenado    { border-left-color: var(--rc-subtle); }
.activo-card.estado-Mantenimiento { border-left-color: var(--rc-warn); }
.activo-card.odo-alerta           { background: #FDF6F4; border-left-color: var(--rc-danger) !important; }
.activo-img             { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--rc-surface-2); }
.activo-img-placeholder { width: 48px; height: 48px; border-radius: 8px; background: var(--rc-surface-2); border: 1px solid var(--rc-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--rc-muted); }

/* ── 18. PROYECTO CHIP ─────────────────────────────────────────────── */
.proyecto-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--rc-green-50); color: var(--rc-green-800); font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: var(--rc-r-sm); }

/* ── 19. PREVIEW TABLE (reportes) ──────────────────────────────────── */
.table-preview th { background: var(--rc-ink) !important; color: var(--rc-cream) !important; position: sticky; top: 0; z-index: 10; white-space: nowrap; font-size: .75rem; }

/* ── 20. RESPONSIVE (legado) ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .page-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
  .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
  .filtros-panel { padding: 1rem; }
}
@media (max-width: 575.98px) {
  body { font-size: 14px; }
  .container-fluid { padding-left: .875rem !important; padding-right: .875rem !important; }
  .table-responsive { font-size: .85rem; }
}

/* ── 21. IMÁGENES ──────────────────────────────────────────────────── */
.img-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--rc-r-sm); background: var(--rc-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qr-thumb { width: 44px; height: 44px; cursor: pointer; border-radius: 4px; border: 1px solid var(--rc-line); background: #fff; transition: border-color var(--rc-ease); }
.qr-thumb:hover { border-color: var(--rc-ink); }

/* ── 21b. ESCÁNER QR (html5-qrcode) — común a worker.php y solicitudes.php ── */
#trp-qr-reader { border: 0 !important; border-radius: var(--rc-r-lg) !important; overflow: hidden !important; background: #000; box-shadow: 0 0 0 1px var(--rc-line-2); margin: 0 auto; }
#trp-qr-reader video { display: block; width: 100% !important; height: auto; }
#trp-qr-reader img, #trp-qr-reader__header_message, #trp-qr-reader__dashboard_section_csr > span { display: none !important; }
#qr-shaded-region > div { background-color: var(--rc-green) !important; }

/* ── 22. TOASTS ────────────────────────────────────────────────────── */
.toast { background: var(--rc-ink) !important; color: var(--rc-cream) !important; border: none !important; border-left: 4px solid var(--rc-green) !important; border-radius: var(--rc-r-sm) !important; box-shadow: var(--rc-shadow-lg); }
.toast.bg-danger  { border-left-color: #E5564A !important; }
.toast.bg-warning { border-left-color: #E6B04A !important; }

/* ═══════════════════════════════════════════════════════════════════
   ROCA SHELL — Sidebar + Topbar + componentes del panel (prefijo rc-)
   ═══════════════════════════════════════════════════════════════════ */
.rc-layout { display: flex; min-height: 100vh; width: 100%; }

/* SIDEBAR */
.rc-sidebar {
  width: 248px; flex-shrink: 0; background: var(--rc-sidebar); color: var(--rc-cream);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid #000;
}
.rc-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px 20px; border-bottom: 1px solid rgba(251,252,241,.08); }
.rc-brand-img { width: 118px; height: auto; display: block; }
.rc-brand-title { font-family: var(--rc-serif); font-weight: 600; font-size: 1.02rem; color: var(--rc-cream); letter-spacing: .01em; line-height: 1.2; }
.rc-brand-sub { font-size: .7rem; color: var(--rc-cream-dim); letter-spacing: .14em; text-transform: uppercase; }
.rc-nav-wrap { padding: 16px 12px; flex: 1; overflow-y: auto; }
.rc-nav-label { font-size: .66rem; font-weight: 600; letter-spacing: .14em; color: #8E8A7E; text-transform: uppercase; padding: 0 12px 8px; }
.rc-nav { display: flex; flex-direction: column; gap: 1px; }
.rc-nav-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--rc-r-sm);
  font-size: .9rem; font-weight: 500; color: var(--rc-cream-dim) !important; text-decoration: none;
  transition: background var(--rc-ease), color var(--rc-ease);
}
.rc-nav-link i { font-size: 1rem; width: 20px; text-align: center; opacity: .85; }
.rc-nav-link span { flex: 1; }
.rc-nav-link:hover { background: rgba(251,252,241,.06); color: var(--rc-cream) !important; }
.rc-nav-link.active { background: rgba(251,252,241,.08); color: var(--rc-cream) !important; font-weight: 600; }
.rc-nav-link.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rc-green); }
.rc-nav-link.active i { color: var(--rc-green); opacity: 1; }
.rc-nav-badge { background: var(--rc-green); color: var(--rc-ink); font-size: .68rem; font-weight: 700; padding: 0 7px; border-radius: 9px; line-height: 18px; font-variant-numeric: tabular-nums; }
.rc-sidebar-foot { padding: 14px 12px 18px; border-top: 1px solid rgba(251,252,241,.08); display: flex; flex-direction: column; gap: 10px; }
.rc-version { font-size: .72rem; color: #8E8A7E; padding: 0 12px; letter-spacing: .02em; }
.rc-logout {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--rc-r-sm);
  color: var(--rc-cream-dim) !important; font-size: .9rem; font-weight: 500; text-decoration: none;
  transition: background var(--rc-ease), color var(--rc-ease);
}
.rc-logout i { width: 20px; text-align: center; }
.rc-logout:hover { background: rgba(251,252,241,.06); color: var(--rc-cream) !important; }

/* MAIN + TOPBAR */
.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--rc-surface); border-bottom: 1px solid var(--rc-line);
  padding: 12px 32px; min-height: 68px; display: flex; align-items: center; gap: 18px;
}
.rc-tb-titles { flex-shrink: 0; min-width: 0; }
.rc-tb-title { font-family: var(--rc-serif); font-size: 1.4rem; font-weight: 600; color: var(--rc-ink); line-height: 1.15; }
.rc-tb-sub { font-size: .78rem; color: var(--rc-muted); }
.rc-hamb { display: none; width: 40px; height: 40px; border-radius: var(--rc-r-sm); border: 1px solid var(--rc-line-2); background: var(--rc-surface); color: var(--rc-ink); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; }
.rc-search { flex: 1; max-width: 400px; margin-left: auto; position: relative; }
.rc-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--rc-subtle); font-size: .9rem; }
.rc-search input { width: 100%; border: 1px solid var(--rc-line-2); background: var(--rc-surface-2); border-radius: var(--rc-r-sm); padding: 9px 14px 9px 36px; font-size: .88rem; font-family: inherit; color: var(--rc-text); outline: none; transition: border-color var(--rc-ease), box-shadow var(--rc-ease), background var(--rc-ease); }
.rc-search input::placeholder { color: var(--rc-subtle); }
.rc-search input:focus { border-color: var(--rc-green); background: #fff; box-shadow: 0 0 0 3px rgba(1,177,73,.14); }
.rc-iconbtn { position: relative; width: 40px; height: 40px; border-radius: var(--rc-r-sm); border: 1px solid var(--rc-line-2); background: var(--rc-surface); cursor: pointer; color: var(--rc-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; text-decoration: none; transition: border-color var(--rc-ease), background var(--rc-ease); }
.rc-iconbtn:hover { border-color: var(--rc-ink); background: var(--rc-surface-2); color: var(--rc-ink); }
.rc-dot { position: absolute; top: -6px; right: -6px; background: var(--rc-green); color: var(--rc-ink); font-size: .64rem; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--rc-surface); padding: 0 4px; }
.rc-user { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--rc-line); flex-shrink: 0; }
.rc-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--rc-ink); color: var(--rc-cream); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .82rem; letter-spacing: .02em; }
.rc-user-meta .n { font-size: .86rem; font-weight: 600; line-height: 1.15; color: var(--rc-ink); }
.rc-user-meta .r { font-size: .74rem; color: var(--rc-muted); }

.rc-content { padding: 28px 32px 48px; }
.rc-content > .container, .rc-content > .container-fluid { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.rc-content > div > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.rc-backdrop { display: none; position: fixed; inset: 0; background: rgba(22,22,22,.45); z-index: 35; }

/* Encabezado de página */
.rc-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.rc-page-head h1 { font-family: var(--rc-serif); font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--rc-ink); }
.rc-page-head .sub { font-size: .85rem; color: var(--rc-muted); margin-top: 2px; }

/* RESPONSIVE SHELL */
@media (max-width: 991.98px) {
  .rc-hamb { display: flex; }
  .rc-sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .22s ease; }
  .rc-sidebar.rc-open { transform: translateX(0); }
  .rc-backdrop.show { display: block; }
  .rc-topbar { padding: 10px 16px; min-height: 60px; }
  .rc-content { padding: 20px 16px 36px; }
  .rc-search { max-width: none; }
  .rc-user-meta { display: none; }
  .rc-user { padding-left: 10px; }
}
@media (max-width: 520px) {
  .rc-tb-title { font-size: 1.15rem; }
  .rc-tb-sub { display: none; }
  .rc-search { display: none; }
  .rc-topbar .rc-user { margin-left: auto; }
}

/* ── DASHBOARD (admin.php) ─────────────────────────────────────────── */
.rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.rc-scard { background: var(--rc-surface); border: 1px solid var(--rc-line); border-radius: var(--rc-r); padding: 18px 20px; box-shadow: var(--rc-shadow-sm); }
.rc-scard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rc-sicon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--rc-surface-2); color: var(--rc-ink); border: 1px solid var(--rc-line); }
.rc-trend { font-size: .76rem; font-weight: 600; color: var(--rc-muted); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.rc-sval { font-family: var(--rc-serif); font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--rc-ink); font-variant-numeric: tabular-nums; }
.rc-slabel { font-size: .84rem; color: var(--rc-muted); font-weight: 500; margin-top: 6px; }
.rc-sbar { height: 4px; background: var(--rc-line); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.rc-sbar > div { height: 100%; border-radius: 2px; }
/* Iconos y barras monocromáticos (antes: verde/índigo/ámbar/morado) */
.i-green, .i-indigo { background: var(--rc-surface-2); color: var(--rc-ink); }
.i-amber { background: var(--rc-warn-50); color: var(--rc-warn-700); border-color: #F0DDB3 !important; }
.t-up { color: var(--rc-green-700); } .t-indigo { color: var(--rc-muted); } .t-amber { color: var(--rc-warn-700); }
.bar-green { background: var(--rc-green); } .bar-indigo { background: var(--rc-ink); } .bar-amber { background: var(--rc-warn); }

.rc-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.rc-panel { background: var(--rc-surface); border: 1px solid var(--rc-line); border-radius: var(--rc-r); box-shadow: var(--rc-shadow-sm); overflow: hidden; }
.rc-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rc-line); }
.rc-panel-title { font-family: var(--rc-serif); font-size: 1.05rem; font-weight: 600; color: var(--rc-ink); }
.rc-panel-sub { font-size: .8rem; color: var(--rc-muted); margin-top: 1px; }
.rc-side-col { display: flex; flex-direction: column; gap: 20px; }

.rc-btn {
  border: 1px solid var(--rc-line-2); background: var(--rc-surface); color: var(--rc-ink);
  font-family: inherit; font-size: .86rem; font-weight: 600; padding: 7px 14px; border-radius: var(--rc-r-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none;
  transition: border-color var(--rc-ease), background var(--rc-ease), color var(--rc-ease);
}
.rc-btn:hover { border-color: var(--rc-ink); background: var(--rc-surface-2); color: var(--rc-ink); }
.rc-btn:disabled { opacity: .6; cursor: default; }
.rc-btn-primary { border-color: var(--rc-green); background: var(--rc-green); color: var(--rc-ink) !important; }
.rc-btn-primary:hover { border-color: var(--rc-green-600); background: var(--rc-green-600); color: var(--rc-ink) !important; }

.rc-tbl-wrap { overflow-x: auto; }
table.rc-tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.rc-tbl thead tr { background: var(--rc-surface-2); }
.rc-tbl th { text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rc-muted); padding: 11px 20px; border-bottom: 1px solid var(--rc-line-2); }
.rc-tbl th.mid { padding: 11px 14px; }
.rc-tbl td { padding: 12px 14px; border-top: 1px solid var(--rc-line); font-variant-numeric: tabular-nums; }
.rc-tbl td.pad { padding: 12px 20px; }
.rc-tbl tbody tr { transition: background var(--rc-ease); }
.rc-tbl tbody tr:hover { background: var(--rc-surface-2); }
.rc-chip { background: var(--rc-stone-50); color: var(--rc-ink); font-family: var(--rc-mono); font-weight: 600; font-size: .8rem; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--rc-line); }
.rc-asset { display: flex; align-items: center; gap: 12px; }
.rc-thumb { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; border: 1px solid var(--rc-line); }
.t-ok { background: var(--rc-surface-2); color: var(--rc-ink); }
.t-danado { background: var(--rc-danger-50); color: var(--rc-danger); border-color: #F3CFC9; }
.t-mant { background: var(--rc-warn-50); color: var(--rc-warn-700); border-color: #F0DDB3; }
.rc-aname { font-weight: 600; font-size: .9rem; line-height: 1.25; color: var(--rc-ink); }
.rc-acat { font-size: .78rem; color: var(--rc-muted); }
.rc-resp { font-size: .86rem; font-weight: 500; color: var(--rc-text); }
.rc-loc { font-size: .78rem; color: var(--rc-muted); }
.rc-be { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.rc-be i { font-size: .45rem; }
.e-activo  { background: var(--rc-green-50);  color: var(--rc-green-800); }
.e-activo i { color: var(--rc-green); }
.e-danado  { background: var(--rc-danger-50); color: var(--rc-danger-700); }
.e-mant    { background: var(--rc-warn-50);   color: var(--rc-warn-700); }
.e-almacen { background: var(--rc-stone-50);  color: var(--rc-stone-700); }
.e-baja    { background: #E6E3DA; color: #55524A; }
.rc-odobar { height: 5px; background: var(--rc-line); border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.rc-odobar > div { height: 100%; border-radius: 3px; }
.rc-odotxt { font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.odo-green { color: var(--rc-green-700); } .odo-green > div { background: var(--rc-green); }
.odo-blue  { color: var(--rc-info-700); }  .odo-blue > div  { background: var(--bs-info); }
.odo-amber { color: var(--rc-warn-700); }  .odo-amber > div { background: var(--rc-warn); }
.odo-red   { color: var(--rc-danger); }    .odo-red > div   { background: var(--rc-danger); }

.rc-notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--rc-line); transition: background var(--rc-ease); }
.rc-notif:last-child { border-bottom: none; }
.rc-notif.unread { background: var(--rc-surface-2); box-shadow: inset 3px 0 0 var(--rc-green); }
.rc-notif-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; background: var(--rc-surface-2); color: var(--rc-ink); border: 1px solid var(--rc-line); }
.ni-green, .ni-indigo { background: var(--rc-surface-2); color: var(--rc-ink); }
.ni-amber { background: var(--rc-warn-50); color: var(--rc-warn-700); border-color: #F0DDB3; }
.ni-red   { background: var(--rc-danger-50); color: var(--rc-danger); border-color: #F3CFC9; }
.rc-notif-b { flex: 1; min-width: 0; line-height: 1.4; }
.rc-notif-t { font-size: .86rem; font-weight: 500; color: var(--rc-text); }
.rc-notif.unread .rc-notif-t { font-weight: 600; color: var(--rc-ink); }
.rc-notif-time { font-size: .76rem; color: var(--rc-muted); margin-top: 2px; }
.rc-empty { text-align: center; color: var(--rc-muted); padding: 32px 20px; font-size: .9rem; }
.rc-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-qa { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm); text-decoration: none; transition: border-color var(--rc-ease), background var(--rc-ease); }
.rc-qa:hover { border-color: var(--rc-ink); background: var(--rc-surface-2); }
.rc-qa-ic { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.rc-qa-label { font-size: .86rem; font-weight: 600; color: var(--rc-ink); line-height: 1.2; }
.qa-green, .qa-indigo, .qa-amber, .qa-purple { background: var(--rc-surface-2); color: var(--rc-ink); border: 1px solid var(--rc-line); }
.rc-qa:hover .rc-qa-ic { background: var(--rc-green); color: var(--rc-ink); border-color: var(--rc-green); }

@media (max-width: 1100px) { .rc-grid { grid-template-columns: 1fr; } .rc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .rc-stats { grid-template-columns: 1fr 1fr; gap: 10px; } .rc-scard { padding: 14px; } .rc-sval { font-size: 1.7rem; } }

/* ── Barra de filtros (activos, listados) ─────────────────────────── */
.rc-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.rc-filters .f-search { position: relative; flex: 1; min-width: 220px; }
.rc-filters .f-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--rc-subtle); font-size: .9rem; }
.rc-filters .f-search input { width: 100%; border: 1px solid var(--rc-line-2); background: #fff; border-radius: var(--rc-r-sm); padding: 8px 12px 8px 36px; font-size: .88rem; font-family: inherit; color: var(--rc-text); outline: none; transition: border-color var(--rc-ease), box-shadow var(--rc-ease); }
.rc-filters .f-search input:focus { border-color: var(--rc-green); box-shadow: 0 0 0 3px rgba(1,177,73,.14); }
.rc-select { border: 1px solid var(--rc-line-2); background-color: #fff; border-radius: var(--rc-r-sm); padding: 8px 12px; font-size: .86rem; font-family: inherit; color: var(--rc-text); outline: none; cursor: pointer; transition: border-color var(--rc-ease), box-shadow var(--rc-ease); }
.rc-select:focus { border-color: var(--rc-green); box-shadow: 0 0 0 3px rgba(1,177,73,.14); }
img.rc-thumb { object-fit: cover; }

@media (max-width: 575.98px) {
  .rc-filters > * { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .rc-filters .f-search { flex-basis: 100%; }
  .rc-filters > select:nth-of-type(3) { flex-basis: 100%; }
  .rc-filters .rc-btn { justify-content: center; }
  .rc-filters > .rc-btn:last-child { flex: 0 0 44px; }
  .rc-page-head > div:last-child { width: 100%; }
}

/* DataTables dentro de tarjetas (extras.php y similares) */
.card .dataTables_wrapper { padding: 12px 16px 10px; }
.card .dataTables_wrapper .dataTables_filter input, .card .dataTables_wrapper .dataTables_length select { border: 1px solid var(--rc-line-2); border-radius: var(--rc-r-sm); background: #fff; }
.dataTables_wrapper .dataTables_info { color: var(--rc-muted); font-size: .84rem; }

/* DataTables dentro del panel */
.rc-panel .dataTables_wrapper { padding: 0 4px 4px; }
.rc-panel .dataTables_filter, .rc-panel .dataTables_length { padding: 12px 16px 0; font-size: .84rem; color: var(--rc-muted); }
.rc-panel .dataTables_filter input, .rc-panel .dataTables_length select { border: 1px solid var(--rc-line-2); border-radius: var(--rc-r-sm); padding: 5px 10px; font-size: .86rem; background: #fff; }
.rc-panel .dataTables_info { padding: 10px 16px; color: var(--rc-muted); font-size: .8rem; }
.rc-panel .dataTables_paginate { padding: 8px 16px; }
.page-link { color: var(--rc-ink); border-color: var(--rc-line); }
.page-link:hover { color: var(--rc-ink); background: var(--rc-surface-2); }
.active > .page-link, .page-link.active { background: var(--rc-ink) !important; border-color: var(--rc-ink) !important; color: var(--rc-cream) !important; }
.rc-panel .paginate_button.current { background: var(--rc-ink) !important; border-color: var(--rc-ink) !important; color: var(--rc-cream) !important; border-radius: var(--rc-r-sm); }

/* ── Cabeceras oscuras de tarjetas (estilo inline background:var(--rc-ink)) ── */
.card-header[style*="--rc-ink"] { border-bottom: 2px solid var(--rc-green) !important; }
.card-header[style*="--rc-ink"] h5, .card-header[style*="--rc-ink"] h6 { color: var(--rc-cream) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.5 — AUTORIZACIONES (supervision.php), HISTORIAL y ETIQUETA (q.php)
   ═══════════════════════════════════════════════════════════════════ */
.sv-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sv-tabs .nav-link { white-space: nowrap; }
.sv-count { display: inline-block; margin-left: 6px; background: var(--rc-ink); color: var(--rc-cream); font-size: .7rem; font-weight: 700; border-radius: 9px; padding: 1px 7px; }
.sv-intro { font-size: .88rem; color: var(--rc-muted); margin: 0 0 14px; max-width: 900px; }
.sv-item { background: var(--rc-surface); border: 1px solid var(--rc-line); border-left: 3px solid var(--rc-warn); border-radius: var(--rc-r); box-shadow: var(--rc-shadow-sm); margin-bottom: 14px; }
.sv-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 14px 18px 10px; border-bottom: 1px solid var(--rc-line); }
.sv-meta { font-size: .8rem; color: var(--rc-muted); }
.sv-tipo { font-size: .8rem; color: var(--rc-muted); margin-left: 6px; }
.sv-flag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--rc-danger-50); color: var(--rc-danger-700); margin-left: 6px; }
.sv-body { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 16px; padding: 14px 18px; }
.sv-sub { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-muted); margin: 0 0 6px; }
.sv-sub + .sv-thumbs, .sv-sub + .sv-sin { margin-bottom: 10px; }
.sv-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rc-line); background: var(--rc-surface-2); }
.sv-thumb-lg { width: 220px; height: 160px; }
.sv-thumb-sm { width: 56px; height: 56px; }
.sv-doc { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 10px; border: 1px solid var(--rc-line); border-radius: 8px; background: var(--rc-surface-2); color: var(--rc-ink); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sin { font-size: .8rem; color: var(--rc-subtle); }
.sv-datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: .87rem; margin: 0; }
.sv-datos dt { color: var(--rc-muted); font-weight: 500; }
.sv-datos dd { margin: 0; color: var(--rc-ink); word-break: break-word; }
.sv-form { padding: 12px 18px 16px; border-top: 1px dashed var(--rc-line); background: var(--rc-surface-2); border-radius: 0 0 var(--rc-r) var(--rc-r); }
.sv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sv-nota { padding: 10px 18px 14px; font-size: .84rem; color: var(--rc-muted); font-style: italic; }
.sv-nueva > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--rc-ink); list-style: none; }
.sv-nueva > summary::-webkit-details-marker { display: none; }
.sv-nueva[open] > summary { border-bottom: 1px solid var(--rc-line); margin-bottom: 12px; }
@media (max-width: 767.98px) {
  .sv-body { grid-template-columns: 1fr; }
  .sv-head, .sv-body, .sv-form { padding-left: 14px; padding-right: 14px; }
}

/* Historial del activo (historial.php) */
.hs-linea { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--rc-line); }
.hs-linea li { position: relative; padding: 0 0 14px 14px; }
.hs-linea li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--rc-surface); border: 2px solid var(--rc-green-700); }
.hs-linea li.hs-alerta::before { border-color: var(--rc-danger); }
.hs-fecha { font-size: .75rem; color: var(--rc-muted); }
.hs-txt { font-size: .88rem; color: var(--rc-ink); }
.hs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 767.98px) { .hs-kpis { grid-template-columns: 1fr 1fr; } }

/* Salud del inventario (admin.php) */
.rc-salud { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 16px 20px; }
.rc-salud a { display: block; border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm); padding: 10px 12px; text-decoration: none; color: var(--rc-ink); background: var(--rc-surface); transition: border-color var(--rc-ease); }
.rc-salud a:hover { border-color: var(--rc-ink); }
.rc-salud .n { font-family: var(--rc-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.rc-salud .l { font-size: .78rem; color: var(--rc-muted); }
.rc-salud a.alerta { border-left: 3px solid var(--rc-danger); }
.rc-salud a.aviso { border-left: 3px solid var(--rc-warn); }
.rc-salud a.ok { border-left: 3px solid var(--rc-green); }
/* v1.8: en teléfono, dos tarjetas por fila (antes una y mucho desplazamiento) */
@media (max-width: 575.98px) {
  .rc-salud { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .rc-salud a { padding: 9px 10px; }
  .rc-salud .n { font-size: 1.3rem; }
  .rc-salud .l { font-size: .74rem; line-height: 1.25; }
}

/* Página de etiqueta no válida (q.php) */
.rc-q-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--rc-bg); padding: 16px; }
.rc-q-card { background: var(--rc-surface); border: 1px solid var(--rc-line); border-radius: var(--rc-r-lg); padding: 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--rc-shadow); }
.rc-q-logo { height: 40px; margin-bottom: 16px; }
.rc-q-title { font-family: var(--rc-serif); font-size: 1.3rem; font-weight: 600; color: var(--rc-ink); }

/* Formulario de activos: secciones de plan y contrato */
.af-seccion { border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm); padding: 12px 14px; background: var(--rc-surface-2); }
.af-seccion-t { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-muted); margin-bottom: 8px; }
.rc-mini-tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--rc-stone-50); color: var(--rc-stone-700); margin: 2px 2px 0 0; }
.rc-mini-tag.warn { background: var(--rc-warn-50); color: var(--rc-warn-700); }
.rc-mini-tag.danger { background: var(--rc-danger-50); color: var(--rc-danger-700); }
.rc-mini-tag.ok { background: var(--rc-green-50); color: var(--rc-green-800); }

/* v1.6 — Formatos en papel leídos con IA (supervision.php) */
.cf-bloque { background: var(--rc-surface); border: 1px solid var(--rc-line); border-left: 3px solid var(--rc-green-700); border-radius: var(--rc-r-sm); padding: 12px 14px; margin-bottom: 10px; }
.cf-titulo { font-size: .8rem; font-weight: 600; color: var(--rc-ink); margin-bottom: 10px; }
.cf-grid { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cf-hoja { width: 150px; height: 194px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--rc-line-2); background: var(--rc-surface-2); }
.cf-dudas { list-style: none; padding: 0; margin: 0 0 10px; }
.cf-dudas li { background: var(--rc-warn-50); color: var(--rc-warn-700); border-radius: var(--rc-r-sm); padding: 5px 9px; font-size: .8rem; margin-bottom: 4px; }
@media (max-width: 767.98px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-hoja { width: 120px; height: 155px; }
}

/* v1.6 — Descarga de formatos Word (reportes.php) */
.rc-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.rc-formato { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm); background: var(--rc-surface); color: var(--rc-ink); text-decoration: none; font-size: .86rem; transition: border-color var(--rc-ease); }
.rc-formato:hover, .rc-formato:focus { border-color: var(--rc-green-700); color: var(--rc-ink); }
.rc-formato > i:first-child { font-size: 1.3rem; color: var(--rc-green-700); }
.rc-formato > i:last-child { color: var(--rc-muted); }
.rc-formato strong { margin-right: 5px; }

/* v2.0 — Privilegios por módulo */
/* Aviso "sin privilegio" (includes/permisos.php → pagina_sin_privilegio) */
.rc-sinpriv { display: flex; gap: 20px; align-items: flex-start; padding: 28px 30px; max-width: 760px; border-left: 3px solid var(--rc-warn); }
.rc-sinpriv-ic { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                 font-size: 1.55rem; background: var(--rc-warn-50); color: var(--rc-warn-700); border: 1px solid #EBD9B0; }
.rc-sinpriv-txt h2 { font-family: var(--rc-serif); font-size: 1.25rem; font-weight: 600; color: var(--rc-ink); margin: 4px 0 8px; }
.rc-sinpriv-txt p { font-size: .9rem; color: var(--rc-muted); margin: 0 0 16px; max-width: 560px; }
.rc-sinpriv-acc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 575.98px) { .rc-sinpriv { flex-direction: column; padding: 22px 18px; } }
/* Personal: módulos de cada persona */
.rc-mods { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.rc-mods > span[title] { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
                         background: var(--rc-green-50); color: var(--rc-green-800); font-size: .8rem; }
/* Personal: ventana de privilegios */
.rc-priv-lista { border: 1px solid var(--rc-line); border-radius: var(--rc-r); overflow: hidden; }
.rc-priv { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; margin: 0;
           border-bottom: 1px solid var(--rc-line); background: var(--rc-surface); cursor: pointer; }
.rc-priv:last-child { border-bottom: 0; }
.rc-priv:hover { background: var(--rc-surface-2); }
.rc-priv-ic { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
              background: var(--rc-surface-2); color: var(--rc-ink); border: 1px solid var(--rc-line); font-size: 1rem; }
.rc-priv-txt strong { display: block; font-size: .9rem; font-weight: 600; color: var(--rc-ink); }
.rc-priv-txt small { display: block; font-size: .78rem; color: var(--rc-muted); line-height: 1.3; }
.rc-priv-estado { font-size: .72rem; font-weight: 600; color: var(--rc-green-800); white-space: nowrap; }
.rc-priv .form-check-input { width: 2.4em; height: 1.25em; cursor: pointer; }
.rc-priv .form-check-input:checked { background-color: var(--rc-green-700); border-color: var(--rc-green-700); }
.rc-priv.bloqueado { cursor: default; background: var(--rc-surface-2); }
.rc-priv.bloqueado .rc-priv-txt, .rc-priv.bloqueado .rc-priv-ic { opacity: .5; }
.rc-priv.bloqueado .rc-priv-estado { color: var(--rc-subtle); font-weight: 500; }
.rc-priv-aviso { margin-top: 12px; background: var(--rc-warn-50); color: var(--rc-warn-700); border: 1px solid #EBD9B0;
                 border-radius: var(--rc-r-sm); padding: 8px 12px; font-size: .84rem; }
@media (max-width: 575.98px) {
  .rc-priv { grid-template-columns: 32px 1fr auto; }
  .rc-priv-estado { grid-column: 2; grid-row: 2; }
}

/* v2.1 — Ayuda contextual "?" (config.php: ayuda() · js/ayuda.js) */
.rc-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0 0 0 4px;
            border: 0; border-radius: 50%; background: transparent; color: var(--rc-subtle); font-size: .9rem; line-height: 1;
            vertical-align: -3px; cursor: pointer; flex-shrink: 0; transition: color var(--rc-ease); }
.rc-ayuda:hover, .rc-ayuda[aria-expanded="true"] { color: var(--rc-green-700); }
.rc-ayuda:focus { outline: none; }
.rc-ayuda:focus-visible { color: var(--rc-green-700); box-shadow: 0 0 0 2px var(--rc-green-50), 0 0 0 3px var(--rc-green-700); }
.rc-ayuda.claro { color: rgba(251, 252, 241, .7); }
.rc-ayuda.claro:hover, .rc-ayuda.claro[aria-expanded="true"] { color: var(--rc-cream); }
.rc-ayuda-pop { position: fixed; z-index: 1090; max-width: min(320px, calc(100vw - 16px)); background: var(--rc-surface); color: var(--rc-ink);
                border: 1px solid var(--rc-line-2); border-radius: var(--rc-r-sm); box-shadow: var(--rc-shadow-lg); font-family: var(--rc-font); }
.rc-ayuda-pop-t { background: var(--rc-ink); color: var(--rc-cream); font-family: var(--rc-serif); font-size: .9rem; font-weight: 600;
                  padding: 8px 14px; border-bottom: 2px solid var(--rc-green); border-radius: var(--rc-r-sm) var(--rc-r-sm) 0 0; }
.rc-ayuda-pop-b { padding: 10px 14px 12px; font-size: .83rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.rc-ayuda-pop::before { content: ""; position: absolute; width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--rc-line-2); }
.rc-ayuda-pop[data-pos="bottom"]::before { top: -6px; left: calc(var(--rc-flecha, 20px) - 5px); background: var(--rc-ink); border-right: 0; border-bottom: 0; }
.rc-ayuda-pop[data-pos="top"]::before { bottom: -6px; left: calc(var(--rc-flecha, 20px) - 5px); background: var(--rc-surface); border-left: 0; border-top: 0; }
.rc-ayuda-pop[data-pos="right"]::before { left: -6px; top: calc(var(--rc-flecha, 20px) - 5px); background: var(--rc-surface); border-right: 0; border-top: 0; }
.rc-ayuda-pop[data-pos="left"]::before { right: -6px; top: calc(var(--rc-flecha, 20px) - 5px); background: var(--rc-surface); border-left: 0; border-bottom: 0; }

/* ── v2.2: PÁGINAS DE ACCESO (inicio de sesión, recuperar, restablecer, confirmar correo) ──
   Mismo diseño que tenía el inicio de sesión (antes en su <style>): panel de marca negro
   con línea verde a la izquierda y tarjeta crema a la derecha. Marco: includes/acceso.php */
body.lg-body { min-height: 100vh; margin: 0; background: var(--rc-bg); }
.lg-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.lg-brand {
    background: var(--rc-ink); color: var(--rc-cream);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px; border-right: 3px solid var(--rc-green);
}
.lg-brand img { width: 190px; height: auto; display: block; }
.lg-brand h1 { font-family: var(--rc-serif); font-weight: 600; color: var(--rc-cream); font-size: 2.1rem; line-height: 1.2; margin: 0 0 12px; max-width: 18ch; }
.lg-brand p { color: var(--rc-cream-dim); font-size: 1rem; max-width: 36ch; margin: 0; }
.lg-brand small { color: #8E8A7E; font-size: .78rem; }
.lg-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.lg-col { width: 100%; max-width: 400px; }
.login-card {
    background: var(--rc-surface); border: 1px solid var(--rc-line);
    border-radius: var(--rc-r-lg); padding: 36px 32px; width: 100%; max-width: 400px;
    box-shadow: var(--rc-shadow);
}
.login-card h2 { font-family: var(--rc-serif); font-size: 1.6rem; font-weight: 600; margin: 0 0 4px; }
.login-card .lg-sub { color: var(--rc-muted); font-size: .92rem; margin-bottom: 26px; }
.login-card .form-control { padding: .7rem .9rem; font-size: .95rem; }
.login-card .input-group .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.login-card .input-group-text { cursor: pointer; border-top-left-radius: 0; border-bottom-left-radius: 0; background: #fff; color: var(--rc-muted); }
.login-card .input-group-text:hover { color: var(--rc-ink); }
.btn-login { padding: .75rem !important; font-size: 1rem; }
.countdown { font-family: var(--rc-serif); font-size: 2rem; font-weight: 600; color: var(--rc-danger); font-variant-numeric: tabular-nums; }
.lg-logo-mobile { display: none; }
@media (max-width: 860px) {
    .lg-wrap { grid-template-columns: 1fr; }
    .lg-brand { display: none; }
    .lg-form { align-items: flex-start; padding-top: 48px; }
    .lg-logo-mobile { display: block; width: 150px; height: auto; margin: 0 auto 28px; }
}
@media (max-width: 420px) {
    .login-card { padding: 28px 20px; }
}
/* Enlaces y estados de la recuperación */
.lg-olvido { text-align: right; margin: 0 0 20px; font-size: .88rem; }
.lg-olvido a, .lg-volver a { color: var(--rc-green-700); font-weight: 600; text-decoration: none; }
.lg-olvido a:hover, .lg-volver a:hover { text-decoration: underline; }
.lg-volver { margin-top: 20px; text-align: center; font-size: .88rem; }
.lg-estado { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.lg-estado-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                font-size: 1.3rem; background: var(--rc-green-50); color: var(--rc-green-700); }
.lg-estado-ic.aviso { background: var(--rc-warn-50); color: var(--rc-warn-700); }
.lg-estado-ic.error { background: var(--rc-danger-50); color: var(--rc-danger); }
.lg-estado p { margin: 0 0 8px; font-size: .92rem; color: var(--rc-text); }
.lg-estado p.nota { font-size: .84rem; color: var(--rc-muted); }
.lg-cuenta { display: flex; align-items: center; gap: 10px; background: var(--rc-surface-2); border: 1px solid var(--rc-line); border-radius: var(--rc-r-sm);
             padding: 10px 12px; margin-bottom: 18px; font-size: .9rem; color: var(--rc-ink); }
.lg-cuenta i { color: var(--rc-green-700); font-size: 1.1rem; }
.lg-reglas { list-style: none; padding: 0; margin: 8px 0 0; font-size: .8rem; color: var(--rc-muted); display: grid; gap: 2px; }
.lg-reglas li { display: flex; gap: 6px; align-items: center; }
.lg-reglas li i { font-size: .72rem; width: 12px; text-align: center; }
.lg-reglas li.ok { color: var(--rc-green-700); }

/* ── v2.2: MI CUENTA (cuenta.php) y correo en Personal ───────────────────── */
.rc-cuenta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.rc-panel-body { padding: 18px 20px 20px; }
.rc-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: .9rem; }
.rc-kv dt { color: var(--rc-muted); font-weight: 500; }
.rc-kv dd { margin: 0; color: var(--rc-ink); font-weight: 600; overflow-wrap: anywhere; }
.rc-correo-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; font-size: .9rem; }
.rc-correo-estado strong { overflow-wrap: anywhere; }
.rc-correo-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px;
                   margin-bottom: 20px; border-left: 3px solid var(--rc-green-700); }
.rc-correo-panel.sin { border-left-color: var(--rc-warn); }
.rc-correo-panel .ttl { font-family: var(--rc-serif); font-weight: 600; font-size: 1rem; color: var(--rc-ink); }
.rc-correo-panel .det { font-size: .84rem; color: var(--rc-muted); overflow-wrap: anywhere; }
.rc-correo-panel code { color: var(--rc-ink); background: var(--rc-surface-2); padding: 1px 5px; border-radius: 4px; font-size: .82rem; }
.rc-correo-cel { font-size: .84rem; max-width: 260px; }
.rc-correo-cel .dir { display: block; color: var(--rc-ink); overflow-wrap: anywhere; }
.rc-correo-cel form { display: block; margin-top: 3px; }
.rc-link-btn { border: 0; background: none; padding: 0; color: var(--rc-green-700); font-weight: 600; font-size: .8rem; text-decoration: none;
               text-align: left; white-space: nowrap; }
.rc-link-btn:hover { text-decoration: underline; color: var(--rc-green-800); }
/* v2.5: Mi cuenta → Avisos por correo (reutiliza la lista de interruptores de Privilegios) */
.rc-aviso { grid-template-columns: 36px 1fr auto; }
.rc-avisos-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 16px; font-size: .9rem; color: var(--rc-ink); }
.rc-avisos-dias label { flex: 0 0 100%; margin: 0; font-weight: 600; }
.rc-avisos-dias input { width: 84px; text-align: center; }
.rc-avisos-dias.inactivo { opacity: .55; }
.rc-avisos-falta { margin: 0 0 14px; }
.rc-avisos-falta a { color: inherit; font-weight: 600; }
.rc-correo-panel .det + .det { margin-top: 4px; }
.rc-logout.active { background: rgba(251,252,241,.06); color: var(--rc-cream) !important; }
a.rc-user { text-decoration: none; border-radius: var(--rc-r-sm); }
a.rc-user:hover .n { color: var(--rc-green-700); }

/* ── v2.3: DOCUMENTOS DE LOS ACTIVOS (documentos.php) ─────────────────────── */
.dc-lista { display: grid; gap: 12px; }
.dc-item { border-left: 3px solid var(--rc-green-700); }
.dc-item.sin { border-left-color: var(--rc-warn); }
.dc-item.por_vencer { border-left-color: var(--rc-warn); }
.dc-item.vencido { border-left-color: var(--rc-danger); }
.dc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; }
.dc-titulo { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.dc-titulo > i { font-size: 1.6rem; color: var(--rc-green-700); line-height: 1; margin-top: 2px; }
.dc-item.sin .dc-titulo > i { color: var(--rc-subtle); }
.dc-titulo h2 { font-family: var(--rc-serif); font-size: 1.05rem; font-weight: 600; color: var(--rc-ink); margin: 0 0 4px; overflow-wrap: anywhere; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-tags .rc-mini-tag { margin: 0; }
.dc-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 20px 12px 58px; font-size: .84rem; color: var(--rc-muted); }
.dc-meta i { margin-right: 5px; }
.dc-meta span { overflow-wrap: anywhere; }
.dc-hist { border-top: 1px solid var(--rc-line); }
.dc-hist > summary { padding: 10px 20px; font-size: .84rem; font-weight: 600; color: var(--rc-green-700); cursor: pointer; list-style-position: inside; }
.dc-hist > summary:hover { background: var(--rc-surface-2); }
.dc-hist table { font-size: .84rem; }
.dc-hist th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rc-muted); font-weight: 600; background: var(--rc-surface-2); }
.dc-hist th:first-child, .dc-hist td:first-child { padding-left: 20px; }
.dc-hist th:last-child, .dc-hist td:last-child { padding-right: 20px; }
.dc-hist tr.dc-actual td { background: var(--rc-green-50); }
.dc-vacio { text-align: center; padding: 32px 20px; }
.dc-vacio > i { font-size: 2.2rem; color: var(--rc-subtle); display: block; margin-bottom: 8px; }
.dc-vacio p { margin: 0 0 4px; }
.dc-inactivas { margin-top: 16px; }
.dc-inactiva { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rc-line); font-size: .9rem; }
.dc-inactiva:last-child { border-bottom: 0; }
@media (max-width: 575px) {
    .dc-head { padding: 14px 16px; }
    .dc-meta { padding: 0 16px 12px; }
    .dc-acc { width: 100%; }
    .dc-acc .rc-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── v2.4: Proyectos / Mi proyecto (proyecto.php, solo consulta) ─────────────── */
.pj-elegir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-elegir-l { font-size: .78rem; font-weight: 600; color: var(--rc-muted); text-transform: uppercase; letter-spacing: .05em; }
.pj-select, .pj-input { height: 38px; border: 1px solid var(--rc-line-2); border-radius: var(--rc-r-sm); background: var(--rc-surface); color: var(--rc-text); font: inherit; font-size: .88rem; padding: 0 10px; min-width: 0; }
.pj-select:focus, .pj-input:focus { outline: 2px solid var(--rc-green-700); outline-offset: 1px; border-color: var(--rc-green-700); }
.pj-input { width: 240px; }
.pj-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-ne { font-family: var(--rc-mono); font-weight: 600; font-size: .82rem; color: var(--rc-green-700); text-decoration: none; }
.pj-ne:hover { text-decoration: underline; }
.pj-nom { color: var(--rc-muted); font-size: .84rem; }
.pj-nom-f { font-weight: 600; color: var(--rc-ink); }
.pj-fecha { white-space: nowrap; font-size: .84rem; color: var(--rc-muted); }
.pj-warn { color: var(--rc-warn-700); }
.pj-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.pj-acc .rc-btn { white-space: nowrap; }
.pj-leer { width: 30px; height: 30px; font-size: .8rem; }
.rc-tbl .rc-mini-tag + .rc-mini-tag, .rc-acat + .rc-mini-tag { margin-top: 4px; }
.pj-bloque { margin-bottom: 20px; }
.pj-solo-movil, .pj-movil-b { display: none; }
.pj-oculto { display: none !important; }
.pj-sr { 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; }
@media (max-width: 575px) {
    .pj-filtros { width: 100%; }
    .pj-input { width: 100%; }
    .pj-filtros .pj-select { width: 100%; }
    .pj-elegir { width: 100%; }
    .pj-elegir .pj-select { flex: 1 1 auto; }
    .pj-opc { display: none; }   /* columnas que no caben: Nº, a cargo de, mantenimiento, verificado, consultar, desde */
    .pj-solo-movil { display: inline-block; margin-bottom: 2px; }   /* el Nº abre el expediente */
    .pj-movil-b { display: block; margin-top: 2px; }   /* quién lo tiene, dentro de la celda del activo */
    table.rc-tbl.pj-tbl { min-width: 0; }   /* sin las columnas que no caben, la tabla entra en la pantalla */
    .pj-tbl th, .pj-tbl td, .pj-tbl td.pad { padding-left: 12px; padding-right: 12px; }
}