/* ============================================================
   SISTEMA DE DISEÑO — GESTIÓN DE OBRAS
   Todos los estilos centralizados aquí. Sin hardcode en HTML/PHP.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS DE DISEÑO
   ------------------------------------------------------------ */
:root {
  /* Paleta principal */
  --color-primary:        #1a1a1a;   /* Black 6C */
  --color-primary-hover:  #333333;
  --color-secondary:      #b8b0a8;   /* Warm Gray 3C */
  --color-secondary-hover:#a09890;
  --color-accent:         #d4cbb8;   /* Pantone 7527C */
  --color-accent-light:   #ede8df;

  /* Fondos */
  --color-bg:             #ffffff;   /* Fondo general — blanco */
  --color-bg-white:       #ffffff;
  --color-bg-surface:     #f5f3f0;   /* Superficie suave — tarjetas, filas alternas */
  --color-bg-dark:        #1a1a1a;
  --color-sidebar:        #f7f5f0;   /* Sidebar — Cloud Dancer */

  /* Texto */
  --color-text:           #1a1a1a;
  --color-text-muted:     #8a8279;
  --color-text-light:     #b8b0a8;
  --color-text-inverse:   #f7f5f0;   /* Cloud Dancer — solo texto claro sobre fondo oscuro */

  /* Bordes */
  --color-border:         #d4cbb8;
  --color-border-strong:  #b8b0a8;
  --color-border-dark:    #1a1a1a;

  /* Estados semánticos */
  --color-success:        #3a6b4a;
  --color-success-bg:     #e8f0eb;
  --color-warning:        #8a6a1a;
  --color-warning-bg:     #f5edda;
  --color-danger:         #8a2a2a;
  --color-danger-bg:      #f5e0e0;
  --color-info:           #1a4a6b;
  --color-info-bg:        #e0eaf5;

  /* Highlight — terracota */
  --color-highlight:          #C97B65;   /* Terracota — labels y textos resaltados */
  --color-highlight-bg:       #f5ebe7;   /* Fondo suave highlight */

  /* Estados de obra */
  --color-estado-prevision:   #8a8279;
  --color-estado-ejecucion:   #1a4a6b;
  --color-estado-paralizada:  #8a6a1a;
  --color-estado-finalizada:  #3a6b4a;
  --color-estado-anulada:     #8a2a2a;

  /* Tipografía */
  --font-family:          'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', 'Courier New', monospace;
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-md:         1.125rem;   /* 18px */
  --font-size-lg:         1.25rem;    /* 20px */
  --font-size-xl:         1.5rem;     /* 24px */
  --font-size-2xl:        1.875rem;   /* 30px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --line-height-tight:    1.25;
  --line-height-base:     1.5;
  --line-height-relaxed:  1.75;

  /* Espaciado */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */

  /* Padding estándar de celda de tabla (td/th).
     Punto único de control para todas las tablas de la app excepto las
     ultracompactas a propósito (.cert-plan-tabla, .plan-comp-table). */
  --table-cell-py: var(--space-1);   /* 4px vertical */
  --table-cell-px: var(--space-3);   /* 12px horizontal */

  /* Bordes redondeados */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;

  /* Sombras */
  --shadow-sm:   0 1px 2px rgba(26,26,26,0.06);
  --shadow-md:   0 2px 8px rgba(26,26,26,0.10);
  --shadow-lg:   0 4px 16px rgba(26,26,26,0.12);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;

  /* Layout */
  --sidebar-width:     240px;
  --topbar-height:     56px;
  --content-max-width: 1400px;
}

/* ------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-normal);
  line-height:      var(--line-height-base);
  color:            var(--color-text);
  background-color: var(--color-bg);
  margin:           0;
  padding:          0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:  var(--font-weight-semibold);
  line-height:  var(--line-height-tight);
  color:        var(--color-text);
  margin-top:   0;
  margin-bottom: var(--space-3);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

a {
  color:           var(--color-primary);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size:   var(--font-size-sm);
}

/* ------------------------------------------------------------
   3. LAYOUT — ESTRUCTURA PRINCIPAL
   ------------------------------------------------------------ */
.app-wrapper {
  display:    flex;
  /* 100vh fallback; 100dvh evita el "salto" en móviles cuando aparece/desaparece
     la barra de URL del navegador. Sobreescribe a la regla anterior si el
     navegador entiende dvh (Safari 15.4+, Chrome 108+). */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Sidebar */
.app-sidebar {
  width:            var(--sidebar-width);
  background-color: var(--color-sidebar);
  color:            var(--color-text);
  display:          flex;
  flex-direction:   column;
  position:         fixed;
  top:              0;
  left:             0;
  height:           100vh;
  height:           100dvh;
  overflow-y:       auto;
  z-index:          100;
  transition:       transform var(--transition-base);
}

.sidebar-brand {
  height:          var(--topbar-height);  /* iguala el alto del topbar para alinear las líneas de cabecera */
  padding:         0 var(--space-6);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  border-bottom:   1px solid var(--color-border);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  0.02em;
  color:           var(--color-text);
  box-sizing:      border-box;
  line-height:     1.1;
}

.sidebar-brand span {
  display:        block;
  font-size:      9px;                /* más compacto para que quepa en la altura del topbar */
  font-weight:    var(--font-weight-normal);
  color:          var(--color-text-muted);
  margin-top:     2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex:    1;
  padding: var(--space-4) 0;
}

.sidebar-nav-section {
  padding:       var(--space-4) var(--space-6) var(--space-2);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:         var(--color-text-muted);
}

.sidebar-nav a {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-6);
  font-size:   var(--font-size-sm);
  color:       var(--color-text);
  text-decoration: none;
  transition:  background-color var(--transition-fast), color var(--transition-fast);
  border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
  background-color: rgba(26,26,26,0.05);
  color:            var(--color-text);
  text-decoration:  none;
}

.sidebar-nav a.active {
  background-color: rgba(26,26,26,0.07);
  color:            var(--color-text);
  border-left-color: var(--color-highlight);
}

.sidebar-nav .nav-icon {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  opacity:     0.5;
}

/* Topbar */
.app-topbar {
  height:           var(--topbar-height);
  background-color: var(--color-bg-white);
  border-bottom:    1px solid var(--color-border);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 var(--space-6);
  position:         sticky;
  top:              0;
  z-index:          90;
}

.topbar-title {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}

.topbar-actions {
  display:    flex;
  align-items: center;
  gap:         var(--space-3);
}

/* Banner de cuentas bloqueadas (solo admins) */
.banner-bloqueados {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  background:       #fef2f2;
  border-bottom:    1px solid #fca5a5;
  color:            #b91c1c;
  font-size:        var(--font-size-sm);
  padding:          10px var(--space-6);
}
.banner-bloqueados i { font-size: 16px; flex-shrink: 0; }
.banner-bloqueados span { flex: 1; }
.banner-bloqueados-link {
  flex-shrink:     0;
  color:           #b91c1c;
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
  white-space:     nowrap;
}
.banner-bloqueados-link:hover { text-decoration: underline; }

/* Banner: archivos NAS rotos (mismo patrón, color ámbar advertencia) */
.banner-nas-rotos {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  background:       #fef3c7;
  border-bottom:    1px solid #fcd34d;
  color:            #92400e;
  font-size:        var(--font-size-sm);
  padding:          10px var(--space-6);
}
.banner-nas-rotos i { font-size: 16px; flex-shrink: 0; }
.banner-nas-rotos span { flex: 1; }
.banner-nas-rotos-link {
  flex-shrink:     0;
  color:           #92400e;
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
  white-space:     nowrap;
}
.banner-nas-rotos-link:hover { text-decoration: underline; }

/* Contenido principal */
.app-main {
  margin-left: var(--sidebar-width);
  flex:        1;
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
  min-height:  100dvh;
}

.app-content {
  padding:    var(--space-6);
  max-width:  var(--content-max-width);
  flex:       1;
}

.page-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size:     var(--font-size-xl);
  margin-bottom: 0;
}

.page-subtitle {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Un solo título por página ───────────────────────────────────────────────
   El rótulo de cada página ya aparece en la barra superior (.topbar-title), así que
   ocultamos el <h1> duplicado de la cabecera en TODA la app (gana espacio vertical).
   Si una cabecera se queda sin nada visible (solo tenía el h1), se colapsa para no
   dejar un hueco/borde vacío. */
.page-header h1 { display: none; }
.page-header:not(:has(.page-subtitle, .btn, a, button, input, select, .badge)) {
  margin: 0; padding: 0; border: none;
}

/* ------------------------------------------------------------
   4. COMPONENTES — TARJETAS
   ------------------------------------------------------------ */
.card-obra {
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-5);
  transition:       box-shadow var(--transition-fast);
}

.card-obra:hover {
  box-shadow: var(--shadow-md);
}

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

.card-obra-ref {
  font-family:  var(--font-mono);
  font-size:    var(--font-size-xs);
  color:        var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ------------------------------------------------------------
   5. COMPONENTES — BADGES DE ESTADO
   ------------------------------------------------------------ */
.badge-estado {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space:   nowrap;
}

.badge-estado::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
}

.badge-prevision  { color: var(--color-estado-prevision);  background: var(--color-bg-surface); }
.badge-ejecucion  { color: var(--color-estado-ejecucion);  background: var(--color-info-bg); }
.badge-paralizada { color: var(--color-estado-paralizada); background: var(--color-warning-bg); }
.badge-finalizada { color: var(--color-estado-finalizada); background: var(--color-success-bg); }
.badge-anulada    { color: var(--color-estado-anulada);    background: var(--color-danger-bg); }

/* ------------------------------------------------------------
   6. COMPONENTES — BOTONES
   ------------------------------------------------------------ */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-4);
  font-family:     var(--font-family);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  border-radius:   var(--radius-md);
  border:          1px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space:     nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--color-text-inverse);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color:     var(--color-primary-hover);
  color:            var(--color-text-inverse);
  text-decoration:  none;
}

.btn-secondary {
  background-color: var(--color-bg-white);
  border-color:     var(--color-border-strong);
  color:            var(--color-text);
}
.btn-secondary:hover {
  background-color: var(--color-bg-surface);
  border-color:     var(--color-border-dark);
  color:            var(--color-text);
  text-decoration:  none;
}

.btn-danger {
  background-color: var(--color-danger-bg);
  border-color:     var(--color-danger);
  color:            var(--color-danger);
}
.btn-danger:hover {
  background-color: var(--color-danger);
  color:            #fff;
  text-decoration:  none;
}

.btn-sm {
  padding:   var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding:   var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.btn-icon {
  padding: var(--space-2);
  width:   36px;
  height:  36px;
  justify-content: center;
}

/* ------------------------------------------------------------
   7. COMPONENTES — FORMULARIOS
   ------------------------------------------------------------ */
.form-label {
  display:       block;
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text);
  margin-bottom: var(--space-1);
}

.form-label-required::after {
  content: ' *';
  color:   var(--color-danger);
}

.form-control {
  display:          block;
  width:            100%;
  padding:          var(--space-2) var(--space-3);
  font-family:      var(--font-family);
  font-size:        var(--font-size-sm);
  color:            var(--color-text);
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height:      var(--line-height-base);
}

.form-control:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px rgba(26,26,26,0.12);
}

.form-control::placeholder {
  color:         var(--color-text-light);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.form-control-sm {
  padding:   var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.form-text {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  margin-top: var(--space-1);
}

.form-group { margin-bottom: var(--space-4); }

/* Selectize personalizado */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
  font-family:      var(--font-family);
  font-size:        var(--font-size-sm);
  color:            var(--color-text);
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       none;
  padding:          var(--space-2) var(--space-3);
  line-height:      var(--line-height-base);
}

.selectize-control.single .selectize-input.focus,
.selectize-control.multi .selectize-input.focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px rgba(26,26,26,0.12);
  outline:      none;
}

.selectize-dropdown {
  font-family:  var(--font-family);
  font-size:    var(--font-size-sm);
  border:       1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:   var(--shadow-md);
}

.selectize-dropdown .option { padding: var(--space-2) var(--space-3); }
.selectize-dropdown .option:hover,
.selectize-dropdown .active { background-color: var(--color-bg-surface); color: var(--color-text); }

.selectize-control.multi .selectize-input .item {
  background-color: var(--color-primary);
  color:            var(--color-text-inverse);
  border:           none;
  border-radius:    var(--radius-sm);
  font-size:        var(--font-size-xs);
}

/* ------------------------------------------------------------
   8. COMPONENTES — DATATABLES
   ------------------------------------------------------------ */
.dataTables-wrapper-custom {
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
}

table.dataTable {
  width:           100% !important;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}

table.dataTable thead th {
  background-color: var(--color-bg-surface);
  color:            var(--color-text);
  font-weight:      var(--font-weight-semibold);
  font-size:        var(--font-size-xs);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  padding:          var(--table-cell-py) var(--table-cell-px);
  border-bottom:    2px solid var(--color-border-strong);
  border-top:       none;
  white-space:      nowrap;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  opacity: 0.5;
}

table.dataTable thead th.sorting_asc::after  { opacity: 1; }
table.dataTable thead th.sorting_desc::after { opacity: 1; }

table.dataTable tbody td {
  padding:       var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-border);
  color:         var(--color-text);
  vertical-align: middle;
}

table.dataTable tbody tr:last-child td { border-bottom: none; }

table.dataTable tbody tr:hover td {
  background-color: var(--color-bg-surface);
}

table.dataTable tbody tr.selected td {
  background-color: var(--color-accent-light);
}

/* Referencia de obra en tabla */
table.dataTable tbody td.col-ref {
  font-family: var(--font-mono);
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
}
.obra-ref-link,
.obra-nombre-link {
  color:           inherit;
  text-decoration: none;
}
.obra-ref-link:hover,
.obra-nombre-link:hover {
  color:           var(--color-primary);
  text-decoration: underline;
}

/* DataTables controls */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
}

div.dataTables_wrapper div.dataTables_filter input {
  font-family:      var(--font-family);
  font-size:        var(--font-size-sm);
  color:            var(--color-text);
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          var(--space-1) var(--space-3);
  margin-left:      var(--space-2);
}

div.dataTables_wrapper div.dataTables_filter input:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 2px rgba(26,26,26,0.12);
}

div.dataTables_wrapper div.dataTables_length select {
  font-family:      var(--font-family);
  font-size:        var(--font-size-sm);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          var(--space-1) var(--space-2);
  color:            var(--color-text);
  background-color: var(--color-bg-white);
}

div.dataTables_wrapper div.dataTables_info {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  padding-top: var(--space-3);
}

div.dataTables_wrapper div.dataTables_paginate {
  padding-top: var(--space-3);
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  font-size:     var(--font-size-xs);
  font-family:   var(--font-family);
  border-radius: var(--radius-md);
  padding:       var(--space-1) var(--space-3);
  color:         var(--color-text) !important;
  border:        1px solid transparent !important;
  background:    transparent !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover {
  background-color: var(--color-bg-surface) !important;
  border-color:     var(--color-border) !important;
  color:            var(--color-text) !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color:            var(--color-text-inverse) !important;
  font-weight:      var(--font-weight-medium);
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:hover {
  color: var(--color-text-light) !important;
}

/* Controles superiores de DataTables */
.dt-top-controls {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-4) var(--space-5);
  border-bottom:   1px solid var(--color-border);
  flex-wrap:       wrap;
  gap:             var(--space-3);
}

.dt-bottom-controls {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) var(--space-5);
  border-top:      1px solid var(--color-border);
  flex-wrap:       wrap;
  gap:             var(--space-3);
}

/* ------------------------------------------------------------
   9. COMPONENTES — ALERTAS / NOTIFICACIONES
   ------------------------------------------------------------ */
.alert {
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  border:        1px solid transparent;
  margin-bottom: var(--space-4);
}

.alert-success { background-color: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.alert-danger  { background-color: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger); }
.alert-info    { background-color: var(--color-info-bg);    color: var(--color-info);    border-color: var(--color-info); }

/* ------------------------------------------------------------
   10. COMPONENTES — TABS / SECCIONES
   ------------------------------------------------------------ */
.nav-tabs-custom {
  border-bottom: 2px solid var(--color-border);
  display:       flex;
  gap:           var(--space-1);
  margin-bottom: var(--space-5);
}

.nav-tabs-custom .nav-link {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-muted);
  padding:       var(--space-3) var(--space-4);
  border:        none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor:        pointer;
  transition:    color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}

.nav-tabs-custom .nav-link:hover {
  color:           var(--color-text);
  text-decoration: none;
}

.nav-tabs-custom .nav-link.active {
  color:        var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* ------------------------------------------------------------
   11. COMPONENTES — MODAL
   ------------------------------------------------------------ */
.modal-content {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
}

.modal-header {
  padding:       var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin:      0;
}

.modal-body    { padding: var(--space-6); }
.modal-footer  {
  padding:      var(--space-4) var(--space-6);
  border-top:   1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ------------------------------------------------------------
   12. UTILIDADES
   ------------------------------------------------------------ */
.text-muted     { color: var(--color-text-muted) !important; }
.text-primary   { color: var(--color-primary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-mono      { font-family: var(--font-mono); }
.text-sm        { font-size: var(--font-size-sm) !important; }
.text-xs        { font-size: var(--font-size-xs) !important; }

/* ── Tab Reporte de visitas (extraído del <style> inline el 28/04/2026) ── */
.rep-doc-item {
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  cursor:        pointer;
  transition:    border-color 0.15s, box-shadow 0.15s;
  background:    var(--color-bg-surface);
}
.rep-doc-item:hover { border-color: var(--color-highlight); }
.rep-doc-item.rep-doc-sel {
  border-color: var(--color-highlight);
  box-shadow:   0 0 0 3px rgba(201,123,101,0.2);
}
.rep-doc-thumb { width: 100%; height: auto; display: block; }
.rep-doc-thumb-placeholder {
  width:           100%;
  height:          80px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-bg);
}
.rep-doc-label {
  font-size:     11px;
  padding:       4px 6px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.rep-doc-sublabel { font-size: 10px; padding: 0 6px 4px; }
.rep-doc-item.rep-doc-sel .rep-doc-label {
  color:       var(--color-highlight);
  font-weight: var(--font-weight-semibold);
}

.fw-medium      { font-weight: var(--font-weight-medium) !important; }
.fw-semibold    { font-weight: var(--font-weight-semibold) !important; }

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

/* ------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0;
  }
  .sidebar-overlay {
    display:          block;
    position:         fixed;
    inset:            0;
    background-color: rgba(0,0,0,0.5);
    z-index:          99;
  }
  .app-content {
    padding: var(--space-4);
  }
  .page-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
  }
  .dt-top-controls {
    flex-direction: column;
    align-items:    stretch;
  }
}

@media (max-width: 575.98px) {
  .app-content { padding: var(--space-3); }
  h1           { font-size: var(--font-size-xl); }
}

/* ------------------------------------------------------------
   14. MÓDULO OBRAS — FORMULARIO Y FICHA
   ------------------------------------------------------------ */

/* .obra-ref-header — definida más abajo (línea ~3145) con estilo uppercase + highlight, esta versión está obsoleta */

/* .form-section, .form-section-title, .form-actions — definición consolidada
   más abajo (línea ~2220). Esta versión legacy queda obsoleta. */

.form-control-mono {
  font-family: var(--font-mono);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
}

/* Solo para el campo referencia principal de obra */
.form-control-ref {
  font-size:      var(--font-size-base);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text);
  letter-spacing: 0.03em;
}

/* .form-actions — definición consolidada más abajo (línea ~2270, versión compacta sin border-top) */

/* Ficha — secciones de datos */
.ficha-section {
  margin-bottom: var(--space-5);
}

.ficha-section-title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-highlight);
  margin-bottom:  var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--color-highlight-bg);
}

.ficha-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:                   var(--space-3) var(--space-5);
}

.ficha-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.ficha-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ficha-value {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text);
}

/* Ficha — panel lateral */
.ficha-panel {
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-4);
  margin-bottom:    var(--space-4);
}

.ficha-panel-title {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-3);
}

.ficha-panel-name {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}

.ficha-meta-item {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--font-size-xs);
  color:           var(--color-text-muted);
  padding:         var(--space-1) 0;
  border-bottom:   1px solid var(--color-border);
}
.ficha-meta-item:last-child { border-bottom: none; }

/* Estado vacío */
.ficha-empty {
  text-align:    center;
  padding:       var(--space-12) var(--space-6);
  color:         var(--color-text-muted);
}
.ficha-empty i {
  font-size:     2.5rem;
  display:       block;
  margin-bottom: var(--space-3);
  opacity:       0.35;
}

/* Badge de rol */
.badge-rol {
  display:       inline-block;
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-2);
  white-space:   nowrap;
}

/* Badge numérico en tabs */
.badge-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 var(--space-1);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semibold);
  background-color: var(--color-accent);
  color:           var(--color-text);
  border-radius:   9px;
  margin-left:     var(--space-1);
  vertical-align:  middle;
}

/* Tabla de agentes (sin DataTable) */
.table-agentes {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
.table-agentes thead th {
  background-color: var(--color-bg-surface);
  color:            var(--color-text-muted);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  padding:          var(--table-cell-py) var(--table-cell-px);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
  white-space:      nowrap;
}
.table-agentes tbody td {
  padding:        var(--table-cell-py) var(--table-cell-px);
  border-bottom:  1px solid var(--color-border);
  vertical-align: middle;
}
.table-agentes tbody tr:last-child td { border-bottom: none; }
.table-agentes tbody tr:hover td      { background-color: var(--color-bg-surface); }

/* Headers ordenables (tab Visitas de la ficha de obra) */
.visitas-sortable           { cursor: pointer; user-select: none; }
.visitas-sortable:hover     { color: var(--color-text); }
.visitas-sort-icon          { margin-left: 0.3rem; opacity: 0.6; font-size: 0.85em; }
.visitas-sortable[data-sort-dir="asc"]  .visitas-sort-icon,
.visitas-sortable[data-sort-dir="desc"] .visitas-sort-icon { opacity: 1; }

/* Tarjetas de módulos en ficha */
.modulo-card {
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-5);
  height:           100%;
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-2);
  transition:       box-shadow var(--transition-fast);
}
.modulo-card:not(.modulo-card-pending):hover {
  box-shadow: var(--shadow-md);
}

.modulo-card-pending { opacity: 0.6; }

.modulo-card-icon {
  font-size:   1.75rem;
  color:       var(--color-text-muted);
  line-height: 1;
}

.modulo-card-title {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}

.modulo-card-desc {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  flex:      1;
}

.modulo-card-btn {
  margin-top: var(--space-3);
  align-self: flex-start;
}

.modulo-card-badge {
  display:       inline-block;
  margin-top:    var(--space-3);
  align-self:    flex-start;
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-2);
}

/* ------------------------------------------------------------
   15. MÓDULO PLANIFICACIÓN
   ------------------------------------------------------------ */

/* Badges estado del plan */
.badge-plan {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-sm);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space:    nowrap;
}
.badge-plan::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
}
.badge-plan-sinplan   { color: var(--color-text-muted);       background: var(--color-bg-surface); }
.badge-plan-enplazo   { color: var(--color-estado-finalizada); background: var(--color-success-bg); }
.badge-plan-retraso   { color: var(--color-estado-paralizada); background: var(--color-warning-bg); }
.badge-plan-finalizado{ color: var(--color-info);              background: var(--color-info-bg); }

/* Badges estado de fase */
.badge-fase {
  display:        inline-block;
  padding:        var(--space-1) var(--space-2);
  border-radius:  var(--radius-sm);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-medium);
  white-space:    nowrap;
}
.badge-fase-pendiente  { color: var(--color-text-muted);       background: var(--color-bg-surface);  border: 1px solid var(--color-border); }
.badge-fase-enmarcha   { color: var(--color-estado-ejecucion); background: var(--color-info-bg); }
.badge-fase-retraso    { color: var(--color-estado-paralizada);background: var(--color-warning-bg); }
.badge-fase-completada { color: var(--color-estado-finalizada);background: var(--color-success-bg); }

/* Tabla de fases */
.table-fases {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
.table-fases thead th {
  background-color: var(--color-bg-surface);
  color:            var(--color-text-muted);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  padding:          var(--table-cell-py) var(--table-cell-px);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
  white-space:      nowrap;
}
.table-fases tbody td {
  padding:        var(--table-cell-py) var(--table-cell-px);
  border-bottom:  1px solid var(--color-border);
  vertical-align: middle;
}
.table-fases tfoot td {
  padding:    var(--table-cell-py) var(--table-cell-px);
  border-top: 2px solid var(--color-border-strong);
}
.table-fases tbody tr:last-child td { border-bottom: none; }
.table-fases tbody tr:hover td      { background-color: var(--color-bg-surface); }
.tabla-fases-form .fase-drag        { color: var(--color-text-light); cursor: grab; text-align: center; }

/* Barra de progreso del plan */
.plan-progreso-bar {
  height:           6px;
  background-color: var(--color-border);
  border-radius:    3px;
  overflow:         hidden;
}
.plan-progreso-fill {
  height:           100%;
  background-color: var(--color-estado-finalizada);
  border-radius:    3px;
  transition:       width var(--transition-base);
}

/* ------------------------------------------------------------
   16. PÁGINA DE ACCESO (login.php)
   ------------------------------------------------------------ */
.login-wrap {
  min-height:      100vh;
  min-height:      100dvh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
  background:      var(--color-bg-surface);
}

.login-card {
  background:    var(--color-bg-white);
  border-radius: var(--radius-xl);
  border:        1px solid var(--color-border);
  padding:       var(--space-8);
  width:         100%;
  max-width:     440px;
  box-shadow:    var(--shadow-lg);
}

.login-brand {
  font-family:    var(--font-mono);
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text);
  letter-spacing: 0.1em;
  text-align:     center;
  margin-bottom:  var(--space-6);
}
.login-brand small {
  display:         block;
  font-family:     var(--font-family);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-normal);
  color:           var(--color-text-muted);
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  margin-top:      var(--space-1);
}

.login-divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     var(--space-6) 0;
}

.login-label {
  display:        block;
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-input {
  width:         100%;
  padding:       var(--space-2) var(--space-3);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size:     var(--font-size-sm);
  font-family:   var(--font-family);
  color:         var(--color-text);
  background:    var(--color-bg-white);
  margin-bottom: var(--space-4);
  outline:       none;
  transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.login-input:focus {
  border-color: var(--color-highlight);
  box-shadow:   0 0 0 3px rgba(201,123,101,0.12);
}

.login-btn {
  width:          100%;
  padding:        var(--space-3);
  background:     var(--color-highlight);
  color:          #fff;
  border:         none;
  border-radius:  var(--radius-lg);
  font-size:      var(--font-size-sm);
  font-family:    var(--font-family);
  font-weight:    var(--font-weight-semibold);
  cursor:         pointer;
  margin-top:     var(--space-1);
  transition:     background var(--transition-fast);
  letter-spacing: 0.02em;
}
.login-btn:hover { background: #b36a55; }

.login-error {
  background:    var(--color-highlight-bg);
  color:         #8a3a2a;
  border:        1px solid #d4a090;
  border-radius: var(--radius-lg);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------
   17. PÁGINA SELECTOR (index.php)
   ------------------------------------------------------------ */
.entrada {
  min-height:      100dvh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1.5rem;
  gap:             0;
  background:      var(--color-bg-surface);
}

.entrada-logo {
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-highlight);
  margin-bottom:  0.25rem;
}

.entrada-bienvenida {
  font-size:     1.05rem;
  color:         var(--color-text-muted);
  margin-bottom: 3rem;
  text-align:    center;
}

.modos {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  width:          100%;
  max-width:      360px;
}

.btn-modo {
  display:         flex;
  align-items:     center;
  gap:             1.25rem;
  background:      var(--color-bg-white);
  border:          1.5px solid var(--color-border);
  border-radius:   var(--radius-xl);
  padding:         1.5rem;
  text-decoration: none;
  color:           var(--color-text);
  transition:      border-color var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease;
  cursor:          pointer;
}
.btn-modo:hover, .btn-modo:focus {
  border-color: var(--color-highlight);
  box-shadow:   0 4px 16px rgba(201,123,101,0.15);
  color:        var(--color-text);
  transform:    translateY(-1px);
}
.btn-modo:active { transform: scale(0.98); }

/* Estado deshabilitado: botón visible pero sin interacción. Usado para
   "Proyectos" mientras está en construcción (rediseño 3 capas pendiente). */
.btn-modo-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-modo-disabled .btn-modo-icon { color: var(--color-text-muted); }

.btn-modo-icon {
  font-size:  2.4rem;
  color:      var(--color-highlight);
  flex-shrink: 0;
  width:       3rem;
  text-align:  center;
}

.btn-modo-texto { text-align: left; }

.btn-modo-titulo {
  font-size:   1.1rem;
  font-weight: 700;
  line-height: 1.2;
  display:     block;
}

.btn-modo-desc {
  font-size:   0.82rem;
  color:       var(--color-text-muted);
  margin-top:  0.2rem;
  display:     block;
}

.btn-modo-chevron {
  margin-left: auto;
  font-size:   1.2rem;
  color:       var(--color-text-muted);
  flex-shrink: 0;
}

.entrada-footer {
  margin-top: 3rem;
  font-size:  0.78rem;
  color:      var(--color-text-muted);
  display:    flex;
  align-items: center;
  gap:        1rem;
}
.entrada-footer a       { color: var(--color-text-muted); text-decoration: none; }
.entrada-footer a:hover { color: var(--color-highlight); }

/* ------------------------------------------------------------
   18. MÓDULO CAMPO (toma de datos)
   ------------------------------------------------------------ */
/* La pantalla de captura usa toda la altura visible del viewport */
.campo-body { display: flex; flex-direction: column; min-height: 100dvh; }
/* Inputs de archivo ocultos — los botones "Foto" / "Vídeo" los disparan por id */
#inp-foto,
#inp-video { display: none; }

.campo-header {
  background:  var(--color-highlight);
  color:       #fff;
  padding:     0.85rem 1rem 0.7rem;
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-shrink: 0;
}
.campo-header a { color: #fff; opacity: 0.85; text-decoration: none; }
.campo-header h1 { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }

.campo-header-info { flex: 1; min-width: 0; }
.campo-header-ref  { font-size: 0.72rem; opacity: 0.85; font-family: var(--font-mono); }
.campo-header-nom  { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-fecha       { font-size: 0.72rem; opacity: 0.8; white-space: nowrap; }

.campo-gestion-link {
  color:           #fff;
  text-decoration: none;
  font-size:       0.82rem;
  opacity:         0.9;
  display:         flex;
  align-items:     center;
  gap:             0.3rem;
  white-space:     nowrap;
  background:      rgba(255,255,255,0.15);
  border-radius:   2rem;
  padding:         0.3rem 0.8rem;
}

/* Lista de obras (campo/index) */
.obra-search { padding: 1rem 1rem 0.5rem; }
.obra-search input {
  border-radius: 2rem;
  padding:       0.6rem 1.1rem;
  border:        1.5px solid var(--color-border);
  width:         100%;
  font-size:     1rem;
  font-family:   var(--font-family);
  background:    var(--color-bg-white);
}
.obra-search input:focus { outline: none; border-color: var(--color-highlight); }

.obras-lista { padding: 0.25rem 0.75rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* .obra-card y clases hijas — definidas más abajo (línea ~1680) en una versión
   unificada que sirve tanto al dashboard como al módulo Campo (PWA). */

.empty-msg { text-align: center; color: var(--color-text-muted); padding: 3rem 1rem; }

/* Pantalla de captura */
.acciones {
  display:               grid;
  grid-template-columns: 1fr 1fr;            /* 2 columnas */
  grid-auto-rows:        1fr;                /* filas de igual altura */
  gap:                   0.75rem;
  padding:               1rem;
  flex-shrink:           0;
}

.btn-accion {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  background:      var(--color-bg-white);
  border:          2px solid var(--color-border);
  border-radius:   var(--radius-xl);
  padding:         1.25rem 0.5rem 1rem;
  gap:             0.4rem;
  cursor:          pointer;
  font-size:       0.82rem;
  font-family:     var(--font-family);
  font-weight:     600;
  color:           var(--color-text);
  -webkit-tap-highlight-color: transparent;
}
.btn-accion i        { font-size: 2rem; }
.btn-accion:active   { background: var(--color-highlight); border-color: var(--color-highlight); color: #fff; }
.btn-accion.grabando { background: #dc3545; border-color: #dc3545; color: #fff; animation: campo-pulse 1s infinite; }

@keyframes campo-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

.capturas-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1rem 0.4rem;
  font-size:       0.78rem;
  font-weight:     600;
  color:           var(--color-text-muted);
  text-transform:  uppercase;
  letter-spacing:  0.05em;
}

.capturas-lista   { flex: 1; overflow-y: auto; padding: 0 0.75rem 5rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* ── "Finalizar visita y generar borrador de reporte" ─────────────────────
   Botón destacado al pie de Toma de datos. Cuando el técnico lo pulsa,
   se dispara IA + Guardar borrador en cadena, dejando el reporte
   listo para revisar desde Gestión. Diseño intencionalmente diferenciado
   de los botones Foto/Audio/Vídeo/Nota para que no se pulse sin querer. */
.finalizar-zona {
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
}
.btn-finalizar-visita {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--color-highlight);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.btn-finalizar-visita:active { background: #a8634d; }
.btn-finalizar-visita:disabled {
  background: var(--color-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-finalizar-visita i { font-size: 1.1rem; }

/* Banner verde de éxito tras finalizar */
.finalizar-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  background: #10b981;
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  z-index: 1100;
  max-width: 92vw;
}
.finalizar-banner i { font-size: 1.1rem; }

/* Overlay de progreso modal mientras se genera el reporte */
.finalizar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.finalizar-overlay-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  text-align: center;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.finalizar-overlay-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 0.8rem;
  border: 3px solid #e5e7eb;
  border-top-color: var(--color-highlight);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.finalizar-overlay-hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.captura-item {
  background:    var(--color-bg-white);
  border-radius: var(--radius-xl);
  border:        1.5px solid var(--color-border);
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  padding:       0.6rem 0.75rem;
  animation:     campo-slideIn 0.2s ease;
  position:      relative;
}
@keyframes campo-slideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.captura-thumb {
  width: 52px; height: 52px;
  border-radius:  var(--radius-lg);
  object-fit:     cover;
  flex-shrink:    0;
  background:     var(--color-bg-surface);
  cursor:         pointer;
}
.captura-thumb-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  flex-shrink:   0;
  background:    var(--color-bg-surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.6rem;
  color:         var(--color-highlight);
}

/* Thumbnail de vídeo en la lista de capturas — icono de cámara con un
   play superpuesto. Click → reproduce en overlay fullscreen.
   Estilo cubre tanto el caso "recién grabado" como el ya guardado. */
.captura-thumb-video {
  position:        relative;
  width:           52px;
  height:          52px;
  border-radius:   var(--radius-lg);
  flex-shrink:     0;
  background:      #1f2937;                /* gris oscuro tipo "play" */
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.6rem;
  color:           #fff;
  cursor:          pointer;
}
.captura-thumb-video .captura-thumb-play {
  position:   absolute;
  bottom:     -4px;
  right:      -4px;
  font-size:  1.2rem;
  color:      var(--color-highlight);
  background: #fff;
  border-radius: 50%;
  line-height: 1;
}

/* Reproductor de vídeo dentro del overlay — reusa la clase .foto-overlay
   que ya gestiona el fullscreen, pero centramos el <video> y le ponemos
   máximos para que no se desborde en horizontal. */
#video-overlay-player {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  height:     auto;
  background: #000;
}

.captura-audio    { width: 100%; margin-top: 0.35rem; height: 36px; }
.captura-info     { flex: 1; min-width: 0; }
.captura-tipo     { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; }
.captura-desc     { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.captura-hora     { font-size: 0.7rem; color: var(--color-text-muted); }
.btn-del-captura {
  background:    #fde8e8;
  border:        1.5px solid #f5b8b8;
  border-radius: var(--radius-lg);
  color:         #dc3545;
  font-size:     1.1rem;
  width:         2.4rem;
  height:        2.4rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  cursor:        pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-del-captura:active {
  background: #dc3545;
  color:      #fff;
}
.empty-capturas   { text-align: center; color: var(--color-text-muted); padding: 2.5rem 1rem; font-size: 0.9rem; }

/* Visor foto fullscreen */
.foto-overlay       { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; align-items: center; justify-content: center; }
.foto-overlay.open  { display: flex; }
.foto-overlay img   { max-width: 100%; max-height: 100dvh; object-fit: contain; pointer-events: none; }
.foto-overlay-close { position: absolute; top: 0.75rem; right: 0.75rem; color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; background: rgba(0,0,0,0.5); border-radius: 50%; width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }

/* Nota overlay */
.nota-overlay       { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: flex-end; }
.nota-overlay.open  { display: flex; }
.nota-panel         { background: var(--color-bg-white); border-radius: 1rem 1rem 0 0; padding: 1.25rem 1rem 2rem; width: 100%; max-height: 70dvh; display: flex; flex-direction: column; gap: 0.75rem; }
.nota-panel textarea { flex: 1; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.75rem; font-size: 1rem; font-family: var(--font-family); resize: none; min-height: 120px; }
.nota-panel textarea:focus { outline: none; border-color: var(--color-highlight); }
.nota-actions        { display: flex; gap: 0.5rem; }
.nota-actions button { flex: 1; }

/* Sync offline */
.sync-bar         { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-highlight); color: #fff; text-align: center; padding: 0.6rem; font-size: 0.85rem; font-weight: 600; display: none; z-index: 500; cursor: pointer; }
.sync-bar.visible { display: block; }

/* Badges de subida */
.upload-badge           { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 600; border-radius: 2rem; padding: 0.15rem 0.5rem; margin-top: 0.25rem; }
.upload-badge.pending   { background: #fff3cd; color: #856404; }
.upload-badge.uploading { background: #cfe2ff; color: #084298; }
.upload-badge.done      { background: #d1e7dd; color: #0a3622; }
.upload-badge.error     { background: #f8d7da; color: #842029; cursor: pointer; }
.upload-spin            { display: inline-block; animation: campo-spin 0.8s linear infinite; }
@keyframes campo-spin   { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   15. MÓDULO DOCUMENTOS
   ------------------------------------------------------------ */

/* Barra de filtros */
.filtros-bar {
  background-color: var(--color-bg-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-4);
  margin-bottom:    var(--space-5);
}

/* .doc-tipo-badge — definido más abajo (línea ~2820) sin pill, solo texto plano */

/* Icono de presupuesto de referencia */
.doc-ref-badge {
  color:       var(--color-warning);
  margin-right: var(--space-1);
}

/* Archivo actual en formulario de edición */
.doc-archivo-actual {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.doc-archivo-actual a {
  color:           var(--color-text);
  font-weight:     var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Checkbox personalizado */
.form-check-custom {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--font-size-sm);
  color:       var(--color-text);
  cursor:      pointer;
  margin-top:  var(--space-2);
}
.form-check-custom input[type="checkbox"] {
  width:         16px;
  height:        16px;
  accent-color:  var(--color-primary);
  cursor:        pointer;
  flex-shrink:   0;
}

/* ------------------------------------------------------------
   16. DASHBOARD
   ------------------------------------------------------------ */

/* Dashboard: rejilla de tarjetas verticales (proporción ~cuadrada) */
.obras-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   var(--space-4);
}

.obra-card-link {
  text-decoration: none;
  color:           inherit;
  display:         block;
}

/* Tarjeta de obra unificada — fila horizontal compacta.
   Usada en: dashboard (gestion.php) y módulo Campo (modulos/campo/index.php). */
.obra-card {
  position:        relative;        /* contenedor para .obra-card-pendiente-nas */
  background:      var(--color-bg-white);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  padding:         var(--space-3) var(--space-4);
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  cursor:          pointer;
  text-decoration: none;
  color:           inherit;
  transition:      box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Stack de badges en la esquina superior derecha de la tarjeta de obra
   (dashboard). Puede haber 0, 1 o 2 badges apilados verticalmente:
   - .obra-card-pendiente-nas    → ámbar, fotos por guardar en NAS (últ. 3 días)
   - .obra-card-pendiente-validar → sky blue, reportes en borrador por validar
   Cada badge es clicable y lleva a la visita correspondiente. */
.obra-card-badges {
  position:        absolute;
  top:             var(--space-2);
  right:           var(--space-2);
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             4px;
  z-index:         2;
}
.obra-card-pendiente-nas,
.obra-card-pendiente-validar {
  color:         #fff;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  padding:       2px 8px;
  border-radius: 999px;
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  box-shadow:    0 1px 3px rgba(0,0,0,0.15);
  line-height:   1.2;
  cursor:        pointer;
  transition:    background var(--transition-fast), box-shadow var(--transition-fast);
}
.obra-card-pendiente-nas       { background: #f59e0b; }  /* amber 500 */
.obra-card-pendiente-nas:hover { background: #d97706; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.obra-card-pendiente-validar       { background: #0ea5e9; }  /* sky 500 */
.obra-card-pendiente-validar:hover { background: #0284c7; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.obra-card-pendiente-nas i,
.obra-card-pendiente-validar i { font-size: .9em; }
.obra-card:hover {
  box-shadow:   var(--shadow-sm);
  border-color: var(--color-border-strong);
}
.obra-card:active {
  background:   var(--color-highlight-bg);
  border-color: var(--color-highlight);
}

/* Bloque informativo principal (ref + nombre apilados) */
.obra-card-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
  min-width:      0;
}
.obra-card-ref {
  font-family: var(--font-mono);
  font-size:   var(--font-size-xs);
  color:       var(--color-highlight);
  font-weight: var(--font-weight-semibold);
}
.obra-card-nombre {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Bloque de metadatos (badge + municipio) — solo en dashboard */
.obra-card-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

/* Sparkline de curva S — solo en dashboard */
.obra-card-chart {
  position:    relative;
  width:       150px;
  height:      40px;
  flex-shrink: 0;
}
.obra-card-chart canvas {
  display: block;
  width:   100% !important;
  height:  100% !important;
}
.obra-card-chart--empty {
  display: none;
}

/* Chevron derecha (›) — solo en módulo Campo (lista vertical) */
.obra-chevron {
  color:       var(--color-text-muted);
  flex-shrink: 0;
}

/* ── DASHBOARD: tarjeta vertical (override del flex horizontal) ──────────── */
.obras-grid .obra-card {
  flex-direction: column;
  align-items:    stretch;
  gap:            var(--space-2);
  padding:        var(--space-4);
  height:         100%;
}
.obras-grid .obra-card-info  { flex: none; }
.obras-grid .obra-card-meta  { flex-wrap: wrap; }
.obras-grid .obra-card-chart {
  width:       100%;
  height:      150px;          /* gráfico más alto para distinguir mejor las curvas */
  margin-top:  auto;           /* empuja el gráfico al fondo de la tarjeta */
  padding-top: var(--space-2);
  border-top:  1px solid var(--color-border);
}
.obras-grid .obra-card-nombre { white-space: normal; }   /* permite 2 líneas */

/* ── Post-it (nota colectiva en tarjeta de obra) ────────────────────────── */
.obra-postit {
  background:    #fff7c2;             /* amarillo pastel */
  border-left:   3px solid #f0c419;   /* borde más oscuro a la izquierda */
  padding:       var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size:     var(--font-size-xs);
  color:         #5a4a00;
  line-height:   1.4;
  cursor:        pointer;
  transition:    box-shadow var(--transition-fast);
  box-shadow:    0 1px 2px rgba(0,0,0,0.04);
}
.obra-postit:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.obra-postit-texto {
  white-space:   pre-wrap;
  word-wrap:     break-word;
  max-height:    4.5em;             /* unas 3 líneas */
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Variante de solo lectura — usada en el listado del módulo Campo,
   donde la tarjeta entera ya es un <a> y NO debe abrir el editor inline. */
.obra-postit--readonly        { cursor: inherit; box-shadow: none; }
.obra-postit--readonly:hover  { box-shadow: none; }
.obras-lista .obra-postit     { margin-top: var(--space-1); }

/* Botón "+ Nota" cuando la obra no tiene post-it aún */
.obra-postit-add {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  background:      transparent;
  border:          1px dashed var(--color-border);
  border-radius:   var(--radius-sm);
  color:           var(--color-text-muted);
  font-size:       var(--font-size-xs);
  padding:         3px var(--space-2);
  cursor:          pointer;
  align-self:      flex-start;
  transition:      all var(--transition-fast);
}
.obra-postit-add:hover {
  border-style: solid;
  border-color: #f0c419;
  background:   #fff7c2;
  color:        #5a4a00;
}

/* Post-it en la ficha de obra (versión más generosa que la del dashboard) */
.obra-postit-ficha-wrap {
  margin-bottom: var(--space-4);
  max-width:     720px;
}
.obra-postit-ficha-wrap .obra-postit {
  font-size: var(--font-size-sm);
  padding:   var(--space-3) var(--space-4);
}
.obra-postit-ficha-wrap .obra-postit-texto {
  max-height: none;   /* sin truncar en ficha — espacio sobra */
}
.obra-postit-ficha-wrap .obra-postit-add {
  font-size: var(--font-size-sm);
  padding:   var(--space-2) var(--space-3);
}

/* Editor inline cuando se está creando/editando una nota */
.obra-postit-editor textarea {
  width:         100%;
  min-height:    70px;
  background:    #fff7c2;
  border:        1px solid #f0c419;
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
  font-family:   var(--font-family);
  font-size:     var(--font-size-xs);
  color:         #5a4a00;
  resize:        vertical;
}
.obra-postit-editor-actions {
  display:         flex;
  gap:             var(--space-2);
  justify-content: flex-end;
  margin-top:      var(--space-1);
}

/* Responsive: en móvil ocultar elementos no críticos en lista (campo) */
@media (max-width: 600px) {
  .obras-lista .obra-card { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .obras-lista .obra-card-meta  { display: none; }
  .obras-lista .obra-card-chart { display: none; }
}

/* ------------------------------------------------------------
   17. LOGIN
   ------------------------------------------------------------ */
.login-body {
  min-height:      100vh;
  min-height:      100dvh;
  background-color: var(--color-bg-dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
}

.login-wrapper {
  width:     100%;
  max-width: 400px;
}

/* .login-card y .login-brand consolidados arriba (línea ~1212).
   La regla .login-brand span de aquí era código muerto: el HTML usa <small>. */

/* ------------------------------------------------------------
   18. MÓDULO DOCUMENTOS — ESTADOS Y TABLA MASIVA
   ------------------------------------------------------------ */

/* Badge de estado del documento */
.doc-estado-badge {
  display:       inline-block;
  font-size:     10px;
  font-weight:   var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  padding:       2px 7px;
  white-space:   nowrap;
}
.doc-estado-badge.borrador {
  color:      var(--color-text-muted);
  background: var(--color-bg-surface);
  border:     1px solid var(--color-border);
}
.doc-estado-badge.pendiente {
  color:      var(--color-warning);
  background: var(--color-warning-bg);
  border:     1px solid var(--color-warning);
}
.doc-estado-badge.aprobado {
  color:      var(--color-success);
  background: var(--color-success-bg);
  border:     1px solid var(--color-success);
}

/* Celda nombre en listado */
.doc-nombre-cell     { display: flex; flex-direction: column; gap: 2px; }
.doc-nombre-principal { font-weight: var(--font-weight-medium); }
.doc-resumen-cell    { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.doc-meta-cell       { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Tabla de subida masiva */
.tabla-masiva {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}
.tabla-masiva thead th {
  background-color: var(--color-bg-surface);
  color:            var(--color-text-muted);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.05em;
  padding:          var(--table-cell-py) var(--table-cell-px);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
}
.tabla-masiva tbody td {
  padding:        var(--table-cell-py) var(--table-cell-px);
  border-bottom:  1px solid var(--color-border);
  vertical-align: middle;
}
.tabla-masiva tbody tr:last-child td { border-bottom: none; }

/* Barra de progreso */
.progress-bar-wrap {
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  height:        10px;
  overflow:      hidden;
}
.progress-bar-inner {
  height:           100%;
  background-color: var(--color-success);
  border-radius:    var(--radius-md);
  transition:       width 0.3s ease;
  width:            0%;
}

/* ------------------------------------------------------------
   19. MÓDULO USUARIOS
   ------------------------------------------------------------ */

/* Nombre de usuario en topbar */
.topbar-username {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

/* Botón ojo en campos de contraseña */
.btn-eye {
  position:   absolute;
  right:      0.75rem;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    0;
  color:      var(--color-text-muted);
  line-height: 1;
}
.btn-eye:hover { color: var(--color-text); }

/* Badges de rol */
.badge-usuario-rol {
  display:       inline-block;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-medium);
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-2);
  white-space:   nowrap;
}
.badge-usuario-rol.admin {
  color:      var(--color-primary);
  background: var(--color-accent-light);
  border:     1px solid var(--color-accent);
}
.badge-usuario-rol.tecnico {
  color:      var(--color-text-muted);
  background: var(--color-bg-surface);
  border:     1px solid var(--color-border);
}

/* Badges de estado activo/inactivo */
.badge-usuario-estado {
  display:       inline-block;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-medium);
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-2);
  white-space:   nowrap;
}
.badge-usuario-estado.activo {
  color:      var(--color-success);
  background: var(--color-success-bg);
  border:     1px solid var(--color-success);
}
.badge-usuario-estado.inactivo {
  color:      var(--color-text-muted);
  background: var(--color-bg-surface);
  border:     1px solid var(--color-border);
}
.badge-usuario-estado.bloqueado {
  color:      #b91c1c;
  background: #fef2f2;
  border:     1px solid #fca5a5;
}

/* ------------------------------------------------------------
   20. MÓDULO VISITAS DE OBRA v2
   ------------------------------------------------------------ */

/* Barra de asistentes */
.visita-asistentes-bar {
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-4);
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
}

/* Tarjetas de sección */
.visita-card {
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow:      hidden;
}
.visita-card-informe {
  position: sticky;
  top:      var(--space-4);
}
.visita-card-header {
  background:     var(--color-bg);
  border-bottom:  1px solid var(--color-border);
  padding:        var(--space-3) var(--space-4);
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            var(--space-2);
}
.visita-card-body   { padding: var(--space-4); }
.visita-vacio       { margin: 0; color: var(--color-text-muted); font-style: italic; }
.visita-ai-fecha    { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); }

/* Badges de estado */
.visita-estado-badge {
  display:       inline-block;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-medium);
  border-radius: var(--radius-sm);
  padding:       2px var(--space-2);
  white-space:   nowrap;
}
.visita-estado-badge.borrador {
  color:      var(--color-text-muted);
  background: var(--color-bg-surface);
  border:     1px solid var(--color-border);
}
.visita-estado-badge.procesado {
  color:      var(--color-warning, #b45309);
  background: var(--color-warning-bg, #fef3c7);
  border:     1px solid var(--color-warning, #b45309);
}
.visita-estado-badge.validado {
  color:      var(--color-success);
  background: var(--color-success-bg);
  border:     1px solid var(--color-success);
}

.visita-icono-count        { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: var(--space-1); }

/* Tabs fotos */
.visita-fotos-tabs {
  display:       flex;
  gap:           var(--space-1);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding-bottom:var(--space-2);
}
.visita-tab {
  background:    none;
  border:        none;
  padding:       var(--space-1) var(--space-3);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
  cursor:        pointer;
  border-radius: var(--radius-sm);
  transition:    background 0.15s, color 0.15s;
}
.visita-tab.active {
  background: var(--color-primary);
  color:      var(--color-bg);
}
.visita-tab-count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     18px;
  height:        18px;
  font-size:     11px;
  border-radius: 9px;
  background:    rgba(255,255,255,0.25);
  margin-left:   var(--space-1);
  padding:       0 4px;
}
.visita-tab:not(.active) .visita-tab-count {
  background: var(--color-border);
  color:      var(--color-text-muted);
}

/* Selector tipo foto */
.visita-tipo-foto-select {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3);
  background:  var(--color-bg);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top:  var(--space-3);
  font-size:   var(--font-size-sm);
  flex-wrap:   wrap;
}

/* Galería fotos */
.visita-galeria {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap:                   var(--space-2);
  min-height:            40px;
}
.visita-foto-item {
  position:      relative;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  aspect-ratio:  1;
  background:    var(--color-bg);
}
.visita-foto-img   { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s; }
.visita-foto-item:hover .visita-foto-img { opacity: 0.85; }
.btn-foto-eliminar {
  position:       absolute;
  top:            4px; right: 4px;
  background:     rgba(0,0,0,0.55);
  color:          #fff;
  border:         none;
  border-radius:  50%;
  width: 22px; height: 22px;
  font-size:      13px;
  display:        flex; align-items: center; justify-content: center;
  cursor:         pointer;
  opacity:        0;
  transition:     opacity 0.15s;
  padding:        0; line-height: 1;
}
.visita-foto-item:hover .btn-foto-eliminar { opacity: 1; }

/* Notas */
.visita-nota-item {
  padding:       var(--space-3);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.visita-nota-texto { font-size: var(--font-size-sm); line-height: 1.5; }
.visita-nota-meta  {
  display:        flex;
  justify-content:space-between;
  align-items:    center;
  margin-top:     var(--space-2);
  font-size:      var(--font-size-xs);
  color:          var(--color-text-muted);
}
.btn-nota-eliminar {
  background: none; border: none;
  color:      var(--color-text-muted);
  font-size:  var(--font-size-xs);
  cursor:     pointer;
  padding:    0;
}
.btn-nota-eliminar:hover { color: var(--color-danger); }
.visita-nota-input textarea { font-size: var(--font-size-sm); }

/* Audios */
.visita-audio-item {
  padding:       var(--space-3);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.visita-audio-top {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}
.visita-audio-player { flex: 1; min-width: 160px; height: 36px; }
.visita-audio-meta   { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.btn-audio-eliminar  {
  background: none; border: none;
  color:      var(--color-text-muted); cursor: pointer;
  padding:    var(--space-1);
}
.btn-audio-eliminar:hover { color: var(--color-danger); }
.visita-audio-trans {
  margin-top:  var(--space-2);
  padding:     var(--space-2) var(--space-3);
  background:  var(--color-bg);
  border-radius: var(--radius-sm);
  font-size:   var(--font-size-sm);
  line-height: 1.5;
  color:       var(--color-text-muted);
  white-space: pre-wrap;
}

/* Informe IA */
.visita-informe-campo  { margin-bottom: var(--space-4); }
.visita-informe-label  {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom: var(--space-2);
}
.visita-informe-acciones { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-2); }
.btn-ai {
  background:    var(--color-primary);
  color:         var(--color-bg);
  border:        none;
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content:center;
  gap:           var(--space-2);
  transition:    opacity 0.15s;
}
.btn-ai:hover   { opacity: 0.85; }
.btn-ai:disabled{ opacity: 0.5; cursor: not-allowed; }

/* Secciones de formulario — fondo blanco + padding compacto */
.form-section {
  background:    var(--color-bg-white);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  margin-bottom: var(--space-4);
}
.form-section-title {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:  var(--space-3);
}
.visita-textarea   { min-height: 96px; resize: vertical; }
.form-hint         { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.form-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--space-3);
  padding-top:     var(--space-2);
  padding-bottom:  var(--space-6);
}

/* Mensajes feedback */
.visita-msg {
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
}
.visita-msg-ok    { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.visita-msg-error { background: var(--color-danger-bg);  color: var(--color-danger);  border: 1px solid var(--color-danger); }

/* Mobile */
@media (max-width: 991px) {
  .visita-card-informe { position: static; }
}
@media (max-width: 767px) {
  .form-control, .form-label { font-size: 1rem; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .visita-audio-player { min-width: 120px; }
}

/* Lightbox de fotos */
.visita-lightbox {
  position: fixed;
  inset:    0;
  z-index:  9000;
}
.visita-lightbox-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.88);
  cursor:     zoom-out;
}
#lightbox-img {
  position:      fixed;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  max-width:     90vw;
  max-height:    90vh;
  object-fit:    contain;
  border-radius: 2px;
  box-shadow:    0 8px 40px rgba(0,0,0,0.6);
  display:       block;
  z-index:       9005;
}
.visita-lightbox-close,
.visita-lightbox-prev,
.visita-lightbox-next {
  position:        fixed;
  background:      rgba(0,0,0,0.45);
  color:           #fff;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         9010;
  transition:      background 0.15s;
}
.visita-lightbox-close:hover,
.visita-lightbox-prev:hover,
.visita-lightbox-next:hover {
  background: rgba(0,0,0,0.72);
}
.visita-lightbox-close {
  top:           var(--space-4);
  right:         var(--space-4);
  width:         40px;
  height:        40px;
  border-radius: 50%;
  font-size:     1.25rem;
}
.visita-lightbox-prev,
.visita-lightbox-next {
  top:             50%;
  transform:       translateY(-50%);
  width:           48px;
  height:          72px;
  border-radius:   4px;
  font-size:       1.5rem;
}
.visita-lightbox-prev { left:  var(--space-3); }
.visita-lightbox-next { right: var(--space-3); }

.visita-lightbox-caption {
  position:       fixed;
  bottom:         var(--space-3);
  left:           50%;
  transform:      translateX(-50%);
  background:     rgba(0,0,0,0.55);
  color:          #fff;
  padding:        6px 14px;
  border-radius:  20px;
  font-size:      var(--font-size-xs);
  z-index:        9010;
  white-space:    nowrap;
}

/* ── Galería de fotografías (módulo Documentos) ─────────────────────── */
.doc-gallery-toolbar {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--color-border);
}
.gal-sort {
  padding:        3px 10px;
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-pill);
  background:     var(--color-bg-surface);
  color:          var(--color-text-muted);
  font-size:      var(--font-size-xs);
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.15s, color 0.15s;
}
.gal-sort:hover  { background: var(--color-accent-light); color: var(--color-text); }
.gal-sort-on     { background: var(--color-highlight); border-color: var(--color-highlight); color: #fff; }
.gal-sort-on:hover { color: #fff; opacity: 0.88; }

.doc-gallery-group {
  margin:    var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color:     var(--color-text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-accent-light);
}
.doc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: var(--space-4);
}
.doc-gallery-thumb {
  position:      relative;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: var(--radius-sm);
  background:    var(--color-bg-surface);
  cursor:        pointer;
  border:        1px solid var(--color-border);
}
.doc-gallery-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.2s;
}
.doc-gallery-thumb:hover img { transform: scale(1.04); }
.doc-gallery-caption {
  position:    absolute;
  bottom:      0; left: 0; right: 0;
  background:  linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color:       #fff;
  font-size:   10px;
  padding:     16px 8px 5px;
  pointer-events: none;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── Pestañas de visita (Bootstrap 5 nav-tabs) ──────────────────────── */
.visita-nav-tabs {
  border-bottom: 2px solid var(--color-border);
  gap:           var(--space-1);
}
.visita-nav-tabs .nav-link {
  color:         var(--color-text-muted);
  border:        1px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding:       var(--space-2) var(--space-4);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  background:    none;
  transition:    color 0.15s, border-color 0.15s;
}
.visita-nav-tabs .nav-link:hover {
  color:         var(--color-primary);
  border-color:  var(--color-border) var(--color-border) transparent;
}
.visita-nav-tabs .nav-link.active {
  color:         var(--color-primary);
  background:    var(--color-bg-surface, #fff);
  border-color:  var(--color-highlight) var(--color-highlight) var(--color-bg-surface, #fff);
  border-top-width: 2px;
}

/* ── Galería inline browser ────────────────────────────────────────── */
.visita-gal-browser {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-3);
  background:    var(--color-bg);
  margin-bottom: var(--space-3);
}

.visita-gal-audios-title {
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  margin-top:    var(--space-3);
}

.visita-gal-audio-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap:     wrap;
}
.visita-gal-audio-item:last-child { border-bottom: none; }
.visita-gal-audio-nombre {
  flex:        1;
  min-width:   120px;
  font-size:   var(--font-size-sm);
  word-break:  break-all;
}
.visita-gal-audio-player {
  flex:        2;
  min-width:   160px;
  height:      32px;
}

.visita-gal-sel-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  background:      var(--color-accent);
  border-radius:   var(--radius-sm);
  font-size:       var(--font-size-sm);
}

/* .visita-doc-item / -icon / -nombre — definición consolidada (estilo lista
   divisora) más abajo, línea ~3350. Esta versión legacy (estilo "tarjeta")
   ya no se usa en ningún HTML; .visita-doc-main y .visita-doc-item.linked
   eran código muerto. */

.btn-highlight {
  color:       var(--color-highlight);
  border-color: var(--color-highlight);
  background:  transparent;
}
.btn-highlight:hover {
  background: var(--color-highlight);
  color:      #fff;
}

/* ── UI grabación de micrófono ─────────────────────────────────────── */
.visita-rec-ui {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2) var(--space-3);
  background:  rgba(201,123,101,0.08);
  border:      1px solid var(--color-highlight);
  border-radius: var(--radius-sm);
}
.visita-rec-estado {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}
.visita-rec-dot {
  display:      inline-block;
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   #e53e3e;
  animation:    recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.visita-rec-timer {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .visita-gal-audio-item { flex-direction: column; align-items: flex-start; }
  .visita-gal-audio-player { width: 100%; min-width: unset; }
}

/* ============================================================
   MÓDULO GALERÍA DE FOTOS
   ============================================================ */

/* Layout principal: sidebar izquierdo + visor derecho */
.galeria-layout {
  display:    flex;
  gap:        var(--space-6);
  align-items: flex-start;
}

/* Sidebar de carpetas */
.galeria-sidebar {
  flex:           0 0 240px;
  background:     var(--color-bg-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg);
  padding:        var(--space-4);
  min-height:     300px;
}
.galeria-sidebar-title {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.galeria-folder-list {
  list-style: none;
  margin:     0;
  padding:    0;
}
.galeria-folder-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor:        pointer;
  font-size:     var(--font-size-sm);
  color:         var(--color-text);
  transition:    background var(--transition-fast);
  word-break:    break-word;
}
.galeria-folder-item:hover {
  background: var(--color-accent-light);
}
.galeria-folder-item.active {
  background: var(--color-accent);
  font-weight: var(--font-weight-medium);
}
.galeria-folder-icon {
  color:     var(--color-highlight);
  flex-shrink: 0;
}
.galeria-sidebar-vacio {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  margin:    0;
}

/* Panel visor */
.galeria-main {
  flex:    1 1 0;
  min-width: 0;
}

/* Placeholder inicial */
.galeria-placeholder {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  min-height:     300px;
  color:          var(--color-text-muted);
  text-align:     center;
  gap:            var(--space-4);
}
.galeria-placeholder-icon {
  font-size: 3rem;
  opacity:   0.3;
}

/* Breadcrumb */
.galeria-breadcrumb {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.galeria-bc-item {
  color:           var(--color-text);
  text-decoration: none;
  font-weight:     var(--font-weight-medium);
}
.galeria-bc-item:hover { text-decoration: underline; }
.galeria-bc-sep {
  color: var(--color-text-light);
  padding: 0 2px;
}

/* Subdirectorios */
.galeria-subdirs {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  margin-bottom: var(--space-5);
}
.galeria-subdir-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  font-size:     var(--font-size-sm);
  transition:    background var(--transition-fast);
}
.galeria-subdir-item:hover {
  background: var(--color-accent-light);
  border-color: var(--color-border-strong);
}

/* Grid de fotos */
.galeria-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   var(--space-3);
}
.galeria-foto-item {
  position:      relative;
  cursor:        zoom-in;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  transition:    box-shadow var(--transition-fast);
}
.galeria-foto-item:hover {
  box-shadow: var(--shadow-md);
}
.galeria-foto-img {
  width:      100%;
  height:     140px;
  object-fit: cover;
  display:    block;
}
.galeria-foto-nombre {
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  padding:       var(--space-1) var(--space-2);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Foto seleccionable (modal visitas) */
.galeria-foto-item.seleccionable {
  cursor: pointer;
}
.galeria-foto-item.seleccionable .galeria-foto-check {
  display:        flex;
  position:       absolute;
  top:            var(--space-2);
  left:           var(--space-2);
  width:          22px;
  height:         22px;
  border-radius:  4px;
  background:     rgba(255,255,255,0.85);
  border:         2px solid var(--color-border-strong);
  align-items:    center;
  justify-content: center;
  font-size:      var(--font-size-sm);
  color:          var(--color-success);
  opacity:        0;
  transition:     opacity var(--transition-fast);
}
.galeria-foto-item.seleccionable:hover .galeria-foto-check,
.galeria-foto-item.seleccionable.selected .galeria-foto-check {
  opacity: 1;
}
.galeria-foto-item.seleccionable.selected {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}
.galeria-foto-item.seleccionable.selected .galeria-foto-check {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
}

/* Estados */
.galeria-loading,
.galeria-vacio,
.galeria-error {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
  padding:   var(--space-6) 0;
}
.galeria-error { color: var(--color-danger); }

/* Explorador de carpetas (modal browse_dirs) */
.bd-dirs-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-2);
  max-height:            380px;
  overflow-y:            auto;
}
.bd-dir-item {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  text-align:    center;
  transition:    background var(--transition-fast), border-color var(--transition-fast);
  user-select:   none;
}
.bd-dir-item:hover {
  background:   var(--color-accent-light);
  border-color: var(--color-border-strong);
}
.bd-dir-item.selected {
  background:   var(--color-highlight-bg);
  border-color: var(--color-highlight);
  outline:      2px solid var(--color-highlight);
  outline-offset: 1px;
}
.bd-dir-icon {
  font-size: 2rem;
  color:     var(--color-highlight);
}
.bd-dir-nombre {
  font-size:     var(--font-size-sm);
  color:         var(--color-text);
  word-break:    break-word;
  line-height:   var(--line-height-tight);
}
.bd-ruta-actual {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  font-family: var(--font-mono);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:   55%;
}

/* Responsive galería */
@media (max-width: 768px) {
  .galeria-layout {
    flex-direction: column;
  }
  .galeria-sidebar {
    flex: none;
    width: 100%;
  }
  .galeria-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .galeria-foto-img { height: 100px; }
}


/* ── Módulo Obras: view.php — tabs ampliados (sección 21) ─────────────────── */

/* Tabs con más ítems: permitir wrap en móvil */
.nav-tabs-obra {
  flex-wrap: wrap;
  gap:       4px;
}

/* Tabla de documentos embebida en tab */
.table-documentos-obra {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
}
.table-documentos-obra thead th {
  padding:         var(--table-cell-py) var(--table-cell-px);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-muted);
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  border-bottom:   1px solid var(--color-border);
}
.table-documentos-obra tbody td {
  padding:         var(--table-cell-py) var(--table-cell-px);
  font-size:       var(--font-size-sm);
  border-bottom:   1px solid var(--color-border-light);
  vertical-align:  middle;
}
.table-documentos-obra tbody tr:last-child td { border-bottom: none; }
.table-documentos-obra tbody tr:hover td { background: var(--color-bg-hover); }

.doc-tipo-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  font-size:    var(--font-size-xs);
  color:        var(--color-text-muted);
  white-space:  nowrap;
}

/* Galería de fotos por visita */
.fotos-grupo-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 0;
  margin-bottom:   12px;
  border-bottom:   1px solid var(--color-border);
}
.fotos-grupo-fecha {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-muted);
  display:     flex;
  gap:         6px;
  align-items: center;
}
.fotos-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   10px;
  margin-bottom:         8px;
}
.foto-thumb-link {
  display:       block;
  border-radius: var(--radius-md);
  overflow:      hidden;
  text-decoration: none;
}
.foto-thumb {
  position:      relative;
  background:    var(--color-bg-surface);
  border-radius: var(--radius-md);
  overflow:      hidden;
  aspect-ratio:  1;
}
.foto-thumb img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
  transition:   opacity 0.2s;
}
.foto-thumb-link:hover .foto-thumb img { opacity: 0.85; }
.foto-thumb-desc {
  position:      absolute;
  bottom:        0; left: 0; right: 0;
  background:    rgba(0,0,0,0.55);
  color:         #fff;
  font-size:     10px;
  padding:       4px 6px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Botón extra-small */
.btn-xs {
  padding:   3px 8px;
  font-size: var(--font-size-xs);
}

/* ── Módulo Config — explorador de archivos y lista de roles ──────────────
   Extraído del <style> inline de modulos/config/index.php el 28/04/2026. */
.file-list {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.file-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 14px;
  border-bottom: 1px solid var(--color-border);
  background:    var(--color-bg-surface);
  font-size:     var(--font-size-sm);
}
.file-row:last-child { border-bottom: none; }
.file-row:hover      { background: var(--color-bg); }
.file-icon {
  flex-shrink: 0;
  font-size:   16px;
  color:       var(--color-text-muted);
  width:       22px;
  text-align:  center;
}
.file-name {
  flex:           1;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}
a.file-name, .file-name a       { color: var(--color-text); text-decoration: none; }
a.file-name:hover, .file-name a:hover { color: var(--color-highlight); }
.file-meta {
  flex-shrink: 0;
  color:       var(--color-text-muted);
  font-size:   var(--font-size-xs);
  white-space: nowrap;
}
.file-actions { flex-shrink: 0; }

#tabla-acceso th, #tabla-acceso td { vertical-align: middle; }

/* Lista de roles */
.roles-list {
  list-style:    none;
  padding:       0;
  margin:        0;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.rol-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 14px;
  border-bottom: 1px solid var(--color-border);
  background:    var(--color-bg-surface);
  font-size:     var(--font-size-sm);
  transition:    background 0.15s;
}
.rol-item:last-child { border-bottom: none; }
.rol-item:hover      { background: var(--color-bg); }
.rol-nombre          { flex: 1; }
.rol-nombre input    { width: 100%; }
.rol-actions {
  display:     flex;
  gap:         4px;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .fotos-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* ------------------------------------------------------------
   22. MÓDULO OBRAS: tab Datos — tablas de ficha
   ------------------------------------------------------------ */

/* Sección con título */
.datos-seccion {
  margin-bottom:  var(--space-8);
}

.datos-seccion-titulo {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--color-border);
}

/* Cabecera de sección con botón de acción a la derecha */
.datos-seccion-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-2);
  padding-bottom:  var(--space-2);
  border-bottom:   1px solid var(--color-border);
}
.datos-seccion-header .datos-seccion-titulo {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Tabla datos estáticos (concepto | valor) */
.datos-tabla {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}

.datos-tabla td,
.datos-tabla th {
  padding:      var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-accent-light);
  vertical-align: top;
}

.datos-tabla tr:last-child td,
.datos-tabla tr:last-child th {
  border-bottom: none;
}

.datos-tabla th {
  font-weight:  var(--font-weight-semibold);
  color:        var(--color-text-muted);
  font-size:    var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background:   var(--color-bg-surface);
}

.datos-concepto {
  width:        220px;
  min-width:    180px;
  color:        var(--color-text-muted);
  font-weight:  var(--font-weight-medium);
  white-space:  nowrap;
  padding-right: var(--space-6);
}

.datos-valor {
  color: var(--color-text);
}

/* Tabla dinámica (usos, capítulos, buscador E/S) — con hover */
.datos-tabla-dyn tbody tr:hover {
  background: var(--color-bg-surface);
}

/* Tipo de Entrada/Salida: oposición direccional NEUTRA (no alarma). Pares suaves de
   la paleta (estados semánticos de custom.css): info (frío) para Entrada, warning
   apagado (cálido) para Salida — con su texto oscuro de marca → buen contraste, baja
   saturación. El rojo (--color-danger) queda reservado a estados que requieren acción. */
.es-tipo{ display:inline-block; padding:.12rem .55rem; border-radius:1rem;
  font-size:.78rem; font-weight:600; line-height:1.35; white-space:nowrap; }
.es-tipo--in { background:var(--color-info-bg);    color:var(--color-info); }     /* tinte frío  → Entrada ← */
.es-tipo--out{ background:var(--color-warning-bg); color:var(--color-warning); }   /* cálido apagado → Salida → */

/* ── Tabla de presupuesto ── */
.presupuesto-tabla {
  margin-top: var(--space-2);
}

/* Filas más compactas para que el presupuesto/planificación quepan en pantalla */
.presupuesto-tabla td,
.presupuesto-tabla th {
  padding-top:    var(--space-1);
  padding-bottom: var(--space-1);
}
.presupuesto-tabla .cap-input {
  padding-top:    2px;
  padding-bottom: 2px;
}
.presupuesto-tabla .presupuesto-resumen td {
  padding-top:    3px;
  padding-bottom: 3px;
}

/* Inputs dentro de la tabla de capítulos */
.cap-input {
  width:         100%;
  border:        1px solid transparent;
  border-radius: var(--radius-sm);
  background:    transparent;
  padding:       3px 6px;
  font-size:     var(--font-size-sm);
  font-family:   inherit;
  color:         var(--color-text);
  transition:    border-color var(--transition-fast), background var(--transition-fast);
}
.cap-input:hover  { border-color: var(--color-border);        background: var(--color-accent-light);  }
.cap-input:focus  { outline: none; border-color: var(--color-border-strong);
                    background: var(--color-bg-surface);
                    box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.cap-importe-wrap { display: flex; align-items: center; gap: 4px; }
.cap-importe-wrap .cap-input { min-width: 0; }
.cap-euro         { color: var(--color-text-muted); font-size: var(--font-size-sm); flex-shrink: 0; }
.cap-numero-inp   { width: 64px; }
.cap-row-new .cap-input { border-color: var(--color-border); background: var(--color-bg-surface); }

/* Bloque de resumen (PEM, GG, BI, IVA, PGC) */
.presupuesto-resumen td {
  border-top:    2px solid var(--color-border);
  white-space:   nowrap;
  padding-top:   6px;
  padding-bottom: 6px;
}

.pres-subtotal td {
  background:  var(--color-bg-surface);
  font-size:   var(--font-size-sm);
  border-top:  1px solid var(--color-border-strong);
}

.pres-pct-row td {
  color:      var(--color-text-muted);
  font-size:  var(--font-size-sm);
  border-top: 1px solid var(--color-accent-light);
}

.pres-total td {
  background:  var(--color-bg-dark);
  color:       var(--color-text-inverse);
  font-size:   var(--font-size-base);
  border-top:  2px solid var(--color-border-dark);
}

/* Input de porcentaje inline */
.pct-input {
  display:      inline-block;
  width:        56px;
  padding:      2px 4px;
  margin:       0 4px;
  font-size:    var(--font-size-sm);
  border:       1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:   var(--color-bg-white);
  color:        var(--color-text);
  text-align:   right;
  transition:   border-color var(--transition-fast);
}
.pct-input:focus {
  outline:      none;
  border-color: var(--color-border-strong);
  box-shadow:   0 0 0 2px var(--color-accent-light);
}

/* ── Planificación económica de proyecto (tab Datos) ── */
.plan-proy-dur-wrap {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
}
.plan-proy-dur-wrap .form-control {
  width:         72px;
}
.plan-proy-dur-unit {
  color:         var(--color-text-muted);
  font-size:     var(--font-size-sm);
}
.plan-proy-tabla .plan-proy-mes-cell {
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text);
}
.plan-proy-tabla .plan-proy-pct-cell {
  color:         var(--color-text-muted);
  font-size:     var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.plan-proy-tabla .cap-importe-wrap { justify-content: flex-end; }
.plan-proy-empty td {
  color:         var(--color-text-muted);
  font-size:     var(--font-size-sm);
  padding:       var(--space-3);
  text-align:    center;
}

/* Referencia en la cabecera de ficha */
.obra-ref-header {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-semibold);
  letter-spacing: 0.06em;
  color:          var(--color-highlight);
  text-transform: uppercase;
  margin-bottom:  var(--space-1);
}

@media (max-width: 768px) {
  .datos-concepto {
    width:      140px;
    min-width:  120px;
  }
  .pct-input {
    width: 48px;
  }
}

/* ── Explorador NAS — navegador en cascada (registrar documentos) ───────────── */
.nas-explorer-list {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--space-3);
  background:    var(--color-bg-white);
}
.nas-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       7px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  user-select:   none;
  min-width:     0;
  transition:    background var(--transition-fast);
}
.nas-row:last-child { border-bottom: none; }

/* Carpeta */
.nas-row-dir             { cursor: pointer; }
.nas-row-dir:hover       { background: var(--color-bg-surface); }
.nas-row-chevron {
  font-size:   .65rem;
  color:       var(--color-text-light);
  flex-shrink: 0;
  transition:  transform var(--transition-fast), color var(--transition-fast);
}
.nas-row-dir:hover .nas-row-chevron {
  color:     var(--color-text-muted);
  transform: translateX(3px);
}
.nas-folder-icon {
  font-size:   1rem;
  color:       #c8a84b;
  flex-shrink: 0;
}

/* Archivo */
.nas-row-file           { cursor: pointer; }
.nas-row-file:hover     { background: var(--color-accent-light); }
.nas-row-file.selected  { background: var(--color-highlight-bg, #fff8ee); }
.nas-file-icon {
  font-size:   1rem;
  flex-shrink: 0;
  color:       var(--color-text-muted);
}
.nas-row-file.selected .nas-file-icon { color: var(--color-highlight); }

/* Nombre compartido */
.nas-row-nombre {
  flex:          1;
  font-size:     var(--font-size-sm);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.nas-file-nombre { /* alias de nas-row-nombre */ }

/* Tamaño del archivo */
.nas-row-size {
  font-size:    11px;
  color:        var(--color-text-light);
  flex-shrink:  0;
  white-space:  nowrap;
  padding-left: var(--space-2);
}

/* Check de selección */
.nas-check {
  font-size:   .9rem;
  flex-shrink: 0;
  color:       var(--color-text-light);
}
.nas-row-file.selected .nas-check { color: var(--color-highlight); }

/* ── Capturas de campo en ficha de visita ───────────────────────────────────── */
.visita-capturas-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--color-muted);
  margin-bottom:  .5rem;
}
.campo-fotos-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:                   .5rem;
}
.campo-foto-item {
  border-radius: var(--border-radius);
  overflow:      hidden;
  border:        1.5px solid var(--color-border);
  background:    #fff;
}
.campo-foto-item.archivada { opacity: .55; }
.campo-foto-thumb {
  width:       100%;
  aspect-ratio: 1;
  object-fit:  cover;
  cursor:      pointer;
  display:     block;
}
.campo-foto-thumb:hover { opacity: .85; }
.campo-foto-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .25rem .35rem;
  font-size:       .7rem;
  color:           var(--color-muted);
  gap:             .25rem;
}
.campo-audio-item {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .4rem .5rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  background:    #fff;
  margin-bottom: .4rem;
}
.campo-audio-item.archivada { opacity: .55; }
.campo-nota-item {
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  padding:       .6rem .75rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  background:    #fff;
  margin-bottom: .4rem;
}
.campo-nota-item.archivada { opacity: .55; }

/* ── Bandeja de campo ──────────────────────────────────────────────────────── */
.bandeja-visita-group {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: .25rem;
}
.bandeja-visita-group:first-child {
  border-top: none;
  padding-top: 0;
}

/* Checkbox sobre fotos */
.cap-check-label {
  position:   absolute;
  top:        5px;
  left:       5px;
  z-index:    3;
  background: rgba(255,255,255,.85);
  border-radius: 5px;
  padding:    2px 3px;
  line-height: 1;
  cursor:     pointer;
}
.cap-check-label input[type=checkbox] {
  width:  16px;
  height: 16px;
  cursor: pointer;
}

/* Foto seleccionada: resaltar */
.campo-foto-item.cap-seleccionado {
  outline: 3px solid var(--color-primary, #C97B65);
  outline-offset: 2px;
}
.campo-audio-item.cap-seleccionado,
.campo-nota-item.cap-seleccionado {
  background: rgba(201,123,101,.08);
  border-radius: 6px;
}

/* ── Documentos unificados (visita/view.php) ──────────────── */
.visita-doc-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.visita-doc-pill {
  padding: .25rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: .8rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.visita-doc-pill.active,
.visita-doc-pill:hover {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
}
.visita-doc-item {
  border-bottom: 1px solid var(--color-border);
  padding: .6rem 0;
}
.visita-doc-item:last-child { border-bottom: none; }
.visita-doc-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.visita-doc-icon {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
}
.visita-doc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;        /* nombre + meta en la misma línea (escritorio) */
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;            /* salta a 2ª línea si no cabe */
}
.visita-doc-nombre {
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.visita-doc-meta {
  font-size: .75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  /* En móvil apila vertical para que no se desborde */
  .visita-doc-info { flex-direction: column; gap: .15rem; }
}
.visita-doc-btns {
  display: flex;
  gap: .3rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.visita-doc-expand {
  padding: .5rem .25rem .25rem 2rem;
}
.visita-doc-expand audio {
  height: 36px;
}
.visita-doc-trans-texto {
  font-size: .85rem;
  color: var(--color-text);
  background: var(--color-bg);
  border-left: 3px solid var(--color-highlight);
  padding: .5rem .75rem;
  border-radius: 0 4px 4px 0;
  margin-top: .5rem;
}
.visita-doc-nota-texto {
  font-size: .88rem;
  color: var(--color-text);
  line-height: 1.5;
  padding: .4rem .5rem;
  background: var(--color-bg);
  border-radius: 4px;
}


/* ============================================================
   21. MÓDULO CALENDARIO
   ------------------------------------------------------------ */

.calendario-filtros {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.calendario-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.calendario-tipo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  margin: 0;
}

.calendario-tipo-chip:hover {
  background: var(--color-accent-light);
}

.calendario-tipo-chip input[type="checkbox"] {
  margin: 0;
  accent-color: var(--color-primary);
}

.calendario-tipo-chip:has(input:not(:checked)) {
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
}

.calendario-tipo-chip:has(input:not(:checked)) .chip-dot {
  opacity: 0.35;
}

.chip-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.chip-dot.chip-visita   { background: var(--color-info); }
.chip-dot.chip-inicio   { background: var(--color-success); }
.chip-dot.chip-fin-prev { background: var(--color-warning); }
.chip-dot.chip-fin-real { background: var(--color-estado-finalizada); }
.chip-dot.chip-hito     { background: var(--color-highlight); }

.calendario-wrapper {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* FullCalendar overrides — coherencia con el sistema */
.fc {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.fc .fc-toolbar-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: capitalize;
}

.fc .fc-button {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: var(--font-size-sm);
}

.fc .fc-button:hover {
  background: var(--color-accent-light);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.fc .fc-button-primary:disabled {
  background: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 1;
}

.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
  border-color: var(--color-border);
}

.fc .fc-col-header-cell {
  background: var(--color-bg-surface);
}

.fc .fc-col-header-cell-cushion {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  padding: var(--space-2);
  text-decoration: none;
}

.fc .fc-daygrid-day-number {
  color: var(--color-text);
  padding: var(--space-2);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.fc .fc-day-today {
  background: var(--color-highlight-bg) !important;
  box-shadow: inset 0 0 0 2px var(--color-highlight);   /* anillo de marca: HOY bien visible */
}

.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--color-highlight);
  font-weight: var(--font-weight-semibold);
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--color-text-light);
}

.fc-event {
  border: none;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.fc-event:hover {
  filter: brightness(0.95);
}

.fc-daygrid-event-dot {
  display: none;
}

/* Tipos de evento */
.ev-visita {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-left: 3px solid var(--color-info);
}

.ev-inicio {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-left: 3px solid var(--color-success);
}

.ev-fin-prev {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
}

.ev-fin-real {
  background: var(--color-success-bg);
  color: var(--color-estado-finalizada);
  border-left: 3px solid var(--color-estado-finalizada);
}

.ev-hito {
  background: var(--color-highlight-bg);
  color: var(--color-highlight);
  border-left: 3px solid var(--color-highlight);
}

.ev-hito.ev-completado {
  text-decoration: line-through;
  opacity: 0.75;
}

/* Vista lista (agenda) */
.fc-list-event:hover td {
  background: var(--color-accent-light) !important;
}

.fc-list-day-cushion {
  background: var(--color-bg-surface) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: var(--space-2);
  }
  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   UTILIDADES COMUNES — sustituyen estilos inline repetidos
   ══════════════════════════════════════════════════════════════════════ */

/* Visor de documentos (iframe container) */
.doc-viewer-wrap {
  font-size: .9rem;
  min-height: 300px;
}
.doc-viewer-sm {
  font-size: .82rem;
  min-height: 300px;
}

/* Iframe a pantalla completa dentro de su contenedor */
.iframe-full {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Altura mínima para selectores con filtros (alineación con botones) */
.h-select { height: 36px; }

/* Input de búsqueda con ancho máximo estándar */
.input-buscar { max-width: 380px; }

/* Previsualizaciones de logo (obras, config) */
.img-logo-preview {
  max-height: 60px;
  max-width: 200px;
  object-fit: contain;
}

/* Miniatura de documento en tarjeta */
.doc-thumb-img {
  max-height: 180px;
  object-fit: cover;
  width: 100%;
}

/* Cuadrícula de fotos del reporte: drag para reordenar + X para quitar */
.rep-foto-cell { cursor: grab; }
.rep-foto-cell.dragging { opacity: .4; cursor: grabbing; }
.rep-foto-cell.drop-target .rep-foto-wrap { outline: 2px dashed var(--color-highlight); outline-offset: 2px; }
.rep-foto-wrap { position: relative; display: block; }
.rep-foto-wrap img { display: block; }

/* Número de orden visible siempre */
.rep-foto-pos {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; line-height: 1.4;
  pointer-events: none;
}

/* Botón X — visible al hover de la celda */
.rep-foto-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}
.rep-foto-cell:hover .rep-foto-del { opacity: 1; transform: scale(1); }
.rep-foto-del:hover { background: var(--color-highlight); border-color: var(--color-highlight); }

/* Columna de ancho fijo en tablas (clases semánticas) */
.col-acciones  { width: 40px;  }
.col-fecha     { width: 110px; }
.col-estado    { width: 120px; }
.col-importe   { width: 110px; }
.col-ref       { width: 80px;  }

/* Icono de ayuda inline junto a botones */
.help-icon {
  cursor: help;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
}

/* ------------------------------------------------------------
   23. MÓDULO OBRAS: galería de logos del proyecto
   ------------------------------------------------------------ */
.logo-card {
  width:         140px;
  flex-shrink:   0;
}
.logo-card-img {
  width:         140px;
  height:        80px;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    var(--color-bg-surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
  padding:       8px;
}
.logo-card-img img {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------
   24. TAB CERTIFICACIÓN — tabla de control económico
   ------------------------------------------------------------ */

/* Toolbar de toggles */
.cert-toolbar {
  padding:       var(--space-2) 0;
  border-bottom: 1px solid var(--color-accent-light);
  margin-bottom: var(--space-4);
}

/* Toggle buttons de columnas */
.cert-col-tog {
  padding:        3px 10px;
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-pill);
  background:     var(--color-bg-surface);
  color:          var(--color-text-muted);
  font-size:      var(--font-size-xs);
  cursor:         pointer;
  transition:     background var(--transition-fast), color var(--transition-fast);
  white-space:    nowrap;
}
.cert-col-tog:hover    { background: var(--color-accent-light); color: var(--color-text); }
.cert-col-tog-on       { background: var(--color-highlight); border-color: var(--color-highlight); color: #fff; }
.cert-col-tog-on:hover { opacity: 0.88; color: #fff; }

/* Toolbar fila 2: pills de certificación más densos */
.cert-toolbar-certs { padding: var(--space-1) 0; border-bottom: none; margin-bottom: var(--space-3); }

/* Pill compacto de certificación con lápiz overlay */
.cert-pill {
  position:    relative;
  display:     inline-block;
  cursor:      grab;
}
.cert-pill.dragging { opacity: .4; cursor: grabbing; }
.cert-pill.drop-target > .cert-col-tog { outline: 2px dashed var(--color-accent); outline-offset: 1px; }
.cert-pill > .cert-col-tog { padding: 3px 9px; }
.cert-pill-fecha { font-size: 10px; opacity: .85; font-weight: normal; }

/* Lápiz overlay — invisible hasta hover */
.cert-pill-edit {
  position:        absolute;
  top:             -6px;
  right:           -6px;
  width:           18px;
  height:          18px;
  padding:         0;
  border-radius:   50%;
  border:          1px solid var(--color-border);
  background:      var(--color-bg);
  color:           var(--color-text-muted);
  font-size:       9px;
  line-height:     1;
  cursor:          pointer;
  opacity:         0;
  transform:       scale(.7);
  transition:      opacity var(--transition-fast), transform var(--transition-fast);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.cert-pill:hover .cert-pill-edit { opacity: 1; transform: scale(1); }
.cert-pill-edit:hover { background: var(--color-highlight); border-color: var(--color-highlight); color: #fff; }

/* Contenedor con scroll horizontal */
.cert-tabla-scroll {
  overflow-x:  auto;
  overflow-y:  visible;
  margin:      0 calc(-1 * var(--space-4));
  padding:     0 var(--space-4) var(--space-2);
}

/* Tabla principal */
.cert-tabla {
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
  min-width:       700px;
  width:           100%;
}

/* Cabecera grupo */
.cert-tabla thead tr:first-child th {
  background:    var(--color-bg-surface);
  padding:       var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-border);
  white-space:   nowrap;
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-muted);
}
.ct-grupo {
  border-left:  2px solid var(--color-accent-light);
}
.ct-pendiente {
  color:        var(--color-highlight) !important;
}

/* Bordes que separan bloques (Proyecto / Adjudicación / cada Cert / Pendiente)
   y se prolongan en thead, tbody y tfoot. */
.cert-tabla .ct-bnd        { border-left: 2px solid var(--color-border); }
.cert-tabla .ct-bnd-strong { border-left: 2px solid var(--color-highlight); }

/* Cabecera subcolumna */
.cert-tabla thead tr:last-child th {
  background:    var(--color-bg);
  padding:       var(--table-cell-py) var(--table-cell-px);
  border-bottom: 2px solid var(--color-border);
  white-space:   nowrap;
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  font-weight:   var(--font-weight-medium);
}

/* Celdas de datos */
.cert-tabla td {
  padding:       var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-accent-light);
  vertical-align: middle;
  white-space:   nowrap;
}
.cert-tabla tbody tr:hover td { background: var(--color-bg-surface); }

/* (Las clases ct-grp-a / ct-grp-b siguen en el HTML por si en el futuro
   queremos reactivar el velo pares/impares; ahora la separación visual
   entre columnas se confía solo a las líneas .ct-bnd / .ct-bnd-strong). */

/* Columnas fijas (nº y nombre) */
.ct-fix {
  position:   sticky;
  background: var(--color-bg);
  z-index:    2;
}
.cert-tabla tbody tr:hover .ct-fix { background: var(--color-bg-surface); }
.ct-num    { left: 0;    width: 36px;  min-width: 36px;  color: var(--color-text-muted); }
.ct-nombre { left: 36px; min-width: 160px; max-width: 260px;
             overflow: hidden; text-overflow: ellipsis;
             border-right: 2px solid var(--color-accent-light); }

/* Columna porcentaje */
.ct-pct { color: var(--color-text-muted); font-size: var(--font-size-xs); min-width: 54px; }

/* Columna acciones */
.ct-acciones { width: 68px; }

/* Filas de resumen (tfoot) */
.cert-tabla tfoot td {
  padding:        var(--table-cell-py) var(--table-cell-px);
  border-bottom:  1px solid var(--color-accent-light);
  white-space:    nowrap;
  vertical-align: middle;
}
.cert-tabla tfoot tr:first-child td { border-top: 2px solid var(--color-border); }
.ct-sum { background: var(--color-bg-surface) !important; }
.ct-sum-row td { background: var(--color-bg-surface); }
.ct-sum-row.fw-bold td { font-size: var(--font-size-sm); }

/* Fila destacada PEC adj sin IVA */
.ct-row-highlight td {
  background:  color-mix(in srgb, var(--color-highlight) 8%, var(--color-bg)) !important;
  color:       var(--color-highlight);
  font-weight: var(--font-weight-semibold);
}

/* Pills presupuesto */
/* .cert-pres-pill — definida más abajo (líneas ~4090) con gap:6px, esta versión sin gap está obsoleta */

/* Resumen financiero en modal certificación */
.cert-resumen-financiero {
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--font-size-sm);
  transition:    border-color var(--transition-fast);
}
/* Grid de 3 columnas: etiqueta | MES (editable) | A ORIGEN (informativo).
   La columna del mes va a la izquierda (más ancha por el input + flechas ▲▼)
   y la de a-origen a la derecha, en color tenue para que visualmente quede
   claro que es informativo y no editable.
   Orden elegido por Sara 06/06/2026: mes a la izquierda. */
.cert-resumen-row {
  display:               grid;
  grid-template-columns: 1fr 170px 140px;
  align-items:           baseline;
  padding:               3px 0;
  gap:                   var(--space-3);
}
.cert-resumen-row > span:first-child { color: var(--color-text-muted); }
.cert-resumen-orig {
  text-align:  right;
  color:       var(--color-text-muted);
  font-family: var(--font-mono);
  font-size:   inherit;
  white-space: nowrap;
}
.cert-resumen-mes { text-align: right; font-family: var(--font-mono); }
.cert-resumen-header { font-size: var(--font-size-xs); border-bottom: 1px solid var(--color-border); padding-bottom: 4px; margin-bottom: 4px; }
.cert-resumen-col-label {
  color:          var(--color-text-muted) !important;
  text-transform: uppercase;
  font-weight:    var(--font-weight-semibold);
  text-align:     right;
  font-size:      var(--font-size-xs);
  letter-spacing: 0.04em;
}
/* Filas que ocupan toda la anchura (aviso de modo manual) */
.cert-resumen-fullrow {
  grid-template-columns: 1fr auto;
}
.cert-resumen-info { font-size: var(--font-size-xs); }
.cert-resumen-sep  { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 6px; }
.cert-resumen-dest .cr-field { color: var(--color-highlight); font-weight: var(--font-weight-semibold); }
.cert-resumen-dest .cert-resumen-orig { color: var(--color-highlight); }
.cert-resumen-total {
  border-top:  2px solid var(--color-border);
  margin-top:  4px;
  padding-top: 6px;
  font-size:   var(--font-size-base);
}
.cert-resumen-orig-total { color: var(--color-text) !important; font-weight: var(--font-weight-semibold); }

/* Inputs del resumen — fondo sutil para que los valores sean legibles */
.cr-field {
  border:           none;
  border-bottom:    1px solid var(--color-border);
  background:       transparent;
  text-align:       right;
  font-family:      var(--font-mono);
  font-size:        inherit;
  font-weight:      inherit;
  color:            var(--color-text);
  width:            140px;
  padding:          2px 4px;
  border-radius:    0;
  transition:       background var(--transition-fast), color var(--transition-fast),
                    border-color var(--transition-fast);
  outline:          none;
}
.cr-field:focus {
  background:       var(--color-bg);
  border-bottom:    1px solid var(--color-highlight);
  outline:          none;
}

/* Wrapper campo calculado + flechas ▲▼ */
.cr-field-wrap {
  display:     flex;
  align-items: center;
  gap:         2px;
}
.cr-arrows {
  display:        flex;
  flex-direction: column;
  gap:            0;
}
.cr-arr {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       16px;
  height:      12px;
  padding:     0;
  border:      none;
  background:  transparent;
  color:       var(--color-text-muted);
  font-size:   9px;
  cursor:      pointer;
  line-height: 1;
}
.cr-arr:hover { color: var(--color-highlight); }

/* Modo manual: borde naranja en el contenedor, campos en ámbar */
.cr-modo-manual {
  border-color: #d97706 !important;
}
.cr-modo-manual .cr-calc {
  color:      #d97706 !important;
  background: color-mix(in srgb, #d97706 8%, transparent);
  border:     1px dashed #d97706;
}
.cr-modo-manual .cr-calc:focus {
  background: color-mix(in srgb, #d97706 12%, var(--color-bg));
  border:     1px solid #d97706;
}

/* ── Flechas ▲▼ en bloque "Datos económicos de proyecto" (tab Datos) ─────
   Permite ajustar manualmente los importes calculados con %, igual que en
   las certificaciones. Modo visual idéntico, clases independientes para
   no entremezclar handlers JS. */
.dpr-cell {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  justify-content: flex-end;
}
.dpr-val { display: inline-block; }
.dpr-arrows {
  display:        flex;
  flex-direction: column;
  gap:            0;
}
.dpr-arr {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:       16px;
  height:      12px;
  padding:     0;
  border:      none;
  background:  transparent;
  color:       var(--color-text-muted);
  font-size:   9px;
  cursor:      pointer;
  line-height: 1;
}
.dpr-arr:hover { color: var(--color-highlight); }

/* Modo manual: marca visualmente las celdas ajustadas con color ámbar */
.dpr-modo-manual .dpr-val {
  color:        #d97706;
  font-weight:  var(--font-weight-semibold);
}

.dpr-manual-aviso {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  color:       #d97706;
}

/* Resumen baja en modal presupuesto */
.cert-baja-resumen {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-4);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-accent-light);
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
}

/* Tabla caps (cert-caps-tabla) heredada */
.cert-caps-tabla tfoot td { border-top: 2px solid var(--color-border); }
.cert-plan-tabla th, .cert-plan-tabla td { font-size: var(--font-size-xs); }
.cert-plan-tabla td:first-child { white-space: nowrap; }

/* Pills selector de presupuesto */
.cert-pres-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        5px 14px;
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-pill);
  background:     var(--color-bg-surface);
  color:          var(--color-text-muted);
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-medium);
  cursor:         pointer;
  transition:     background var(--transition-fast), color var(--transition-fast),
                  border-color var(--transition-fast);
  white-space:    nowrap;
}
.cert-pres-pill:hover {
  background:     var(--color-accent-light);
  border-color:   var(--color-highlight);
  color:          var(--color-text);
}
.cert-pres-pill-active {
  background:     var(--color-highlight);
  border-color:   var(--color-highlight);
  color:          #fff;
}
.cert-pres-pill-active:hover {
  background:     var(--color-highlight);
  color:          #fff;
  opacity:        0.9;
}

/* Tabla capítulos del presupuesto */
.cert-caps-tabla tfoot td {
  border-top:  2px solid var(--color-border);
  font-size:   var(--font-size-sm);
}

/* Tabla planificación mensual */
.cert-plan-tabla th,
.cert-plan-tabla td {
  font-size: var(--font-size-xs);
}
.cert-plan-tabla td:first-child {
  white-space: nowrap;
}

/* ── Módulo Obras view.php — extraído del JS inline (sección 24, 27/04/2026) ─ */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 0.8s linear infinite; }
#cp-spin { display: inline-block; animation: spin 0.8s linear infinite; }

/* ── Certificación ──────────────────────────────────────────────── */
/* .cert-pres-pill y .cert-pres-pill-active definidas arriba (~línea 4083) con
   tokens del sistema. Las versiones hardcodeadas extraídas el 27/04 se han
   eliminado (28/04). */
.cert-caps-tabla tfoot td { border-top: 2px solid var(--color-border); background: var(--color-bg); }
.cert-plan-tabla th, .cert-plan-tabla td { font-size: 12px; padding: 6px 8px; }
.font-mono { font-family: var(--font-mono, monospace); }

/* Planificación — tabla comparativa */
.plan-tabla-scroll { overflow-x:auto; }
.plan-comp-table { border-collapse:collapse; min-width:500px; }
.plan-comp-table th, .plan-comp-table td { font-size:var(--font-size-sm); padding:2px 10px; line-height:1.25; }
.plan-comp-table tbody tr:hover { background:var(--color-bg-surface); }
.plan-col-mes  { white-space:nowrap; min-width:115px; text-align:center; }
.plan-col-plan { min-width:140px; border-left: 2px solid var(--color-border); }
.plan-col-real { min-width:105px; }   /* sin border-left: el bloque "Progreso real" no tiene línea separadora */
.plan-thead-top th, .plan-thead-sub th { background:var(--color-bg); }
.plan-thead-top th { border-bottom:1px solid var(--color-border); padding-bottom:6px; vertical-align:middle; }
.plan-thead-sub th { color:var(--color-text-muted); font-weight:normal; font-size:var(--font-size-xs); padding-top:1px; }
.plan-th-inner { display:flex; flex-direction:column; align-items:center; gap:1px; }
.plan-th-tipo  { font-weight:var(--font-weight-medium); }
.plan-th-nombre { font-size:11px; }
.plan-th-total { font-size:11px; }
.plan-th-actions { display:flex; gap:3px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
.plan-th-link  { font-size:11px; color:var(--color-text-muted); cursor:pointer; text-decoration:underline dotted; }
.plan-th-link:hover { color:var(--color-primary); }
.plan-mes-num  { font-weight:var(--font-weight-medium); }
.plan-mes-cal  { display:inline; font-size:10px; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-left:6px; }
.pem-cell-input { width:110px; min-width:80px; padding:1px 6px; height:auto; line-height:1.25; font-size:12px; }
.plan-cell-dimmed { color:var(--color-text-muted); }

/* Gráfico curva S debajo de la tabla — full width, exportable a PNG */
.plan-chart-wrap { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.plan-chart-canvas-wrap { position: relative; width: 100%; height: 380px; background: #fff; }
.plan-chart-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* Drag & drop para reordenar columnas (planificación + certificación) */
.plan-col-tog[draggable="true"], .cert-col-tog[draggable="true"] { cursor: grab; }
.plan-col-tog.dragging, .cert-col-tog.dragging { opacity: .4; cursor: grabbing; }
.plan-col-tog.drop-target, .cert-col-tog.drop-target { outline: 2px dashed var(--color-accent); outline-offset: 1px; }

/* ------------------------------------------------------------
   30. VISOR DE DOCUMENTOS (modulos/documentos/ver.php)
   ------------------------------------------------------------ */
.visor-body-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: #1a1a1a;
}
.visor-topbar {
  background:  #1a1a1a;
  color:       #f7f5f0;
  padding:     10px 16px;
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
  min-height:  52px;
}
.visor-topbar a              { color: #b8b0a8; text-decoration: none; font-size: 14px; white-space: nowrap; }
.visor-topbar a:hover        { color: #f7f5f0; }
.visor-doc-info              { flex: 1; min-width: 0; }
.visor-doc-nombre {
  font-size: 14px; font-weight: 600; color: #f7f5f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.visor-doc-meta              { font-size: 11px; color: #8a8279; margin-top: 1px; }
.visor-download-btn          { background: #333; padding: 6px 12px; border-radius: 6px; font-size: 13px; }

.visor-body { flex: 1; overflow: hidden; position: relative; }
.visor-body iframe, .visor-body img {
  width: 100%; height: 100%; border: none; display: block;
}
.visor-body img { object-fit: contain; background: #2a2a2a; }

.visor-contenido-html {
  width: 100%; height: 100%;
  overflow: auto;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
}
.visor-descarga {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; color: #b8b0a8; text-align: center; padding: 32px;
}
.visor-descarga i { font-size: 3rem; margin-bottom: 16px; opacity: .5; }
.visor-descarga p { margin-bottom: 20px; font-size: 14px; }
.visor-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: #b8b0a8; gap: 12px;
}
.visor-spinner {
  width: 24px; height: 24px;
  border: 3px solid #444;
  border-top-color: #b8b0a8;
  border-radius: 50%;
  animation: visor-spin .7s linear infinite;
}
@keyframes visor-spin { to { transform: rotate(360deg); } }
#tabla-excel { font-size: 13px; border-collapse: collapse; }
#tabla-excel td, #tabla-excel th {
  border: 1px solid #e0e0e0; padding: 4px 8px; white-space: nowrap;
}
#tabla-excel thead tr { background: #f5f5f5; font-weight: 600; }

/* ── Datos de portada del informe (tab Informe — Bloque 1, 28/04/2026) ────── */
.inf-portada-img-wrap { min-height: 60px; }
.inf-portada-img-card {
  display: inline-block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.inf-portada-img-preview {
  display: block;
  max-width: 320px;
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: calc(var(--radius) - 2px);
}
.inf-portada-img-acciones {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  justify-content: flex-end;
}
/* "guardado" en verde dentro del .form-text del título portada */
#inf-titulo-saved {
  color: var(--color-success, #198754) !important;
  font-weight: 600;
}

/* ── Filas de intervenciones (Contratista/s + Dirección Facultativa) ─────── */
/* Limpia el doble borde y alinea verticalmente los pills agente + rol + ✕.   */
.intervencion-row {
  align-items: center !important;
}
/* Igual altura para Selectize widget, select de rol, input rol-custom y botón ✕ */
.intervencion-row .selectize-input,
.intervencion-row .rol-select.form-control,
.intervencion-row .rol-custom,
.intervencion-row > .btn-quitar-row {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
}
/* Asegurar que el wrapper Selectize no añade margen extra que duplique el borde */
.intervencion-row .selectize-control { margin: 0; }
/* El doble borde viene de que Selectize copia la clase 'form-control' del
   <select> original al wrapper .selectize-control, y eso pinta su propio
   borde de Bootstrap por encima del que ya pinta .selectize-input. Solo
   neutralizamos ESE wrapper externo; el .selectize-input interno mantiene
   el formato unificado de todos los Selectize (fondo, borde, focus) que se
   define en la sección "Selectize personalizado" de este archivo (~líneas
   523-535). Para cambiar el fondo de TODOS los selectize, ir allí. */
.intervencion-row .selectize-control,
.intervencion-row .selectize-control.form-control {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}
/* El <select> original con form-control queda oculto por Selectize; reforzarlo */
.intervencion-row select.selectize-dyn { display: none !important; }
/* El input alternativo "rol-custom" aparece debajo del select rol cuando se elige
   "otro"; mantiene un pequeño separador pero ya no rompe la alineación general. */
.intervencion-row .rol-custom { margin-top: 4px !important; }
/* Botón quitar centrado en la fila */
.intervencion-row .btn-quitar-row { margin-top: 0 !important; align-self: center; }

/* ── Galería de logos del promotor (Bloque 2 — 28/04/2026) ─────────────── */
.inf-logos-promotor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
  min-height: 60px;
}
.inf-logo-promotor-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  min-width: 200px;
  max-width: 320px;
  cursor: default;
  transition: opacity .15s, outline .15s;
}
.inf-logo-promotor-item.dragging  { opacity: .35; }
.inf-logo-promotor-item.drop-target {
  outline: 2px dashed var(--color-accent);
  outline-offset: 2px;
}
.inf-logo-promotor-handle {
  color: var(--color-text-muted);
  cursor: grab;
  user-select: none;
  font-size: 1.1rem;
  line-height: 1;
}
.inf-logo-promotor-handle:active { cursor: grabbing; }
.inf-logo-promotor-content { flex: 1; min-width: 0; }
.inf-logo-promotor-img {
  display: block;
  max-height: 64px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.inf-logo-promotor-texto-inp { font-size: var(--font-size-sm); }

/* ── Editores rich de las secciones del informe (29/04/2026) ─────────────── */
/* Aspecto idéntico al <textarea> que reemplazan, pero soportan <img>.       */
.inf-rich-editor {
  min-height: 90px;
  max-height: 480px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}
.inf-rich-editor:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.12);
}
/* Placeholder cuando está vacío */
.inf-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}
.inf-rich-editor img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 4px 0;
}
/* Cursor de mover sobre imagen seleccionada (UX más claro al redimensionar) */
.inf-rich-editor img:hover { cursor: pointer; }
.inf-rich-editor img.inf-img-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Overlay de resize manual (handles en las 4 esquinas).
   El overlay es position:absolute (anclado al body) y se reposiciona en JS
   cuando la imagen se mueve por scroll/resize. */
#inf-img-resize-overlay {
  position: absolute;
  pointer-events: none;     /* no bloquea click sobre la imagen */
  z-index: 1000;
}
.inf-img-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 2px;
  pointer-events: auto;     /* los handles sí responden al mouse */
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.inf-img-handle-tl { left:  -7px; top:    -7px; cursor: nwse-resize; }
.inf-img-handle-tr { right: -7px; top:    -7px; cursor: nesw-resize; }
.inf-img-handle-bl { left:  -7px; bottom: -7px; cursor: nesw-resize; }
.inf-img-handle-br { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* ── Preview sección 7 (Control económico) en tab Informe ──────────────── */
.econ-preview { font-size: var(--font-size-sm); line-height: 1.45; }
.econ-preview-titulo {
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  margin: var(--space-2) 0 var(--space-2);
}
.econ-preview-titulo:first-child { margin-top: 0; }
.econ-preview-tabla            { font-size: 0.82em; }
.econ-preview-tabla thead th   {
  background:    #E6E6E6;
  font-weight:   var(--font-weight-semibold);
  text-align:    center;
  vertical-align: middle;
}
.econ-preview-tabla tbody td   { text-align: center; vertical-align: middle; }

/* ────────────────────────────────────────────────────────────────────────────
   PROYECTOS (Fase 1) — añadido 25/05/2026
   Prefijo .proy-* para distinguir del módulo OBRAS.
   ──────────────────────────────────────────────────────────────────────────── */

/* Listado y vínculos */
.proy-col-codigo {
  font-family:    var(--font-family-mono);
  white-space:    nowrap;
  font-weight:    var(--font-weight-semibold);
}
.proy-codigo-link,
.proy-nombre-link {
  color:           var(--color-text);
  text-decoration: none;
}
.proy-codigo-link:hover,
.proy-nombre-link:hover {
  color:           var(--color-highlight);
  text-decoration: underline;
}

/* Código en cabecera de ficha */
.proy-codigo-header {
  font-family: var(--font-family-mono);
  color:       var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* Badges de estado · reutilizan .badge-estado como base.
   Mapeo cromático aproximado a la paleta existente de obras. */
.proy-badge-estudio    { color: var(--color-estado-prevision);   background: var(--color-bg-surface); }
.proy-badge-oferta     { color: var(--color-estado-paralizada);  background: var(--color-warning-bg); }
.proy-badge-concurso   { color: #5a3a8a;                         background: #ece5f5; }
.proy-badge-proyecto   { color: var(--color-estado-ejecucion);   background: var(--color-info-bg); }
.proy-badge-cerrado    { color: var(--color-estado-finalizada);  background: var(--color-success-bg); }
.proy-badge-descartado { color: var(--color-estado-anulada);     background: var(--color-danger-bg); }

/* Tabs deshabilitadas (placeholders Fase 1) */
.nav-tabs-custom .nav-link.proy-tab-disabled {
  color:   var(--color-text-muted);
  opacity: 0.6;
  font-style: italic;
}
.nav-tabs-custom .nav-link.proy-tab-disabled:hover {
  background: var(--color-bg-surface);
  cursor:     help;
}

/* Enlaces de sidebar deshabilitados (Calendario / Informes ISO en mundo Proyectos) */
.sidebar-nav .proy-nav-disabled {
  color:      var(--color-text-muted);
  opacity:    0.55;
  cursor:     not-allowed;
  font-style: italic;
}
.sidebar-nav .proy-nav-disabled:hover {
  background: transparent;
  color:      var(--color-text-muted);
}
.sidebar-nav .proy-nav-disabled .nav-icon {
  opacity: 0.6;
}

/* Enlace "← Volver al menú principal" del sidebar */
.sidebar-nav .sidebar-back-link {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 16px;
  margin:          6px 8px 12px;
  font-size:       0.85em;
  color:           var(--color-text-muted);
  text-decoration: none;
  border-radius:   4px;
  background:      var(--color-bg-surface);
  transition:      background var(--transition-base);
}
.sidebar-nav .sidebar-back-link:hover {
  background: var(--color-accent);
  color:      var(--color-primary);
}

/* Dashboard de proyectos · estadísticas */
.proy-dash-stats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-md);
  align-items:   stretch;
  margin-bottom: var(--space-lg);
}
.proy-dash-stat-big {
  flex:          0 0 auto;
  min-width:     220px;
  padding:       var(--space-md) var(--space-lg);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  display:       flex;
  flex-direction: column;
  justify-content: center;
  gap:           4px;
}
.proy-dash-num {
  font-size:   2.2rem;
  font-weight: var(--font-weight-bold);
  color:       var(--color-highlight);
  line-height: 1;
}
.proy-dash-lbl {
  font-size:   0.95em;
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}
.proy-dash-sublbl {
  font-size: 0.72em;
  color:     var(--color-text-muted);
  letter-spacing: 0.05em;
}
.proy-dash-breakdown {
  flex:          1 1 auto;
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  align-content: center;
  align-items:   center;
  padding:       var(--space-sm) var(--space-md);
  background:    var(--color-bg-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.proy-dash-chip {
  font-size: 0.78em;
}

/* Cards de proyecto en el dashboard (variante de .obra-card sin sparkline/badges) */
.proy-card-cliente {
  font-size:   0.85em;
  color:       var(--color-text-muted);
  padding:     6px 0 0;
  border-top:  1px dashed var(--color-border);
  margin-top:  var(--space-sm);
}

/* ── Aviso de entorno de PRUEBAS (solo casa; ver includes/_entorno_banner.php) ── */
.entorno-pruebas-marco{
  position:fixed; inset:0; border:4px solid #e8590c;
  pointer-events:none; z-index:99998;
}
.entorno-pruebas-badge{
  position:fixed; bottom:0; right:0;
  background:#e8590c; color:#fff;
  font-weight:700; font-size:12px; line-height:1.2;
  padding:7px 12px; border-top-left-radius:8px; letter-spacing:.5px;
  pointer-events:none; z-index:99999;
  box-shadow:0 0 8px rgba(0,0,0,.25);
}

/* ── Navegador NAS del módulo PROYECTOS (explorador.php) ───────────────────── */
.proy-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:.25rem 0 1rem; }
.proy-breadcrumb-sep{ color:var(--color-text-muted,#9aa5b1); }
.proy-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.proy-crear{ display:inline-block; }
.proy-crear summary{ list-style:none; cursor:pointer; }
.proy-crear summary::-webkit-details-marker{ display:none; }
.proy-crear-form{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; max-width:640px; }
.proy-crear-form .form-control{ flex:1 1 180px; }
.proy-lista{ list-style:none; margin:0; padding:0; border:1px solid var(--color-border,#e3e8ee); border-radius:.45rem; overflow:hidden; }
.proy-lista li{ display:flex; align-items:stretch; border-bottom:1px solid var(--color-border,#e3e8ee); }
.proy-lista li:last-child{ border-bottom:none; }
.proy-lista li > a, .proy-lista li > .proy-archivo{ display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; text-decoration:none; color:inherit; }
.proy-lista li > a:first-child, .proy-lista li > .proy-archivo{ flex:1 1 auto; min-width:0; }
.proy-lista li > a:hover{ background:var(--color-bg-subtle,#f5f7fa); }
.proy-lista li .proy-archivo{ color:var(--color-text-muted,#6b7280); }
.proy-ficha-link{ border-left:1px solid var(--color-border,#e3e8ee); white-space:nowrap; color:var(--color-text-muted,#6b7280) !important; }

/* ── Buscador de origen (modal Nuevo proyecto) ───────────────────────────── */
.proy-origen-res{ max-height:200px; overflow-y:auto; margin-bottom:.4rem; }
.proy-origen-item{ display:block; padding:.4rem .6rem; border:1px solid var(--color-border,#e3e8ee); border-top:none; text-decoration:none; color:inherit; }
.proy-origen-res .proy-origen-item:first-child{ border-top:1px solid var(--color-border,#e3e8ee); }
.proy-origen-item:hover{ background:var(--color-bg-subtle,#f5f7fa); }
.proy-origen-vacio{ padding:.4rem .6rem; color:var(--color-text-muted,#6b7280); }

/* ── Tablero de proyecto (ficha del expediente): estado deducido + timeline ── */
.proy-tablero{ border:1px solid var(--color-border,#e3e8ee); border-radius:.5rem; padding:.75rem .9rem; margin-bottom:.75rem; }
.proy-tablero-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.proy-tablero-head a{ font-weight:600; text-decoration:none; color:inherit; }
.proy-tablero-head a:hover{ text-decoration:underline; }
.proy-timeline{ list-style:none; margin:.2rem 0 0; padding:0; border-left:2px solid var(--color-border,#e3e8ee); }
.proy-timeline li{ position:relative; padding:.15rem 0 .15rem .8rem; font-size:.92em; }
.proy-timeline li::before{ content:''; position:absolute; left:-5px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--color-border,#cbd2d9); }
.proy-timeline-fecha{ color:var(--color-text-muted,#6b7280); margin-right:.4rem; font-variant-numeric:tabular-nums; }

/* Estado deducido: píldora suave (listado y ficha) */
.proy-estado-badge{
  display:inline-block; padding:.16rem .55rem; border-radius:1rem;
  font-size:.78rem; font-weight:500; line-height:1.25; white-space:nowrap;
  text-decoration:none; border:1px solid transparent;
}
.proy-lista li > a.proy-lista-main{ flex:0 1 auto; }
.proy-lista li > a.proy-estado-badge{
  flex:0 0 auto; align-self:center;
  margin:0 .35rem; padding:.16rem .55rem;
  border-radius:1rem; font-size:.78rem; font-weight:500; line-height:1.25;
  white-space:nowrap; text-decoration:none; border:1px solid transparent;
}
.proy-lista li > a.proy-estado-badge:hover{ text-decoration:none; filter:brightness(.97); }
.proy-lista li > a.proy-ficha-link{ margin-left:auto; }
/* Badge "vacía" (span) + su papelera: centrados en la fila y compactos
   (sin esto, align-items:stretch del <li> los estira a toda la altura → pastilla gigante). */
.proy-lista li > .proy-estado-badge{ align-self:center; padding:.08rem .4rem; }
.proy-lista li > form{ align-self:center; display:inline-flex; align-items:center; }
.proy-lista li > form .bi-trash{ font-size:.85rem; }
/* Variantes suaves (mismo registro que el chivato amarillo) */
.proy-estado--warning{ background:#fff3cd; color:#664d03; border-color:#ffe69c; }
.proy-estado--danger { background:#f8d7da; color:#842029; border-color:#f1aeb5; }
.proy-estado--primary{ background:#cfe2ff; color:#084298; border-color:#9ec5fe; }
.proy-estado--success{ background:#d1e7dd; color:#0f5132; border-color:#a3cfbb; }
.proy-estado--light, .proy-estado--secondary{ background:#e9ecef; color:#5c636a; border-color:#dee2e6; }
.proy-estado--dark{ background:#ced4da; color:#343a40; border-color:#adb5bd; }
.proy-estado--muted{ background:#f1efec; color:#8a8279; border-color:#e0dcd5; }
.proy-volver-pendiente{ font-size:.78rem; padding:.1rem .25rem; }
.proy-estado-fecha{ font-size:.72rem; font-variant-numeric:tabular-nums; }
/* Leyenda de colores (símbolo + significado) */
.proy-leyenda{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .7rem; margin:.2rem 0 .6rem; font-size:.72rem; color:var(--color-text-muted,#6b7280); }
.proy-leyenda-item{ display:inline-flex; align-items:center; gap:.28rem; white-space:nowrap; }
.proy-leyenda-item .proy-estado-badge{ padding:.08rem .3rem; }
/* Fase "fuera de la app": aviso + botón Adoptar, alineado a la derecha de la fila */
.proy-lista li > .proy-huerfana{ display:flex; align-items:center; gap:.5rem; margin-left:auto; padding:.35rem .85rem; white-space:nowrap; }
.proy-huerfana .proy-adoptar-form{ margin:0; }
/* Cuadro de mando: texto del último hito (se recorta si no cabe) */
.proy-dash-hito{ font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.form-section-title .proy-estado-badge{ vertical-align:middle; margin-right:.3rem; }
/* Al saltar desde el badge, resaltar la tarjeta destino en la ficha */
.proy-tablero:target{ box-shadow:0 0 0 2px var(--color-primary,#C97B65); }

/* ═══════════ Panel / Dashboard visual de PROYECTOS ═══════════ */
/* KPIs (contadores de cabecera, clicables) */
.proy-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:.4rem; }
.proy-kpi{ display:block; padding:1rem 1.15rem; background:var(--color-bg-surface,#f5f3f0);
  border:1px solid var(--color-border,#d4cbb8); border-left-width:4px; border-radius:.6rem;
  text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s; }
.proy-kpi:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; }
.proy-kpi-num{ font-size:2rem; font-weight:700; line-height:1; color:var(--color-primary,#1a1a1a); font-variant-numeric:tabular-nums; }
.proy-kpi-lbl{ margin-top:.35rem; font-size:.82rem; color:var(--color-text-muted,#8a8279); display:flex; align-items:center; gap:.35rem; }
.proy-kpi--neutral{ border-left-color:var(--color-secondary,#b8b0a8); }
.proy-kpi--primary{ border-left-color:#5b8fb0; }
.proy-kpi--danger { border-left-color:var(--color-highlight,#C97B65); }
.proy-kpi--warning{ border-left-color:#d9a441; }

/* Tarjetas de proyecto (atención + recientes) */
.proy-dash-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.proy-dash-card{ display:block; padding:.9rem 1rem; background:#fff;
  border:1px solid var(--color-border,#d4cbb8); border-radius:.6rem; text-decoration:none; color:inherit;
  transition:transform .12s, box-shadow .12s; }
.proy-dash-card:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; }
.proy-dash-card-top{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.55rem; }
.proy-dash-card-cod{ font-weight:700; color:var(--color-primary,#1a1a1a); }
.proy-dash-card-nom{ font-size:.9rem; color:#3a3a3a; line-height:1.25; margin-top:.1rem; }
.proy-dash-card-edif{ margin-top:.5rem; font-size:.78rem; color:var(--color-text-muted,#8a8279);
  display:flex; align-items:center; gap:.3rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Accesos rápidos */
.proy-acceso-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.proy-acceso{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  padding:.85rem .8rem; background:var(--color-bg-surface,#f5f3f0); border:1px solid var(--color-border,#d4cbb8);
  border-radius:.6rem; text-decoration:none; color:var(--color-primary,#1a1a1a);
  transition:transform .12s, box-shadow .12s, border-color .12s; }
.proy-acceso:hover{ transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08);
  border-color:var(--color-highlight,#C97B65); text-decoration:none; }
.proy-acceso i{ font-size:1.3rem; color:var(--color-highlight,#C97B65); }
.proy-acceso span{ font-size:.82rem; font-weight:500; }

@media (max-width:640px){ .proy-kpis{ grid-template-columns:repeat(2,1fr); } }

/* Botones de filtro por categoría (chips) */
/* Panel de proyectos: cabecera compacta (gana alto vertical, sin tocar el resto de la app). */
.page-header--compact{ margin-bottom:var(--space-2); padding-bottom:var(--space-1); }
.page-header--compact h1{ font-size:var(--font-size-lg); }
.page-header--compact .page-subtitle{ margin-top:1px; }
.proy-filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.55rem 0 .2rem; }
.proy-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .7rem;
  font-size:.84rem; border:1px solid var(--color-border,#d4cbb8); border-radius:1.2rem;
  background:#fff; color:var(--color-text-muted,#8a8279); text-decoration:none; transition:all .12s; }
.proy-chip:hover{ border-color:var(--color-highlight,#C97B65); color:var(--color-primary,#1a1a1a); text-decoration:none; }
.proy-chip.is-active{ background:var(--color-highlight,#C97B65); border-color:var(--color-highlight,#C97B65); color:#fff; }

/* Etiqueta de categoría dentro de la tarjeta (proyecto/instalación/concurso…) */
.proy-cat-chip{ display:inline-block; margin-top:.6rem; padding:.1rem .5rem; font-size:.7rem;
  font-weight:500; letter-spacing:.02em; border-radius:.4rem; background:var(--color-bg-surface,#f5f3f0);
  color:var(--color-text-muted,#8a8279); border:1px solid var(--color-border,#d4cbb8); }
.proy-cat--instalaciones{ background:#eaf1f4; color:#2f5b70; border-color:#cfe0e8; }
.proy-cat--captacion{ background:#f4eee6; color:#8a5a2b; border-color:#e7d6c2; }

/* Bloque "Resto": un punto más apagado para no robar foco a lo accionable */
.proy-dash-grid--muted .proy-dash-card{ opacity:.82; }
.proy-dash-grid--muted .proy-dash-card:hover{ opacity:1; }

/* Mini-Gantt del panel: misma rejilla que el calendario, más compacto */
.gantt--mini{ min-width:560px; }
.gantt--mini .gantt-label{ font-size:.78rem; font-weight:600; padding:.3rem .55rem; }
.gantt--mini .gantt-label small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gantt--mini .gantt-mlabel{ font-size:.64rem; padding:.22rem .1rem; }
.gantt--mini .gbar{ font-size:.62rem; margin:.13rem .08rem; padding:.06rem .22rem; border-radius:.25rem; }
.gantt--mini .gantt-track-empty{ font-size:.74rem; padding:.3rem .55rem; }
.g-inst{ color:#2f5b70; font-size:.78rem; }
/* Label de fila enriquecido: icono de estado + código (enlace) + nombre */
.gantt-label-top{ display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; }
.gantt-label-cod{ color:var(--color-primary,#1a1a1a); text-decoration:none; font-weight:600; }
.gantt-label-cod:hover{ text-decoration:underline; }
.gantt--mini .gantt-label .proy-estado-badge{ padding:.05rem .28rem; font-size:.66rem; }
.g-cap{ color:#8a5a2b; font-size:.78rem; }
/* Gantt con scroll horizontal (rango ilimitado): el nombre del trabajo queda fijo a la izquierda */
/* width:max-content hace que el Gantt crezca al ancho real de sus columnas → el
   contenedor (.gantt-wrap, overflow-x:auto) detecta el desborde y genera el scroll. */
.gantt--scroll{ width:max-content; min-width:100%; }
.gantt--scroll .gantt-label{ position:sticky; left:0; z-index:2; background:#fff; }
/* Encuadre simétrico: línea al final del contenido (como el borde del nombre a la
   izquierda) para que el último mes vacío se vea y la barra no parezca cortada. */
.gantt--scroll .gantt-head, .gantt--scroll .gantt-row{ border-right:1px solid var(--color-border,#e3e8ee); }
.gantt--scroll .gantt-head .gantt-label{ background:var(--color-bg-subtle,#f5f7fa); }
.gantt-wrap[data-gantt-scroll]{ scroll-behavior:smooth; }
/* Cuadrícula: línea vertical finísima al inicio de cada mes, bajando por todas las
   filas (no perderse al leer). Se alinea con el ancho de mes real (--gmesw, que el JS
   ajusta para que la franja útil quepa) y arranca tras la columna de nombre (--lblw).
   La etiqueta sticky (fondo blanco) tapa las líneas en su zona. */
.gantt--scroll .gantt-row{
  background-image:repeating-linear-gradient(to right,
    var(--gline,#eef1f5) 0, var(--gline,#eef1f5) 1px,
    transparent 1px, transparent var(--gmesw,46px));
  background-position-x:var(--lblw,170px);
}
/* Edición de fechas de plazo del concurso en la ficha del expediente */
.fc-vida-plazo{ align-items:flex-start; }
.fc-vida-plazo-campos{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; }
.fc-vida-lbl{ font-size:.8rem; color:var(--color-text-muted,#8a8279); display:inline-flex; align-items:center; gap:.3rem; }
.fc-vida-lbl input[type=date]{ font-size:.82rem; padding:.12rem .35rem; }
/* Form de edición de una captación (tipo/estado · código/nombre · plazo) */
.fc-vida-form{ border-bottom:1px dashed var(--color-border,#d4cbb8); padding-bottom:.5rem; margin-bottom:.5rem; }
.fc-vida-form:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.fc-vida-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.fc-vida-inp, .fc-vida-sel{ font-size:.85rem; padding:.18rem .4rem; border:1px solid var(--color-border,#d4cbb8); border-radius:.3rem; background:#fff; }
.fc-vida-inp--cod{ width:110px; font-weight:600; }
.fc-vida-inp--nom{ flex:1; min-width:160px; }
.fc-vida-abrir{ font-size:.82rem; }
/* Archivar proyecto: marca + botón en la tarjeta de la ficha */
.fc-fila--archivado{ opacity:.65; }
.fc-fila--archivado:hover{ opacity:1; }
.fc-arch-form{ display:inline-block; margin:0 0 0 .4rem; }
.fc-arch-btn{ font-size:.78rem; padding:.1rem .5rem; white-space:nowrap; }

/* Notas dirigidas (post-it) del panel */
.proy-notas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.proy-nota{ display:flex; flex-direction:column; background:#fdf6d8; border:1px solid #ecdf9f;
  border-radius:.5rem; padding:.65rem .75rem; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.proy-nota-texto{ font-size:.88rem; color:#4a4533; line-height:1.35; white-space:pre-wrap; word-break:break-word; }
.proy-nota-meta{ margin-top:.7rem; padding-top:.55rem; border-top:1px dashed #e3d59a;
  display:flex; flex-direction:column; gap:.2rem; font-size:.76rem; }
.proy-nota-proy{ color:#7a6a2e; text-decoration:none; font-weight:500; }
.proy-nota-proy:hover{ text-decoration:underline; }
.proy-nota-para{ color:#8a7a3a; }
.proy-nota-autor{ color:#a59a6a; }
.proy-nota-acciones{ margin-top:.6rem; display:flex; gap:.4rem; justify-content:flex-end; }
.proy-nota-destgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.2rem .8rem; max-height:190px; overflow:auto; padding:.2rem; border:1px solid var(--color-border,#d4cbb8); border-radius:.4rem; }

/* ═══════════ Calendario / Gantt de proyectos ═══════════ */
.gantt-wrap{ overflow-x:auto; border:1px solid var(--color-border,#e3e8ee); border-radius:.5rem; }
.gantt{ min-width:680px; }
.gantt-head, .gantt-row{ display:grid; align-items:stretch; }
.gantt-head{ border-bottom:1px solid var(--color-border,#e3e8ee); background:var(--color-bg-subtle,#f5f7fa); }
.gantt-row{ border-bottom:1px solid var(--color-border,#eef1f5); position:relative; }
.gantt-row:last-child{ border-bottom:none; }
.gantt-label{ grid-column:1; padding:.5rem .7rem; font-size:.86rem; font-weight:600; border-right:1px solid var(--color-border,#e3e8ee); display:flex; flex-direction:column; justify-content:center; gap:.1rem; }
.gantt-label small{ font-weight:400; color:var(--color-text-muted,#6b7280); }
.gantt-mlabel{ padding:.35rem .2rem; text-align:center; font-size:.72rem; line-height:1.1; color:var(--color-text-muted,#6b7280); border-left:1px solid var(--color-border,#eef1f5); }
.gantt-mlabel.is-now{ color:var(--color-primary,#C97B65); font-weight:700; }
.gantt-track-empty{ padding:.5rem .7rem; color:var(--color-text-muted,#9aa3ad); font-size:.82rem; font-style:italic; }
/* Barra de fase */
.gbar{ align-self:center; margin:.28rem .12rem; padding:.18rem .4rem; border-radius:.35rem; font-size:.74rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid rgba(0,0,0,.08); }
.gbar.is-open{ background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.gbar--anteproyecto{ background:#7aa7d8; }
.gbar--basico{ background:#4f80c4; }
.gbar--basico_ejecucion{ background:#6a5acd; }
.gbar--ejecucion{ background:#C97B65; }
.gbar--actividad{ background:#d98c34; }
.gbar--obra{ background:#5aa468; }
.gbar--fin_de_obra{ background:#3f9b94; }
.gbar--otros{ background:#9aa3ad; }
.gbar--captacion{ background:#c79a3a; }
/* Lista de captación (filtro Captación del panel): acceso a la ficha de cada concurso */
.proy-cap-lista{ display:flex; flex-direction:column; gap:.4rem; }
.proy-cap-fila{ display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; background:#fff;
  border:1px solid var(--color-border,#d4cbb8); border-radius:.5rem; text-decoration:none; color:inherit;
  transition:border-color .12s, box-shadow .12s; }
.proy-cap-fila:hover{ border-color:var(--color-highlight,#C97B65); box-shadow:0 2px 8px rgba(0,0,0,.06); text-decoration:none; }
.proy-cap-cod{ font-weight:600; color:var(--color-primary,#1a1a1a); }
.proy-cap-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proy-cap-tipo{ font-size:.78rem; color:var(--color-text-muted,#8a8279); }
.proy-cap-plazo{ font-size:.8rem; color:#8a5a2b; white-space:nowrap; }
.proy-cap-editar{ font-size:.82rem; color:var(--color-highlight,#C97B65); white-space:nowrap; }
/* Tabla de planificación (cuadro de mando): fechas de fase editables */
.plan-tabla{ font-size:.82rem; }
.plan-tabla td, .plan-tabla th{ vertical-align:middle; padding:.25rem .5rem; }
.plan-tabla .plan-fecha{ width:128px; display:inline-block; font-size:.8rem; padding:.12rem .35rem; }
.plan-fase{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; }
.plan-tabla strong{ font-size:.9rem; }
.plan-trab-vacio td{ background:var(--color-bg-surface,#f5f3f0); }
/* cabecera de cada proyecto en la tabla de planificación */
.plan-tabla tbody tr.plan-grupo td{ background:var(--color-bg-surface,#f5f3f0);
  border-top:2px solid var(--color-border,#d4cbb8); padding-top:.4rem; padding-bottom:.4rem; }
/* barra de filtros */
.plan-filtros{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.plan-filtros .form-control{ width:auto; max-width:230px; }
.plan-f-fecha{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--color-text-muted,#8a8279); margin:0; }
.plan-f-fecha input{ width:140px; }
#plan-f-cuenta{ font-size:.8rem; }

/* Calendario-agenda (FullCalendar) */
.agenda-wrap{ background:#fff; border:1px solid var(--color-border,#d4cbb8); border-radius:.6rem; padding:.55rem; }
/* Barra de filtros del calendario (expediente · fase) */
.agenda-filtros{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin:.1rem 0 .55rem; }
.agenda-filtros .form-control{ width:auto; min-width:160px; max-width:300px; }
.agenda-filtro-lbl{ font-size:.8rem; font-weight:600; color:var(--color-text-muted,#8a8279); display:inline-flex; align-items:center; gap:.3rem; }
.agenda-leyenda{ display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin:.4rem 0; font-size:.78rem; color:var(--color-text-muted,#8a8279); }
.agenda-ley-item{ display:inline-flex; align-items:center; gap:.35rem; }
.agenda-sw{ width:14px; height:14px; border-radius:.25rem; display:inline-block; }
/* Leyenda agrupada por familias (4 colores de la paleta de custom.css) */
.agenda-ley-grupo{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:.25rem .6rem; }
.agenda-ley-tit{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text,#1a1a1a); }
.evf-sw--fase  { background:var(--color-success-bg);   border:1px solid var(--color-success); }
.evf-sw--in    { background:var(--color-info-bg);      border:1px solid var(--color-info); }
.evf-sw--out   { background:var(--color-warning-bg);   border:1px solid var(--color-warning); }
.evf-sw--obra  { background:var(--color-highlight-bg); border:1px solid var(--color-highlight); }
.evf-sw--manual{ background:var(--color-bg-surface);   border:1px solid var(--color-border-strong); }
.evf-sw--prev  { background:transparent; border-style:dashed; }

/* ── Eventos del calendario-agenda: 4 FAMILIAS de color (todas de la paleta) ───
   Fases (verde) · Entradas-salidas (frío/cálido direccional) · Obra (terracota) ·
   Manual (neutro). Etiqueta corta + detalle en tooltip. El rojo (--color-danger)
   NO se usa aquí: queda reservado para lo que de verdad requiere acción. */
.fc-event.evf-fase  { --fc-event-bg-color:var(--color-success-bg);   --fc-event-border-color:var(--color-success);     --fc-event-text-color:var(--color-success);
                      background:var(--color-success-bg);   color:var(--color-success);    border-left:3px solid var(--color-success); }
.fc-event.evf-in    { --fc-event-bg-color:var(--color-info-bg);      --fc-event-border-color:var(--color-info);        --fc-event-text-color:var(--color-info);
                      background:var(--color-info-bg);      color:var(--color-info);       border-left:3px solid var(--color-info); }
.fc-event.evf-out   { --fc-event-bg-color:var(--color-warning-bg);   --fc-event-border-color:var(--color-warning);     --fc-event-text-color:var(--color-warning);
                      background:var(--color-warning-bg);   color:var(--color-warning);    border-left:3px solid var(--color-warning); }
.fc-event.evf-obra  { --fc-event-bg-color:var(--color-highlight-bg); --fc-event-border-color:var(--color-highlight);   --fc-event-text-color:var(--color-highlight);
                      background:var(--color-highlight-bg); color:var(--color-highlight);  border-left:3px solid var(--color-highlight); }
.fc-event.evf-manual{ --fc-event-bg-color:var(--color-bg-surface);   --fc-event-border-color:var(--color-border-strong);--fc-event-text-color:var(--color-text-muted);
                      background:var(--color-bg-surface);   color:var(--color-text-muted); border-left:3px solid var(--color-border-strong); }
/* Variante "previsión" (fecha tentativa): borde discontinuo y algo más tenue */
.fc-event.evf--prev { border-left-style:dashed; opacity:.8; }
/* Que el texto del evento salga ENTERO (nombre de fase, no número): letra algo menor y
   con salto de línea si hace falta. Acotado a la agenda de PROYECTOS (no toca OBRAS). */
.agenda-wrap .fc-daygrid-event .fc-event-title{ white-space:normal; font-size:.72rem; line-height:1.18; }
/* FullCalendar: que respire dentro de la paleta */
.fc .fc-toolbar-title{ font-size:1.05rem; }
/* Compacto: celdas más bajas, menos padding → cabe sin scroll */
.fc .fc-toolbar.fc-header-toolbar{ margin-bottom:.55rem; }
.fc .fc-button{ padding:.28rem .6rem; font-size:.85rem; }
.fc .fc-daygrid-day-frame{ min-height:3.6em; }
.fc .fc-daygrid-day-number{ font-size:.82rem; padding:1px 5px; }
.fc .fc-col-header-cell-cushion{ font-size:.78rem; padding:5px 4px; }
.fc .fc-daygrid-day-events{ margin-bottom:1px; }
.fc-event{ font-size:.78rem; }

/* Presupuesto por trabajo */
.presup-pct{ display:flex; flex-direction:column; gap:.5rem; }
.presup-pct label{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; }
.presup-pct input{ width:90px; }
.presup-tabla tfoot th{ border-top:2px solid var(--color-border,#d4cbb8); }
.presup-resumen td{ padding:.25rem .4rem; font-size:.9rem; }
.presup-resumen .presup-sub td{ border-top:1px solid var(--color-border,#d4cbb8); font-weight:600; }
.presup-resumen .presup-total td{ border-top:2px solid var(--color-primary,#1a1a1a); font-weight:700; font-size:1.05rem; }
.presup-resumen .presup-total td:last-child{ color:var(--color-highlight,#C97B65); }
.fc .fc-button-primary{ background:var(--color-primary,#1a1a1a); border-color:var(--color-primary,#1a1a1a); color:#fff; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):hover,
.fc .fc-button-primary:not(:disabled):active{ background:var(--color-highlight,#C97B65); border-color:var(--color-highlight,#C97B65); color:#fff; }
.fc .fc-button-primary:disabled{ background:var(--color-secondary,#b8b0a8); border-color:var(--color-secondary,#b8b0a8); color:#fff; opacity:.7; }
.fc .fc-button:focus{ box-shadow:none; }
.fc-event{ cursor:pointer; }
/* Línea de "hoy": borde izquierdo en la columna del mes actual */
.gantt-today{ align-self:stretch; border-left:2px solid var(--color-primary,#C97B65); pointer-events:none; z-index:3; }
/* Hito E/S sobre el calendario (puntito en su mes) */
.ghito{ align-self:end; justify-self:center; font-size:.72rem; line-height:1; margin-bottom:.15rem; }
.ghito--S{ color:#a8780c; }
.ghito--E{ color:#a4232f; }
/* Leyenda de fases */
.gantt-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.6rem 0; font-size:.8rem; color:var(--color-text-muted,#6b7280); }
.gantt-leyenda-item{ display:inline-flex; align-items:center; gap:.35rem; }
.gantt-leyenda-sw{ width:14px; height:14px; border-radius:.25rem; display:inline-block; }
/* Variante compacta (panel): misma densidad que la leyenda de estados */
.gantt-leyenda--compact{ gap:.25rem .7rem; margin:.15rem 0 .2rem; font-size:.72rem; }
.gantt-leyenda--compact .gantt-leyenda-item{ gap:.28rem; white-space:nowrap; }
.gantt-leyenda--compact .gantt-leyenda-sw{ width:12px; height:12px; }

/* Gantt: utilidades de columnas (label + N meses) */
.gtrack-1{ grid-template-columns:170px repeat(1, minmax(34px,1fr)); }
.gtrack-2{ grid-template-columns:170px repeat(2, minmax(34px,1fr)); }
.gtrack-3{ grid-template-columns:170px repeat(3, minmax(34px,1fr)); }
.gtrack-4{ grid-template-columns:170px repeat(4, minmax(34px,1fr)); }
.gtrack-5{ grid-template-columns:170px repeat(5, minmax(34px,1fr)); }
.gtrack-6{ grid-template-columns:170px repeat(6, minmax(34px,1fr)); }
.gtrack-7{ grid-template-columns:170px repeat(7, minmax(34px,1fr)); }
.gtrack-8{ grid-template-columns:170px repeat(8, minmax(34px,1fr)); }
.gtrack-9{ grid-template-columns:170px repeat(9, minmax(34px,1fr)); }
.gtrack-10{ grid-template-columns:170px repeat(10, minmax(34px,1fr)); }
.gtrack-11{ grid-template-columns:170px repeat(11, minmax(34px,1fr)); }
.gtrack-12{ grid-template-columns:170px repeat(12, minmax(34px,1fr)); }
.gtrack-13{ grid-template-columns:170px repeat(13, minmax(34px,1fr)); }
.gtrack-14{ grid-template-columns:170px repeat(14, minmax(34px,1fr)); }
.gtrack-15{ grid-template-columns:170px repeat(15, minmax(34px,1fr)); }
.gtrack-16{ grid-template-columns:170px repeat(16, minmax(34px,1fr)); }
.gtrack-17{ grid-template-columns:170px repeat(17, minmax(34px,1fr)); }
.gtrack-18{ grid-template-columns:170px repeat(18, minmax(34px,1fr)); }
.gtrack-19{ grid-template-columns:170px repeat(19, minmax(34px,1fr)); }
.gtrack-20{ grid-template-columns:170px repeat(20, minmax(34px,1fr)); }
.gtrack-21{ grid-template-columns:170px repeat(21, minmax(34px,1fr)); }
.gtrack-22{ grid-template-columns:170px repeat(22, minmax(34px,1fr)); }
.gtrack-23{ grid-template-columns:170px repeat(23, minmax(34px,1fr)); }
.gtrack-24{ grid-template-columns:170px repeat(24, minmax(34px,1fr)); }
.gtrack-25{ grid-template-columns:170px repeat(25, minmax(34px,1fr)); }
.gtrack-26{ grid-template-columns:170px repeat(26, minmax(34px,1fr)); }
.gtrack-27{ grid-template-columns:170px repeat(27, minmax(34px,1fr)); }
.gtrack-28{ grid-template-columns:170px repeat(28, minmax(34px,1fr)); }
.gtrack-29{ grid-template-columns:170px repeat(29, minmax(34px,1fr)); }
.gtrack-30{ grid-template-columns:170px repeat(30, minmax(34px,1fr)); }
.gs-1{ grid-column-start:1; }
.gs-2{ grid-column-start:2; }
.gs-3{ grid-column-start:3; }
.gs-4{ grid-column-start:4; }
.gs-5{ grid-column-start:5; }
.gs-6{ grid-column-start:6; }
.gs-7{ grid-column-start:7; }
.gs-8{ grid-column-start:8; }
.gs-9{ grid-column-start:9; }
.gs-10{ grid-column-start:10; }
.gs-11{ grid-column-start:11; }
.gs-12{ grid-column-start:12; }
.gs-13{ grid-column-start:13; }
.gs-14{ grid-column-start:14; }
.gs-15{ grid-column-start:15; }
.gs-16{ grid-column-start:16; }
.gs-17{ grid-column-start:17; }
.gs-18{ grid-column-start:18; }
.gs-19{ grid-column-start:19; }
.gs-20{ grid-column-start:20; }
.gs-21{ grid-column-start:21; }
.gs-22{ grid-column-start:22; }
.gs-23{ grid-column-start:23; }
.gs-24{ grid-column-start:24; }
.gs-25{ grid-column-start:25; }
.gs-26{ grid-column-start:26; }
.gs-27{ grid-column-start:27; }
.gs-28{ grid-column-start:28; }
.gs-29{ grid-column-start:29; }
.gs-30{ grid-column-start:30; }
.gs-31{ grid-column-start:31; }
.gsp-1{ grid-column-end:span 1; }
.gsp-2{ grid-column-end:span 2; }
.gsp-3{ grid-column-end:span 3; }
.gsp-4{ grid-column-end:span 4; }
.gsp-5{ grid-column-end:span 5; }
.gsp-6{ grid-column-end:span 6; }
.gsp-7{ grid-column-end:span 7; }
.gsp-8{ grid-column-end:span 8; }
.gsp-9{ grid-column-end:span 9; }
.gsp-10{ grid-column-end:span 10; }
.gsp-11{ grid-column-end:span 11; }
.gsp-12{ grid-column-end:span 12; }
.gsp-13{ grid-column-end:span 13; }
.gsp-14{ grid-column-end:span 14; }
.gsp-15{ grid-column-end:span 15; }
.gsp-16{ grid-column-end:span 16; }
.gsp-17{ grid-column-end:span 17; }
.gsp-18{ grid-column-end:span 18; }
.gsp-19{ grid-column-end:span 19; }
.gsp-20{ grid-column-end:span 20; }
.gsp-21{ grid-column-end:span 21; }
.gsp-22{ grid-column-end:span 22; }
.gsp-23{ grid-column-end:span 23; }
.gsp-24{ grid-column-end:span 24; }
.gsp-25{ grid-column-end:span 25; }
.gsp-26{ grid-column-end:span 26; }
.gsp-27{ grid-column-end:span 27; }
.gsp-28{ grid-column-end:span 28; }
.gsp-29{ grid-column-end:span 29; }
.gsp-30{ grid-column-end:span 30; }

/* Gantt: carriles para fases solapadas (grid-row) */
.gr-1{ grid-row:1; }
.gr-2{ grid-row:2; }
.gr-3{ grid-row:3; }
.gr-4{ grid-row:4; }
.gr-5{ grid-row:5; }
.gr-6{ grid-row:6; }
.gr-7{ grid-row:7; }
.gr-8{ grid-row:8; }
.grsp-1{ grid-row:1 / span 1; }
.grsp-2{ grid-row:1 / span 2; }
.grsp-3{ grid-row:1 / span 3; }
.grsp-4{ grid-row:1 / span 4; }
.grsp-5{ grid-row:1 / span 5; }
.grsp-6{ grid-row:1 / span 6; }
.grsp-7{ grid-row:1 / span 7; }
.grsp-8{ grid-row:1 / span 8; }

/* Filtro en vivo del listado de carpetas (navegador) */
.proy-filtro{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.proy-filtro .bi-search{ color:var(--color-text-muted,#6b7280); }
.proy-filtro input{ max-width:360px; }
#proy-filtro-n{ font-size:.85rem; white-space:nowrap; }

/* ═══════ Ficha compacta del expediente (propuesta: bloques + filas) ═══════ */
.fc-grid{ display:flex; flex-direction:column; gap:.7rem; }   /* bloques a todo el ancho, apilados */
.fc-bloque{ border:1px solid var(--color-border,#e3e8ee); border-radius:.5rem; overflow:hidden; }
.fc-bloque-tit{ display:flex; align-items:center; gap:.4rem; padding:.4rem .7rem; background:var(--color-bg-surface,#f5f3f0); border-bottom:1px solid var(--color-border,#d4cbb8); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--color-text-muted,#8a8279); }
.fc-bloque-tit .fc-fase{ margin-left:auto; font-size:.66rem; font-weight:500; text-transform:none; letter-spacing:0; padding:.05rem .4rem; border-radius:1rem; background:#ede8df; color:#8a8279; }
.fc-fila{ display:grid; grid-template-columns:118px 1fr; align-items:center; gap:.5rem; padding:.22rem .7rem; border-bottom:1px solid var(--color-border,#eef1f5); }
.fc-fila:last-child{ border-bottom:none; }
.fc-fila > label{ margin:0; font-size:.78rem; color:var(--color-text-muted,#6b7280); line-height:1.15; }
.fc-fila > label .fc-tag{ display:block; font-size:.64rem; color:#b8b0a8; }
.fc-fila .form-control{ height:auto; padding:.2rem .45rem; font-size:.84rem; min-height:1.9rem; }
.fc-fila textarea.form-control{ min-height:3.2rem; }
.fc-fila .form-control:disabled{ background:#f5f3f0; color:#b8b0a8; }
.fc-fila-full{ grid-template-columns:1fr; }
.fc-acciones{ position:sticky; bottom:0; background:#fff; padding:.6rem 0; border-top:1px solid var(--color-border,#e3e8ee); margin-top:.8rem; display:flex; gap:.6rem; align-items:center; }

/* Bloques por etapa: cabecera con color para distinguir la etapa de un vistazo */
/* Colores de etapa, acordes a la paleta cálida de la app (beige · terracota · ocre) */
.fc-bloque--concurso .fc-bloque-tit{ background:#ede8df; color:#8a7f6c; border-bottom-color:#d4cbb8; }
.fc-bloque--concurso{ border-color:#d4cbb8; }
.fc-bloque--proyecto .fc-bloque-tit{ background:#f4e6e0; color:#b56a51; border-bottom-color:#e3c8bd; }
.fc-bloque--proyecto{ border-color:#e3c8bd; }
.fc-bloque--obra .fc-bloque-tit{ background:#ece7d4; color:#8a7b45; border-bottom-color:#d6cda8; }
.fc-bloque--obra{ border-color:#d6cda8; }

/* Adoptar proyecto: controles de cada fase (tipo + abierta/cerrada + fecha) */
.fc-adopt-fase{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.fc-adopt-fase .form-control{ width:auto; }
.fc-adopt-fase select.form-control{ min-width:160px; }
.fc-adopt-fase input[type=date]{ max-width:150px; }
.fc-adopt-cerrada{ display:inline-flex; align-items:center; gap:.25rem; margin:0; white-space:nowrap; font-size:.82rem; color:var(--color-text-muted,#8a8279); }

/* ============================================================
   FICHA EXPEDIENTE v2 (por pestañas) — rediseño 26/06
   Reusa nav-tabs-custom + fc-* (bloques/filas/vida). Solo lo propio aquí.
   ============================================================ */
/* Pestaña que aún no aplica a la etapa: atenuada pero clicable (esqueleto). */
.nav-tabs-exp2 .nav-link--off{ opacity:.45; }
.nav-tabs-exp2 .nav-link--off:hover{ opacity:.8; }

/* Trabajos/carpetas NAS vinculados (chips para saltar, siempre arriba). */
.exp2-trabs{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 1rem; }
.exp2-trabs-lbl{ font-size:.85rem; color:var(--color-text-muted,#8a8279); font-weight:600; }
.exp2-trab-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem;
  border:1px solid var(--color-border,#e2ddd5); border-radius:999px; background:var(--color-surface,#fff);
  font-size:.85rem; color:var(--color-text,#3a352e); text-decoration:none; transition:background .12s, border-color .12s; }
.exp2-trab-chip:hover{ background:var(--color-bg,#f6f3ee); border-color:var(--color-primary,#b08d57); text-decoration:none; }
.exp2-trab-chip strong{ color:var(--color-primary,#b08d57); }
.exp2-trab-chip--arch{ opacity:.55; }

/* Importes de captación: input + sufijo €/% pegado. */
.exp2-imp-wrap{ display:inline-flex; align-items:center; gap:0; max-width:220px; }
.exp2-imp{ text-align:right; border-top-right-radius:0; border-bottom-right-radius:0; }
.exp2-imp-wrap .exp2-euro{ display:inline-flex; align-items:center; padding:0 .6rem; align-self:stretch;
  border:1px solid var(--color-border,#e2ddd5); border-left:none;
  border-top-right-radius:var(--radius,.4rem); border-bottom-right-radius:var(--radius,.4rem);
  background:var(--color-bg,#f6f3ee); color:var(--color-text-muted,#8a8279); font-size:.9rem; }

/* Bloque "pendiente de construir" (placeholder de pestaña Proyecto). */
.exp2-todo{ border-style:dashed; opacity:.85; }

/* Bloque "ganado → crear obra" (captación / pestaña obra). */
.exp2-ganado{ margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--color-border,#e2ddd5);
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; }
.exp2-ganado small{ font-size:.8rem; }

/* Barra de archivar expediente (arriba de la pestaña Expediente). */
.exp2-archivar-bar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:0 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--color-border,#e2ddd5); }
.exp2-archivar-bar small{ font-size:.8rem; }
.exp2-arch-form{ margin:0; }

/* ============================================================
   FICHA EXPEDIENTE v2 — modo COMPACTO (menos scroll). Scoped a .exp2-ficha
   para no afectar a la ficha vieja, que comparte las clases fc-*.
   ============================================================ */
.exp2-ficha .mt-3{ margin-top:.5rem !important; }
.exp2-ficha .mt-4{ margin-top:.6rem !important; }
.exp2-ficha .nav-tabs-exp2{ margin-bottom:.6rem; }
.exp2-ficha .fc-grid{ gap:.5rem; }
.exp2-ficha .fc-bloque-tit{ padding:.28rem .6rem; font-size:.76rem; }
.exp2-ficha .fc-fila{ padding:.13rem .6rem; gap:.4rem; }
.exp2-ficha .fc-fila .form-control{ min-height:1.7rem; padding:.14rem .4rem; font-size:.82rem; }
.exp2-ficha .fc-fila textarea.form-control{ min-height:2.4rem; }
.exp2-ficha .datos-seccion-header{ padding:.3rem .6rem; }
.exp2-ficha .datos-seccion-header .fc-bloque-tit{ padding:0; border:none; background:none; }
.exp2-ficha .fc-acciones{ padding:.4rem 0; margin-top:.5rem; }

/* Tablas (presupuesto · plan · agentes · fechas): celdas y campos más apretados. */
.exp2-ficha .presupuesto-tabla td,
.exp2-ficha .presupuesto-tabla th,
.exp2-ficha .table-agentes td,
.exp2-ficha .table-agentes th,
.exp2-ficha .plan-tabla td,
.exp2-ficha .plan-tabla th{ padding:.18rem .45rem; }
.exp2-ficha table .form-control,
.exp2-ficha table .form-control-sm{ min-height:1.6rem; padding:.1rem .35rem; font-size:.82rem; }
.exp2-ficha .cap-importe-wrap .cap-input{ min-height:1.6rem; }
.exp2-ficha .pct-input{ padding:.05rem .25rem; }

/* Captación y barra de archivar, un punto más juntas. */
.exp2-ficha .fc-vida-row{ gap:.35rem; }
.exp2-ficha .exp2-archivar-bar{ margin-bottom:.6rem; padding-bottom:.5rem; }
.exp2-ficha .exp2-trabs{ margin-bottom:.6rem; }

/* ═══ Avisos (post-it): campana flotante + panel (S2) ═══════════════════════ */
.avisos-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1045;
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:var(--color-primary); color:var(--color-text-inverse);
  border:none; box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:1.35rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.avisos-fab:hover{ background:var(--color-primary-hover); transform:translateY(-2px); }
.avisos-fab-badge{
  position:absolute; top:-.25rem; right:-.25rem; min-width:1.35rem; height:1.35rem;
  padding:0 .3rem; border-radius:.7rem; background:var(--color-danger); color:#fff;
  font-size:.78rem; font-weight:700; line-height:1.35rem; text-align:center;
  border:2px solid var(--color-bg);
}
.avisos-panel{
  position:fixed; right:1.25rem; bottom:5rem; z-index:1046;
  width:min(24rem, calc(100vw - 2rem)); max-height:min(34rem, calc(100vh - 7rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff7b0; border:1px solid #e4d784;
  border-radius:.7rem; box-shadow:0 10px 34px rgba(0,0,0,.28);
}
.avisos-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; border-bottom:1px solid #e4d784; background:#fdef98;
}
.avisos-panel-btns{ display:flex; align-items:center; gap:.4rem; }
.avisos-panel-close{ background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--color-text-muted); padding:0 .15rem; }
.avisos-panel-close:hover{ color:var(--color-text); }
.avisos-tabs{ display:flex; border-bottom:1px solid var(--color-border); }
.avisos-tab{
  flex:1; padding:.5rem .4rem; background:none; border:none; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--color-text-muted); border-bottom:2px solid transparent;
}
.avisos-tab.active{ color:var(--color-text); border-bottom-color:var(--color-primary); }
.avisos-tab-n{ display:inline-block; min-width:1.2rem; padding:0 .3rem; border-radius:.6rem;
  background:var(--color-bg-surface); font-size:.75rem; }
.avisos-list{ overflow-y:auto; padding:.5rem; }
.avisos-vacio{ color:var(--color-text-muted); text-align:center; padding:1.5rem .5rem; margin:0; }
.aviso-card{
  border:1px solid #e4d784; border-left:3px solid var(--color-border-strong);
  border-radius:.5rem; padding:.55rem .65rem; margin-bottom:.5rem; background:#fffdf0;
}
.aviso-card--visto{ border-left-color:#c08a1e; }
.aviso-card--hecho{ border-left-color:var(--color-success); opacity:.72; }
.aviso-texto{ font-size:.9rem; color:var(--color-text); white-space:pre-wrap; margin-bottom:.35rem; }
.aviso-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; font-size:.78rem; color:var(--color-text-muted); margin-bottom:.45rem; }
.aviso-proy{ font-weight:600; }
.aviso-estado{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600; }
.aviso-estado--pend{ color:var(--color-text-muted); }
.aviso-estado--visto{ color:#c08a1e; }
.aviso-estado--hecho{ color:var(--color-success); }
.aviso-acciones{ display:flex; gap:.4rem; justify-content:flex-end; }
@media (max-width:480px){
  .avisos-panel{ right:.5rem; left:.5rem; width:auto; bottom:4.7rem; }
  .avisos-fab{ right:.9rem; bottom:.9rem; }
}
/* Modal "Nueva nota": aspecto post-it amarillo (se nota que es una anotación temporal). */
#mdlNota .modal-content{ background:#fff7b0; border:1px solid #e4d784; }
#mdlNota .modal-header,
#mdlNota .modal-footer{ background:transparent; border-color:#e4d784; }

/* Visitas de obra en el calendario: texto simple, sin negrita. */
.fc .ev-obra-visita .fc-event-title,
.fc .ev-obra-visita .fc-list-event-title{ font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULO GESTIÓN — plan de cobro (pestaña Gestión del expediente)
   Reutiliza la paleta de custom.css; el rojo (--color-danger) queda para alarmas.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-link--gestion i{ margin-right:.25rem; }

/* Totales del expediente */
.gestion-totales{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin:.25rem 0 1rem; }
.gestion-totales--5{ grid-template-columns:repeat(5, 1fr); }
@media (max-width:960px){ .gestion-totales--5{ grid-template-columns:repeat(2,1fr); } }
.gestion-total{ border:1px solid var(--color-border,#e5e1da); border-radius:.6rem; padding:.6rem .75rem;
                background:var(--color-bg-surface,#f7f5f2); }
.gestion-total-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted,#6b7280); }
.gestion-total-con{ font-size:1.1rem; font-weight:700; }
.gestion-total-sin{ font-size:.78rem; color:var(--color-text-muted,#6b7280); }
.gestion-total-sin span{ opacity:.7; }
.gestion-total--cobrado{ border-color:var(--color-success,#4c8a5a); }
.gestion-total--facturado{ border-color:var(--color-info,#4a7fb0); }
.gestion-total--total{ background:var(--color-bg,#fff); }
.gestion-total--previsto{ border-color:var(--color-highlight,#C97B65); }
/* Pendientes: borde discontinuo (= pendiente) con el color de su origen —
   pdte. facturar viene del PREVISTO (terracota), pdte. cobrar del FACTURADO (azul).
   El gráfico de barra usa los mismos colores. */
.gestion-total--pfact, .gestion-total--pcob{ background:var(--color-bg,#fff); border-style:dashed; }
.gestion-total--pfact{ border-color:var(--color-highlight,#C97B65); }
.gestion-total--pcob{ border-color:var(--color-info,#4a7fb0); }
@media (max-width:720px){ .gestion-totales{ grid-template-columns:repeat(2,1fr); } }

/* Sub-pestañas Previsión / Facturación */
.gestion-subtabs{ display:flex; gap:.4rem; margin:.25rem 0 1rem; }

/* Barra de acciones */
.gestion-toolbar{ margin-bottom:.75rem; display:flex; gap:.4rem; }

/* Etiqueta de fase junto al concepto + línea de baja (importe negativo) */
.gestion-fase{ color:var(--color-text-muted,#6b7280); font-weight:400; font-size:.78rem; }
.gestion-tit--baja{ font-style:italic; color:var(--color-text-muted,#6b7280); }
/* Pendientes no nulos en la vista general: un punto de énfasis (sin rojo) */
.gestion-pend{ font-weight:600; }

/* Árbol */
.gestion-tree{ list-style:none; margin:0; padding:0; }
.gestion-tree .gestion-tree{ margin-left:1.1rem; border-left:1px dashed var(--color-border,#e5e1da); padding-left:.6rem; }
.gestion-node{ margin:.15rem 0; }
.gestion-row{ display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem; border-radius:.45rem; }
.gestion-row:hover{ background:var(--color-bg-surface,#f7f5f2); }
.gestion-row--grupo{ font-weight:600; }
.gestion-tit{ flex:1 1 auto; min-width:0; }
.gestion-sub{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.gestion-sub em, .gestion-imp em{ font-style:normal; color:var(--color-text-muted,#6b7280); font-size:.82rem; }
.gestion-imp{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.gestion-meta{ color:var(--color-text-muted,#6b7280); font-size:.8rem; white-space:nowrap; }
.gestion-acc{ display:flex; gap:.15rem; opacity:.4; transition:opacity .12s; }
.gestion-row:hover .gestion-acc{ opacity:1; }

/* Badges de estado (sin rojo: reservado a alarmas reales) */
.gestion-badge{ display:inline-block; font-size:.7rem; font-weight:600; padding:.05rem .4rem; border-radius:.7rem;
                vertical-align:middle; }
.gestion-badge--pendiente{ background:var(--color-bg-muted,#ece9e4); color:var(--color-text-muted,#6b7280); }
.gestion-badge--facturado{ background:var(--color-info-bg,#e5eef6); color:var(--color-info,#3d6f9e); }
.gestion-badge--cobrado{ background:var(--color-success-bg,#e5f2e8); color:var(--color-success,#3f7a4e); }

/* Cálculo en vivo del modal */
.gestion-calc{ background:var(--color-bg-surface,#f7f5f2); border-radius:.45rem; padding:.4rem .6rem;
               margin:.2rem 0 .8rem; font-size:.9rem; }

/* Vista general: gráfico horizontal del estado global (barra apilada) */
.gestion-graf{ margin:.2rem 0 1.1rem; }
.gestion-graf-bar{ display:flex; height:28px; border-radius:.55rem; overflow:hidden;
                   background:var(--color-bg-surface,#f7f5f2); border:1px solid var(--color-border,#e5e1da); }
.gestion-graf-seg{ height:100%; display:flex; align-items:center; justify-content:center;
                   min-width:2px; transition:width .25s; }
.gestion-graf-seg span{ font-size:.72rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; }
/* Colores = borde de la tarjeta correspondiente; los pendientes van rayados (como su borde discontinuo) */
.gestion-graf--cob{  background:var(--color-success,#4c8a5a); }
.gestion-graf--pfact{ background:var(--color-highlight,#C97B65);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px); }
.gestion-graf--pcob{ background:var(--color-info,#4a7fb0);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px); }
.gestion-graf-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.4rem;
                       font-size:.8rem; color:var(--color-text-muted,#6b7280); }
.gestion-sw{ display:inline-block; width:.7rem; height:.7rem; border-radius:.2rem; vertical-align:-1px; }

/* Vista general: barra de filtros + tabla */
.gestion-filtros{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 1rem; }
.gestion-filtros .form-control{ width:auto; min-width:9rem; max-width:16rem; }
.gestion-tabla th.text-end, .gestion-tabla td.text-end{ text-align:right; }
.gestion-tabla td{ vertical-align:middle; }
.gestion-conteo{ margin-top:.5rem; font-size:.85rem; }

/* Informes ISO */
.iso-h2{ font-size:1.05rem; font-weight:700; margin:1.1rem 0 .5rem; padding-bottom:.3rem;
         border-bottom:1px solid var(--color-border,#e5e1da); }
.iso-h2 .badge{ vertical-align:middle; }
.iso-desglose{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 .7rem; }
/* Rejilla compacta 2×2: cada bloque es una tarjeta con scroll propio y título fijo */
.iso-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; margin-top:.3rem; }
@media (max-width:900px){ .iso-grid{ grid-template-columns:1fr; } }
.iso-card{ border:1px solid var(--color-border,#e5e1da); border-radius:.6rem; background:var(--color-bg,#fff);
           padding:0 .8rem .55rem; max-height:32vh; overflow:auto; }
.iso-card .iso-h2{ position:sticky; top:0; background:var(--color-bg,#fff); z-index:1;
                   font-size:.92rem; margin:0 0 .4rem; padding:.55rem 0 .3rem; }
.iso-card .datos-tabla th, .iso-card .datos-tabla td{ padding:.26rem .5rem; font-size:.82rem; }
.iso-card p.text-muted{ font-size:.85rem; margin:.2rem 0 .3rem; }
/* Asistente IA */
.iso-ia-nota{ font-size:.85rem; margin-bottom:.5rem; }
.iso-chips{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0 0 .6rem; }
.iso-chip{ display:inline-flex; align-items:stretch; border:1px solid var(--color-border,#e5e1da);
           border-radius:1rem; overflow:hidden; background:var(--color-bg,#fff); }
.iso-chip-run{ border:none; background:transparent; padding:.25rem .65rem; font-size:.82rem; cursor:pointer; }
.iso-chip-run:hover{ background:var(--color-bg-surface,#f7f5f2); }
.iso-chip-del{ border:none; border-left:1px solid var(--color-border,#e5e1da); background:transparent;
               padding:0 .5rem; color:var(--color-text-muted,#6b7280); cursor:pointer; font-size:.85rem; }
.iso-chip-del:hover{ color:var(--color-danger,#b3423a); }
.iso-ia-acciones{ display:flex; gap:.4rem; margin:0 0 .7rem; }
.iso-ia-form{ display:flex; gap:.5rem; margin-bottom:.8rem; }
.iso-ia-form .form-control{ flex:1 1 auto; max-width:none; }
.iso-ia-resp{ background:var(--color-bg-surface,#f7f5f2); border:1px solid var(--color-border,#e5e1da);
              border-radius:.6rem; padding:.7rem .9rem; margin-bottom:.8rem; }
.iso-ia-sql{ margin-top:.6rem; font-size:.8rem; color:var(--color-text-muted,#6b7280); }
.iso-ia-sql code{ display:block; padding:.4rem .6rem; background:var(--color-bg-surface,#f7f5f2);
                  border-radius:.4rem; white-space:pre-wrap; word-break:break-word; }
/* Impresión limpia SOLO del informe ISO (escopado con :has para no tocar otras páginas) */
@media print {
  body:has(.iso-informe) .app-sidebar,
  body:has(.iso-informe) .app-topbar,
  body:has(.iso-informe) .sidebar-overlay,
  body:has(.iso-informe) .banner-bloqueados,
  body:has(.iso-informe) .banner-nas-rotos,
  body:has(.iso-informe) .iso-toolbar{ display:none !important; }
  body:has(.iso-informe) .app-content{ padding:0; }
  body:has(.iso-informe) .page-header h1{ display:block; }   /* en pantalla lo oculta la regla global */
  body:has(.iso-informe) .iso-informe a{ color:inherit; text-decoration:none; }
  /* En papel la rejilla compacta se despliega: nada de scroll interno ni recortes */
  body:has(.iso-informe) .iso-grid{ display:block; }
  body:has(.iso-informe) .iso-card{ max-height:none; overflow:visible; border:none; padding:0; margin-bottom:1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLANOS DE OBRA en Toma de datos (02/07/2026)
   Botón en cabecera + panel (bottom-sheet, patrón .nota-overlay) + visor
   PDF a canvas. Solo se usa en modulos/campo/captura.php.
   ══════════════════════════════════════════════════════════════════════ */

/* Botón de la cabecera de campo */
.campo-planos-btn {
  flex-shrink: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; border-radius: var(--radius-lg); padding: 0.3rem 0.65rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  font-size: 0.62rem; font-weight: 600; line-height: 1.1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.campo-planos-btn i      { font-size: 1.05rem; }
.campo-planos-btn:active { background: rgba(255,255,255,0.3); }

/* Panel (reusa .nota-overlay como fondo; el sheet propio) */
.planos-panel       { max-height: 80dvh; }
.planos-panel-head  { display: flex; align-items: center; justify-content: space-between; }
.planos-panel-head strong { font-size: 1.05rem; }
.planos-panel-close {
  background: none; border: none; font-size: 1.2rem; color: var(--color-text-muted);
  padding: 0.25rem 0.5rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.planos-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.planos-vacio {
  text-align: center; color: var(--color-text-muted); padding: 1.5rem 0.5rem;
  font-size: 0.9rem;
}
.plano-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  background: var(--color-bg-white); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 0.7rem 0.8rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plano-item:active     { border-color: var(--color-highlight); }
.plano-item-icon       { font-size: 1.5rem; color: #c0392b; flex-shrink: 0; }
.plano-item-info       { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plano-item-nombre     { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano-item-meta       { font-size: 0.75rem; color: var(--color-text-muted); }
.plano-chip {
  flex-shrink: 0; font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.5rem;
  border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem;
}
.plano-chip--ok  { background: #e6f4ea; color: #1e7e34; }
.plano-chip--dl  { background: #fff3cd; color: #856404; }
.plano-chip--old { background: #fff3cd; color: #856404; }
.plano-chip--net { background: #e9ecef; color: #6c757d; }

/* Visor a pantalla completa */
.plano-viewer       { display: none; position: fixed; inset: 0; background: #2b2b2b; z-index: 2100; flex-direction: column; }
.plano-viewer.open  { display: flex; }
.plano-viewer-top   {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem;
  background: rgba(0,0,0,0.55); color: #fff; flex-shrink: 0;
}
.plano-viewer-titulo { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plano-viewer-close  { position: static; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; flex-shrink: 0; }
.plano-viewer-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem; }
.plano-canvas        { display: block; margin: 0 auto 0.5rem; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.plano-viewer-status {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-lg);
  font-size: 0.85rem; max-width: 85%; text-align: center; pointer-events: none;
}
.plano-viewer-status--err { background: rgba(160,30,30,0.9); }
.plano-viewer-zoom {
  position: absolute; bottom: 1.2rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.plano-viewer-zoom button {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.plano-viewer-zoom button:active { background: var(--color-highlight); }