/* ============================================================
   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 */

  /* 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;
  min-height: 100vh;
}

/* 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;
  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; }

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

.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);
}

/* ------------------------------------------------------------
   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(--space-3) var(--space-4);
  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(--space-3) var(--space-4);
  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; }
.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 {
  display:          flex;
  justify-content:  flex-end;
  gap:              var(--space-3);
  padding-top:      var(--space-4);
  border-top:       1px solid var(--color-border);
  margin-top:       var(--space-2);
  margin-bottom:    var(--space-6);
}

/* 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(--space-3) var(--space-4);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
  white-space:      nowrap;
}
.table-agentes tbody td {
  padding:        var(--space-3) var(--space-4);
  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); }

/* 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(--space-3) var(--space-4);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
  white-space:      nowrap;
}
.table-fases tbody td {
  padding:        var(--space-3) var(--space-4);
  border-bottom:  1px solid var(--color-border);
  vertical-align: middle;
}
.table-fases tfoot td {
  padding:    var(--space-3) var(--space-4);
  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;
  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); }

.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)
   ------------------------------------------------------------ */
.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 1fr;
  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; }

.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;
}
@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);
}

.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 {
  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);
}
.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;
}

/* 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;
  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(--space-2) var(--space-3);
  border-bottom:    2px solid var(--color-border-strong);
  text-align:       left;
}
.tabla-masiva tbody td {
  padding:        var(--space-2) var(--space-3);
  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:         8px 12px;
  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:         10px 12px;
  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);
}

@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(--space-2) var(--space-3);
  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) — con hover */
.datos-tabla-dyn tbody tr:hover {
  background: var(--color-bg-surface);
}

/* ── 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;
}

.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(--space-2) var(--space-3);
  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(--space-1) var(--space-3);
  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(--space-2) var(--space-3);
  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(--space-2) var(--space-3);
  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);
}
.cert-resumen-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         3px 0;
  gap:             var(--space-4);
}
.cert-resumen-row span { color: var(--color-text-muted); }
.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-total {
  border-top:  2px solid var(--color-border);
  margin-top:  4px;
  padding-top: 6px;
  font-size:   var(--font-size-base);
}

/* 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;
}

/* 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); } }
#cp-spin { display: inline-block; animation: spin 0.8s linear infinite; }

/* ── Certificación ──────────────────────────────────────────────── */
.cert-pres-pill {
  display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; transition: all .15s;
}
.cert-pres-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cert-pres-pill-active {
  background: var(--color-accent); border-color: var(--color-accent);
  color: #fff !important;
}
.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; }