/* ===========================
   THEME.CSS (TrustForBanks)
   =========================== */

/* --------- Variables --------- */
:root {
  /* Colores de marca */
  --primary: #5aa2ff;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* Tema oscuro base */
  --bg: #0f1422;
  --panel: #171d2d;
  --panel-2: #1d2438;
  --text: #e6ecff;
  --text-muted: #9aa5c3;
  --border: rgba(255,255,255,.12);
  --shadow: 0 8px 24px rgba(0,0,0,.35);

  /* Componentes */
  --card-bg: #141a2b;
  --card-border: rgba(255,255,255,.08);
  --badge-bg: rgba(255,255,255,.08);
  --input-bg: rgba(255,255,255,.06);
  --input-border: rgba(255,255,255,.18);

  /* Botones */
  --btn-bg: var(--primary);
  --btn-text: #0b1020;
  --btn-ghost: transparent;
  --btn-ghost-text: var(--text);

  /* Progreso */
  --progress-track: rgba(255,255,255,.16);
  --progress-bar: #24cf84;
}

/* --------- Reseteo básico del tema --------- */
html, body {
  background: var(--bg);
  color: var(--text);
}

/* --------- Marca / Login --------- */
.brand-logo {
  width: 1000px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}
.container h1 { margin-top: .25rem; }

.login-header { text-align: center; }
.login-header h2 {
  margin: 0 0 6px;
  font-size: 34px;
  line-height: 1.15;
}
.login-header .muted {
  margin: 0 auto 18px;
  max-width: 42ch;
}

/* --------- Topbar --------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(20,26,43,.55) 100%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; }

/* --------- Contenedores --------- */
.container { max-width: 1080px; margin: 24px auto; padding: 0 16px; }
.row { display: flex; gap: 8px; align-items: center; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* --------- Tipografía utilitaria --------- */
.muted { color: var(--text-muted); }
.small { font-size: .9rem; }

/* --------- Botones / Links --------- */
.btn {
  background: var(--btn-bg);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s, filter .15s, transform .08s;
  box-shadow: var(--shadow);
}
.btn:hover { filter: brightness(1.04); }
.btn.small { padding: 6px 10px; border-radius: 10px; }
.btn.ghost {
  background: var(--btn-ghost);
  color: var(--btn-ghost-text);
  border: 1px solid var(--border);
  box-shadow: none;
}
a.link { color: var(--text); text-decoration: underline transparent; transition: .15s; }
a.link:hover { text-decoration-color: currentColor; }

/* --------- Inputs --------- */
.input-with-action .ghost.small {
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.input-with-action input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
}
select { color: var(--text); }
select option { color: #000; }

/* --------- Tarjetas --------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  background: var(--badge-bg);
  color: var(--text-muted);
  border: 1px solid var(--card-border);
}

/* --------- Progreso --------- */
.progress {
  height: 8px; border-radius: 999px;
  background: var(--progress-track);
  overflow: hidden; margin: 8px 0 6px;
}
.progress > div {
  height: 100%; width: 0%;
  background: var(--progress-bar);
  transition: width .25s ease;
}

/* --------- KPIs --------- */
.kpi-row {
  display: grid; gap: 12px; margin: 12px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.kpi .label { color: var(--text-muted); font-size: .85rem; }
.kpi .value { font-weight: 700; margin-top: 4px; }

/* --------- Tabs --------- */
.tabs { display: flex; gap: 8px; margin: 18px 0; }
.tab {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.tab.active { background: var(--primary); color: #0b1020; border-color: transparent; }
.tabpane { display: none; }
.tabpane.active { display: block; }

/* --------- Mensajes --------- */
.msg { margin: .5rem 0; color: var(--text-muted); }

/* --------- Tablas (admin users) --------- */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.table thead th { background: var(--panel-2); color: var(--text-muted); text-align: left; }
.table tr:last-child td { border-bottom: none; }
button.danger { background: var(--danger); color: #fff; }

/* --------- Login Card (vidrio) --------- */
.login-card.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  border-radius: 20px;
}
.login-meta .small { margin-top: 8px; text-align: center; }

/* --------- DOCS (lista) --------- */
.doc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px; border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.warn { color: var(--warn); }

/* ==========================================
   ESTADOS DE PROYECTO (UNIFICADO EN TODO EL SITIO)
   ========================================== */
.card.status-EN_CURSO {
  border-left: 6px solid #6c757d;
  background: #1e1e2d;
  color: #ffffff;
}
.card.status-EN_MARCHA {
  border-left: 6px solid #22a745;
  background: #9d1978;
  color: #e6ffe6;
}
.card.status-PAUSADO {
  border-left: 6px solid #f91a05;
  background: #b35009;
  color: #fff6d6;
}
.card.status-FINALIZADO {
  border-left: 6px solid #0d6efd;
  background: #16ad20;
  color: #000000;
}

/* --------- Ajustes puntuales solicitados --------- */
/* Selector de estado en Project */
#pstatusSel option {
  color: #000;
  background: #fff;
}

/* Modal más compacto y con scroll interno */
.modal {
  background:#fff; color:#000; border-radius:10px;
  width: calc(100% - 24px); max-width: 860px;
  max-height: 90vh; display:flex; flex-direction:column;
  padding:16px 16px 0;  /* sin padding abajo: la row hace de footer */
}

.modal h3 { margin: 0 0 6px; }
.modal .muted { margin: 0 0 8px; }

.modal-body {
  overflow: auto;  /* <- aquí el scroll */
  padding: 4px 2px 8px;
}

/* Botonera fija dentro del modal (solo el footer) */
.modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px 0 14px;
  margin-top: 6px;
  border-top: 1px solid #eee;
}

/* Grid responsive para los selects */
#assignRolesContainer {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
}

/* Etiquetas un poco más sutiles */
#assignRolesContainer label.small.muted { margin-bottom: 4px; display:block; }

/* En pantallas muy pequeñas, una sola columna */
@media (max-width: 560px) {
  #assignRolesContainer { grid-template-columns: 1fr; }
}

.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-action input {
  flex: 1;
  padding-right: 2.5rem; /* espacio para el ojo */
  box-sizing: border-box;
}

.input-with-action #togglePwd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* —— Tablas dentro del modal (display naturales y sin sticky) —— */
#modalBody .table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;          /* deja que las columnas respiren */
}

#modalBody .table thead {
  position: static;            /* ⬅ evita que tape las filas */
  background: #0f172a;
  z-index: 1;
}

#modalBody .table.dark thead th { color:#e5e7eb; }

#modalBody .table.dark tbody { display: table-row-group !important; }
#modalBody .table.dark tr    { display: table-row !important; }
#modalBody .table.dark th,
#modalBody .table.dark td    {
  display: table-cell !important;
  color:#e5e7eb;
  padding: 8px 10px;
  border-top: 1px solid #1f2937;
  vertical-align: top;
  word-wrap: break-word;
}

/* Cards sin recorte */
#modalBody .phase-card { overflow: visible !important; background: #fff; }


/* Finanzas: grid de fases */
#tab-finanzas .fin-phases-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:12px;
}
#tab-finanzas .fin-card{
  border:1px solid var(--stroke,#e5e7eb);
  border-radius:12px;
  padding:12px;
  background:var(--card-bg,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#tab-finanzas .fin-card .head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
}
#tab-finanzas .fin-card .dates{ color:#64748b; font-size:.9rem; }
#tab-finanzas .fin-card .kpis{ margin-top:6px; }
#tab-finanzas .fin-card .kpis li{ margin-left:1rem; }
#tab-finanzas .fin-card .section-title{ margin-top:8px; font-weight:700; }
#tab-finanzas .fin-card .muted{ color:#6b7280; }
#tab-finanzas .fin-card .total{ font-weight:700; text-align:right; }

.fin-card .btn[data-act="edit"] {
  background:#f1f5f9;   /* gris claro */
  color:#111827;        /* casi negro */
  border:1px solid #cbd5e1;
}
.fin-card .btn[data-act="edit"]:hover {
  background:#e2e8f0;
}

/* Comercial */
#disbChart { min-height: 260px; }

/* Card de sección + acordeón */
.section {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
}
.section h4 {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section h4 .toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: .7;
}
.section .body { margin-top: 12px; }
.section.collapsed .body { display: none; }

/* Grids de formulario */
.form-grid-4 {
  display: grid;
  grid-template-columns: 160px 1fr 160px 1fr; /* label/ctrl x2 */
  gap: 10px 16px;
  align-items: center;
}
@media (max-width: 880px) {
  .form-grid-4 { grid-template-columns: 140px 1fr; } /* 1 campo por fila en móvil */
}

/* Labels e inputs */
.label { color: var(--muted, #6b7280); font-size: .9rem; }
#fichaContenido input[type="text"],
#fichaContenido input[type="number"],
#fichaContenido input[type="date"],
#fichaContenido select { width: 100%; min-height: 34px; }
input[type="checkbox"].chk-box { width: auto; transform: translateY(1px); }

/* Tabs del modal Ficha — override para que se vean bien */
#fichaUnidadModal .modal-tabs{
  display:flex;
  gap:10px;
  padding:0 8px 8px;
  border-bottom:1px solid var(--line,#e5e7eb);
}

#fichaUnidadModal .modal-tab{
  background:#f1f5f9;        /* fondo visible */
  color:#334155;             /* texto más oscuro */
  padding:8px 14px;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  font-weight:600;
}

#fichaUnidadModal .modal-tab:hover{
  background:#e2e8f0;
  color:#0f172a;
}

#fichaUnidadModal .modal-tab.active{
  background:var(--brand,#111827);  /* pestaña activa */
  color:#fff;
  border-color:var(--brand,#111827);
}

/* Dark mode (opcional) */
@media (prefers-color-scheme: dark){
  #fichaUnidadModal .modal-tabs{ border-bottom-color:#334155; }
  #fichaUnidadModal .modal-tab{ background:#0f172a; color:#cbd5e1; }
  #fichaUnidadModal .modal-tab:hover{ background:#1e293b; color:#fff; }
  #fichaUnidadModal .modal-tab.active{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
}


/* Items de checklist */
.chk-item{border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--card,#fff)}
.chk-item .head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.chk-item .help{background:none;border:0;cursor:pointer;opacity:.7}
.help-box{margin-top:8px;padding:8px;border-left:3px solid #e5e7eb;background:rgba(0,0,0,.02);border-radius:6px}

/* ===== Chat del proyecto ===== */
#tab-chat{
  /* Paleta oscura + medidas de alineación */
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --card-bg:#0b1220;
  --stroke: rgba(148,163,184,.20);
  --send-w: 130px;          /* ancho del botón Enviar (ajústalo si hace falta) */
  --compose-gap: 8px;      /* separación entre input y botón en la fila de composición */
}

/* Contenedor del chat alineado con el resto del layout */
#tab-chat .chat-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 0;       /* sin padding para alinear al pixel */
}

/* Barra de composición (input + botón) fija arriba */
#tab-chat .chat-compose{
  display:flex;
  gap: var(--compose-gap);
  align-items:center;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 6px 0;
  background: transparent;
}

/* Input de composición */
#tab-chat .chat-compose input{
  flex:1; min-width:180px;
  background:#ffffff; color:#0f172a;
  border:1px solid #cbd5e1;
  border-radius:10px; padding:10px;
}
#tab-chat .chat-compose input:focus{
  outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
#chatInput::placeholder { color: #9ca3af; }

/* Forzar un ancho mínimo al botón Enviar para que la resta de ancho cuadre */
#tab-chat .chat-compose button,
#tab-chat .chat-compose .btn{
  min-width: var(--send-w);
  text-align: center;
}

/* Lista de mensajes */
#tab-chat .chat-list{ display:flex; flex-direction:column; gap:10px; }

/* Burbujas (alineadas al mismo ancho que el input: restamos el botón + gap) */
#tab-chat .chat-item{
  width: 100%;
  max-width: calc(100% - (var(--send-w) + var(--compose-gap)));
  margin: 0;                    /* sin margen lateral */
  box-sizing: border-box;

  display:flex; gap:10px; align-items:flex-start;
  background: var(--card-bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(2,6,23,.25);
}

/* “Tus” mensajes a la derecha (si los marcas con .self desde el front) */
#tab-chat .chat-item.self{ margin-left: auto; }

/* Avatar */
#tab-chat .chat-avatar{
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 999px; background:#0f172a; color:#fff;
  display:grid; place-items:center;
  font-weight:800; font-size:.8rem;
}

/* Cuerpo del mensaje con algo de aire entre bloques */
#tab-chat .chat-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  gap: 10px;                   /* espacio entre meta, texto y acciones */
}

/* Meta y texto */
#tab-chat .chat-meta{
  display:flex; gap:6px; align-items:center;
  font-size:.8rem; color:var(--muted);
  margin-bottom: 6px;
}
#tab-chat .chat-meta b{ color:#cbd5e1; }
#tab-chat .chat-text{ white-space:pre-wrap; word-wrap:break-word; color:var(--text); }

/* Acciones (Borrar) alineadas a la derecha como Enviar */
#tab-chat .chat-actions{
  display:flex; justify-content:flex-end; gap:6px;
  margin-top: 6px;
}
#tab-chat .chat-del{
  background:#1f2937; border:1px solid rgba(148,163,184,.25);
  color:#e2e8f0; border-radius:8px; padding:4px 8px; font-size:.78rem;
  cursor:pointer;
}
#tab-chat .chat-del:hover{ filter: brightness(1.08); }

/* Colores de mensajes propios (opcional, si añades .self) */
#tab-chat .chat-item.self .chat-text{ color:#d1fae5; }
#tab-chat .chat-item.self .chat-body{
  background: rgba(34,197,94,.07);
  border-radius: 10px;
}

/* Botón “Cargar mensajes anteriores” */
#tab-chat #chatLoadMore{
  background:#0b1220 !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-radius:12px;
}

/* Tema de botones fantasma dentro del chat (si los usas) */
#tab-chat .btn-ghost{
  background:#0b1220 !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(148,163,184,.35) !important;
}
#tab-chat .btn-ghost:hover{ filter: brightness(1.05); }

.doc-item-title {
  color: #fff;       /* blanco para el nombre */
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.doc-meta {
  color: #ccc;       /* gris clarito para metadatos */
  font-size: 0.85em;
}

.doc-expiry {
  font-size: 0.85em;
}

.doc-expiry.warn {
  color: #ffb347;    /* naranja cuando está por vencer */
}

.doc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn.danger {
  background: #c0392b;
  color: #fff;
  border: none;
}
.btn.danger:hover {
  filter: brightness(1.1);
}

/* Tooltip simple para los gráficos del Resumen */
#summaryHeader.summary-header {
  display: grid;
  grid-template-columns: minmax(230px, 310px) auto minmax(390px, 1fr);
  align-items: end;
  column-gap: 30px;
  row-gap: 12px;
  margin-bottom: 18px;
}

#summaryHeader .summary-title-block {
  min-width: 0;
}

#summaryHeader .summary-title-block h2 {
  margin-bottom: 8px;
}

#summaryHeader .summary-export-actions,
#summaryHeader .summary-import-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

#summaryHeader .summary-import-actions {
  justify-content: flex-end;
}

#summaryHeader .summary-date-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(226px, auto)) 70px;
  align-items: end;
  gap: 7px;
  min-height: 72px;
  margin-left: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#summaryHeader .summary-date-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#summaryHeader .summary-date-group-compare {
  padding-left: 8px;
  border-left: 1px solid rgba(148, 163, 184, .2);
}

#summaryHeader .summary-date-filter-title {
  color: #e6ecff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#summaryHeader .summary-date-fields {
  display: grid;
  grid-template-columns: repeat(2, 112px);
  gap: 6px;
}

#summaryHeader .summary-date-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.1;
}

#summaryHeader .summary-date-field input {
  width: 112px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 7px;
  background: rgba(15, 23, 42, .45);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  color-scheme: dark;
}

#summaryHeader .summary-date-field input:focus {
  outline: none;
  border-color: rgba(90, 162, 255, .7);
  box-shadow: 0 0 0 2px rgba(90, 162, 255, .14);
}

#summaryHeader .summary-date-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-self: end;
}

#summaryHeader .summary-date-apply,
#summaryHeader .summary-date-clear {
  width: 70px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
}

#summaryHeader .summary-date-apply {
  border-color: rgba(90, 162, 255, .5);
  background: rgba(90, 162, 255, .16);
  color: #e6ecff;
  font-weight: 700;
}

#summaryHeader .summary-date-apply:hover {
  background: rgba(90, 162, 255, .27);
}

#summaryHeader .summary-date-clear:hover {
  border-color: rgba(90, 162, 255, .55);
  color: var(--text);
}

#summaryHeader .summary-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#summaryHeader .summary-file-picker {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: min(310px, 100%);
  height: 52px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#summaryHeader .summary-file-picker-label {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(90, 162, 255, .16);
  border-right: 1px solid rgba(148, 163, 184, .22);
  color: #e6ecff;
  font-weight: 700;
  white-space: nowrap;
}

#summaryHeader .summary-file-picker-name {
  min-width: 0;
  padding: 0 14px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#summaryHeader .summary-file-picker:hover {
  border-color: rgba(90, 162, 255, .62);
}

@media (max-width: 1100px) {
  #summaryHeader.summary-header {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  #summaryHeader .summary-import-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  #summaryHeader .summary-export-actions {
    flex-wrap: wrap;
  }

  #summaryHeader .summary-date-filter {
    grid-template-columns: repeat(2, minmax(226px, auto)) 70px;
  }
}

@media (max-width: 720px) {
  #summaryHeader.summary-header,
  #summaryHeader .summary-export-actions,
  #summaryHeader .summary-import-actions {
    display: flex;
    flex-wrap: wrap;
  }

  #summaryHeader .summary-title-block {
    width: 100%;
  }

  #summaryHeader .summary-file-picker,
  #summaryHeader #importDatoUnicoBtn,
  #summaryHeader .summary-date-filter {
    width: 100%;
  }

  /* Móvil: layout limpio apilado verticalmente */
  #summaryHeader .summary-date-filter {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 12px;
    align-items: flex-start;
  }

  #summaryHeader .summary-date-group {
    width: 100%;
    display: grid;
    gap: 6px;
  }

  #summaryHeader .summary-date-group-compare {
    padding-left: 0;
    border-left: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, .15);
  }

  #summaryHeader .summary-date-fields {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #summaryHeader .summary-date-field input {
    width: 100%;
    height: 32px;
  }

  /* Botones en fila horizontal al final, compactos */
  #summaryHeader .summary-date-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-self: flex-start;
    width: 100%;
    justify-content: flex-start;
  }

  #summaryHeader .summary-date-apply,
  #summaryHeader .summary-date-clear {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
}

#tab-resumen .info-dot{
  display:inline-flex;justify-content:center;align-items:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(148,163,184,.35);
  font-size:12px;line-height:1;cursor:help;margin-left:8px;
  position:relative; user-select:none;
}
#tab-resumen .info-dot::after{
  content:attr(data-tip);
  position:absolute; top:24px; left:0;
  min-width:220px; max-width:360px;
  background:#0b1220; color:#e2e8f0;
  border:1px solid rgba(148,163,184,.25);
  padding:8px 10px; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  white-space:normal; z-index:30;
  opacity:0; transform:translateY(4px);
  pointer-events:none; transition:opacity .12s, transform .12s;
}
#tab-resumen .info-dot:hover::after,
#tab-resumen .info-dot[data-open="1"]::after{
  opacity:1; transform:translateY(0);
}

/* en tu theme.css */
#tab-resumen .phase { display: none !important; }

.ba-two{display:grid;grid-template-columns:1fr 1px 1fr;gap:16px;align-items:flex-start}
.ba-col h3{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ba-divider{width:1px;background:rgba(148,163,184,.25);height:100%}
.ba-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1100px){.ba-two{grid-template-columns:1fr;}.ba-divider{display:none}}

/* Botón “ghost” (blanco) → texto negro */
.btn-ghost,
a.btn-ghost {
  background: #fff;
  color: #111827 !important;   /* negro/gris muy oscuro */
  border: 1px solid #cbd5e1;
  text-decoration: none;
}
.btn-ghost:hover { 
  background: #f8fafc; 
  border-color: #94a3b8; 
}

/* Botón primario mantiene texto blanco */
.btn-primary,
a.btn-primary {
  color: #fff !important;
}

/* (Opcional) cualquier .btn con fondo claro */
a.btn, .btn { text-decoration: none; }

.doc { display:flex; justify-content:space-between; gap:16px; padding:12px; border:1px solid var(--stroke,#e5e7eb); border-radius:12px; margin-bottom:10px; }
.doc .chips { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-size:12px; padding:2px 8px; border-radius:999px; background:rgba(148,163,184,.18); }
.chip-green { background: rgba(16,185,129,.18); }
.chip-gray  { background: rgba(148,163,184,.28); }
.doc-actions .btn { margin-left:8px; }
.warn { color:#b45309; } /* ámbar para expiración cercana */

.ba-col { width: 100%; }
@media (min-width: 900px){ .ba-col { width: 50%; float:left; padding-right:12px; } }
.ba-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.ba-item { border:1px solid var(--stroke,#e5e7eb); border-radius:10px; overflow:hidden; display:block; }
.ba-item img { width:100%; height:120px; object-fit:cover; display:block; }
.ba-photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.ba-photo-btn img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .18s ease, filter .18s ease;
}
.ba-photo-btn:hover img {
  transform: scale(1.03);
  filter: brightness(.92);
}
.ba-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, .82);
}
.ba-viewer.is-open {
  display: flex;
}
.ba-viewer-dialog {
  width: min(1100px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: #0f172a;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.ba-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ba-viewer-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ba-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ba-viewer-body {
  min-height: 0;
  padding: 14px;
  display: grid;
  place-items: center;
}
.ba-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 82px);
  object-fit: contain;
  border-radius: 10px;
}
body.ba-viewer-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .ba-viewer {
    padding: 0;
  }
  .ba-viewer-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .ba-viewer-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ba-viewer-actions {
    width: 100%;
  }
  .ba-viewer-actions .btn {
    flex: 1;
  }
  .ba-viewer-body img {
    max-height: calc(100dvh - 132px);
  }
}

/* ====== Status minimal ====== */
:root{
  --accent: #4f46e5;           /* índigo elegante */
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --card:   #111827;           /* coincide con tu dark */
  --stroke: rgba(148,163,184,.22);
  --glow:   rgba(79,70,229,.35);
}

.status-controls{
  display:flex; align-items:center; gap:12px;
  margin-left:auto; /* empuja a la derecha */
}

.project-status-picker {
  display: inline-flex;
  align-items: center;
  height: 52px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.status-label{
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(90, 162, 255, .16);
  border-right: 1px solid rgba(148, 163, 184, .22);
  color: #e6ecff;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
}

.select-wrap{
  position:relative; display:inline-flex; align-items:center;
  height: 100%;
}
.select-clean{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height: 100%;
  min-width: 164px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 0;
  padding: 0 40px 0 16px;
  font-weight: 800;
  letter-spacing:.2px;
  outline: none;
  cursor: pointer;
  transition: color .2s ease;
}
.project-status-picker:hover,
.project-status-picker:focus-within {
  border-color: rgba(90, 162, 255, .62);
}
.chev{
  position:absolute; right:12px; pointer-events:none;
  opacity:.7; color: var(--muted);
}

/* Botón principal */
.btn-primary{
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 52px;
  font-weight: 700;
  letter-spacing:.2px;
  box-shadow: 0 8px 22px rgba(79,70,229,.28);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-primary:active{ transform: translateY(1px); }

/* Responsive: mantener Estado + Guardar en una sola fila */
@media (max-width: 640px){
  .status-controls{
    width:100%;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:8px;
  }

  .project-status-picker{
    flex:1 1 auto;
    min-width:0;
  }

  .status-label{
    padding:0 12px;
  }

  .select-wrap{
    flex:1 1 auto;
    min-width:0;
  }

  .select-clean{
    width:100%;
    min-width:0;
    padding-left:12px;
    padding-right:34px;
  }

  #saveStatusBtn{
    flex:0 0 auto;
    padding-left:12px;
    padding-right:12px;
  }
}

/* ===== FICHA UNIDAD (contraste en secciones) ===== */
#fichaUnidadModal { 
  color: var(--text);                        /* texto claro en todo el modal */
}

#fichaUnidadModal .section{
  background: var(--card, #111827);          /* fondo oscuro de la tarjeta */
  border-color: var(--border);
}

#fichaUnidadModal .section h4,
#fichaUnidadModal .section h4 span{
  color: var(--text) !important;             /* título blanco */
}

#fichaUnidadModal .section h4 .toggle{
  color: var(--text-muted) !important;       /* caret/triangulito más tenue */
  opacity: .9;
}

#fichaUnidadModal .section .label{
  color: var(--text-muted);                  /* etiquetas grises claras */
}

/* Si tu footer del modal se veía blanco, unifícalo: */
#fichaUnidadModal .modal-footer{
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* ===== Ficha > Checklist: contraste en títulos y controles ===== */
#fichaUnidadModal #chkList .chk-item{
  background: var(--panel);              /* tarjeta oscura */
  border-color: var(--border);
  color: var(--text);                    /* texto claro por defecto */
}

#fichaUnidadModal #chkList .chk-item .head strong{
  color: var(--text) !important;         /* título blanco */
}

#fichaUnidadModal #chkList .label{
  color: var(--text-muted);              /* etiquetas gris claro */
}

#fichaUnidadModal #chkList .help{
  color: var(--text-muted);              /* icono/info */
  opacity: .9;
}

#fichaUnidadModal #chkList input,
#fichaUnidadModal #chkList select{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
}
#fichaUnidadModal #chkList input::placeholder{
  color: var(--text-muted);
}

/* ===== Finanzas: tarjetas de fases ===== */
.fin-phases-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:14px;
}

.fin-card{
  background: var(--panel-2, #1d2438);
  border: 1px solid var(--card-border, rgba(255,255,255,.08));
  border-radius: 16px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.35));
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fin-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.14);
}

/* Header */
.fin-phase-header{
  position: relative;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(90,162,255,.14), rgba(90,162,255,0));
  border-bottom: 1px solid var(--card-border, rgba(255,255,255,.08));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.fin-phase-title{
  display:flex; flex-direction:column; gap:4px;
  flex:1;                 /* ocupa todo el espacio */
  text-align:center;      /* centra horizontal */
}
.fin-phase-title .name{
  font-weight:800;
  font-size:1.4rem;       /* más grande */
  letter-spacing:.3px;
  color: var(--text, #e6ecff);
}
.fin-phase-title .dates{
  font-size:.95rem;
  color: var(--text-muted,#9aa5c3);
}

/* Badges y acciones */
.fin-phase-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; justify-content:center; }
.fin-tag{
  font-size:.78rem; padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
.fin-tag.warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.fin-tag.error{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.fin-actions{ display:flex; gap:8px; }
.fin-actions .btn{ height:28px; line-height:26px; padding:0 10px; border-radius:999px; }

/* Cuerpo */
.fin-phase-body{ padding: 14px; }
.fin-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.fin-section h5{
  margin:0 0 6px; font-weight:700; font-size:.95rem; color: var(--text);
}
.fin-list{ margin:0; padding-left:18px; color: var(--text); }
.fin-empty{ color: var(--text-muted); font-size:.9rem; }

.fin-total{
  margin-top:8px; text-align:right; font-weight:800;
  border-top:1px dashed rgba(255,255,255,.14);
  padding-top:6px; color: var(--text);
}

/* KPIs */
.fin-kpis{
  margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px solid rgba(255,255,255,.08); padding-top:12px;
}
.fin-kpi{
  background: var(--card-bg,#141a2b);
  border:1px solid var(--card-border, rgba(255,255,255,.08));
  border-radius:12px; padding:8px 10px; font-size:.9rem;
  display:flex; align-items:center; gap:8px;
}
.fin-kpi .dot{ width:8px; height:8px; border-radius:50%; background: var(--primary,#5aa2ff); }
.fin-kpi.warn .dot{ background: var(--warn,#f59e0b); }
.fin-kpi.ok .dot{ background: var(--ok,#10b981); }


/* =========================================================
   FINANZAS — Tarjetas Plan vs Real (mejorado)
   Sustituye el bloque anterior por este
   ========================================================= */

/* Variables “tema” para finanzas (no rompe nada si no existen) */
:root{
  --fin-plan: 255, 159, 28;   /* naranja */
  --fin-real: 56, 189, 248;   /* azul cielo */
  --fin-card: var(--card-bg, #141a2b);
  --fin-border: var(--card-border, rgba(255,255,255,.08));
  --fin-text: rgba(255,255,255,.92);
  --fin-muted: rgba(255,255,255,.72);
}

/* Card base */
.fin-phase-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--fin-card);
  border: 1px solid var(--fin-border);
  padding: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover elegante */
.fin-phase-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

/* Barra lateral de color (PLAN/REAL) */
.fin-phase-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 6px;
  background: rgba(255,255,255,.10);
}

/* Brillo suave arriba (como “glass”) */
.fin-phase-card::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-60%;
  height: 160px;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
  opacity: .45;
  pointer-events:none;
}

/* Variantes */
.fin-phase-card[data-variant="plan"]{
  border-color: rgba(var(--fin-plan), .30);
  box-shadow: 0 14px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--fin-plan), .10) inset;
}
.fin-phase-card[data-variant="plan"]::before{
  background: linear-gradient(180deg, rgba(var(--fin-plan), .95), rgba(var(--fin-plan), .25));
}

.fin-phase-card[data-variant="real"]{
  border-color: rgba(var(--fin-real), .30);
  box-shadow: 0 14px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(var(--fin-real), .10) inset;
}
.fin-phase-card[data-variant="real"]::before{
  background: linear-gradient(180deg, rgba(var(--fin-real), .95), rgba(var(--fin-real), .25));
}

/* Header con “banda” sutil */
.fin-phase-head{
  position: relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 10px 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

/* Degradado del header según variante */
.fin-phase-card[data-variant="plan"] .fin-phase-head{
  background:
    linear-gradient(90deg, rgba(var(--fin-plan), .12), rgba(255,255,255,.03) 55%),
    rgba(255,255,255,.03);
  border-color: rgba(var(--fin-plan), .18);
}

.fin-phase-card[data-variant="real"] .fin-phase-head{
  background:
    linear-gradient(90deg, rgba(var(--fin-real), .12), rgba(255,255,255,.03) 55%),
    rgba(255,255,255,.03);
  border-color: rgba(var(--fin-real), .18);
}

.fin-phase-left .fin-phase-name{
  font-size: 1.20rem;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.1;
  color: var(--fin-text);
}

.fin-phase-left .fin-phase-dates{
  opacity: .9;
  font-size: .92rem;
  margin-top: 4px;
  color: var(--fin-muted);
}

/* Badges más “premium” */
.fin-phase-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.fin-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Píldora con punto de color según variante */
.fin-tag::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

.fin-phase-card[data-variant="plan"] .fin-tag::before{ background: rgba(var(--fin-plan), .95); }
.fin-phase-card[data-variant="real"] .fin-tag::before{ background: rgba(var(--fin-real), .95); }

.fin-tag.neutral{
  background: rgba(255,255,255,.06);
}

.fin-tag.danger{
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .30);
}
.fin-tag.danger::before{ background: rgba(239, 68, 68, .95); }

/* Acciones (botones) */
.fin-phase-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}

/* Body */
.fin-phase-body{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* KPIs dentro de la card */
.fin-kpi-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fin-kpi{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 12px;
  transition: border-color .15s ease, transform .15s ease;
}

.fin-phase-card:hover .fin-kpi{
  border-color: rgba(255,255,255,.11);
}

.fin-kpi .label{
  font-size: .82rem;
  opacity: .9;
  color: var(--fin-muted);
}

.fin-kpi .value{
  margin-top: 4px;
  font-size: 1.28rem;
  font-weight: 950;
  color: var(--fin-text);
}

.fin-line .label{
  font-weight: 900;
  margin-bottom: 6px;
}

/* Botones compactos (si no existen ya) */
.btn.btn-xs{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .82rem;
}

/* Responsive */
@media (max-width: 900px){
  .fin-kpi-grid{ grid-template-columns: 1fr; }
  .fin-phase-head{ padding: 10px; }
}

/* =========================================================
   FINANZAS — Grid horizontal (3 por fila)
   ========================================================= */

/* Contenedores de listas (PLAN / REAL) */
#phasesPlanList,
#phasesRealList{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 1100px){
  #phasesPlanList,
  #phasesRealList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #phasesPlanList,
  #phasesRealList{ grid-template-columns: 1fr; }
}

/* La card dentro del grid: que no se estire raro */
.fin-phase-card{
  height: auto;
  min-height: 170px;
}

/* Compactar el body un pelín para que quepan mejor */
.fin-phase-body{
  padding-top: 10px;
}

/* Ajuste: KPIs en columna en cards pequeñas */
.fin-kpi-grid{
  grid-template-columns: 1fr;
}

/* Si hay “desembolso” y botones, que no se rompa */
.fin-phase-card .row.gap{
  flex-wrap: wrap;
}

/* Subtareas tipo checklist */
.subtask{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}

.subtask-check{
  width:16px;
  height:16px;
  flex:0 0 16px;   /* evita que ocupe un “hueco gigante” */
  margin:0;
}

.subtask-title{
  font-weight:600;
  color:#111827;
}

/* ===== Subtareas: alineación checklist (FIX definitivo) ===== */

.subtasks { 
  text-align: left !important; 
}

.subtask{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 6px 0 !important;
}

.subtask-check{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}

.subtask-title{
  flex: 1 1 auto !important;
  text-align: left !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.fin-phase-actions {
  display: flex;
  gap: 8px;
}

.fin-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e8f0ff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
}

.fin-btn:hover {
  background: rgba(120,170,255,0.15);
  border-color: rgba(120,170,255,0.4);
  transform: translateY(-1px);
}

.fin-btn:active {
  transform: translateY(0px);
}

/* EDITAR */
.fin-btn-edit {
  color: #9ecbff;
}

/* ELIMINAR */
.fin-btn-del {
  color: #ff9b9b;
  border-color: rgba(255,120,120,0.15);
}

.fin-btn-del:hover {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.5);
}

/* =========================================================
   PROYECTO — Roles & Semáforo (premium, sin emojis)
   ========================================================= */

.roles-panel{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Cada fila */
.role-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
}

.role-row:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.role-row.filter-on{
  background: linear-gradient(90deg, rgba(90,162,255,.14), rgba(255,255,255,.02));
  border-color: rgba(90,162,255,.28);
}

/* Badge del rol: que no “salte” */
.role-row .role-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Semáforo: dot con halo */
.role-row .light{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* El dot real */
.sem-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
  position: relative;
}

/* Estados */
.sem-dot.ok{
  background: var(--ok);
  box-shadow:
    0 0 0 4px rgba(16,185,129,.12),
    0 8px 18px rgba(16,185,129,.18);
}

.sem-dot.warn{
  background: var(--warn);
  box-shadow:
    0 0 0 4px rgba(245,158,11,.12),
    0 8px 18px rgba(245,158,11,.14);
}

.sem-dot.danger{
  background: var(--danger);
  box-shadow:
    0 0 0 4px rgba(239,68,68,.12),
    0 8px 18px rgba(239,68,68,.16);
}

/* Pulso muy sutil SOLO para rojo */
.sem-dot.danger::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border: 1px solid rgba(239,68,68,.28);
  opacity:.0;
  transform: scale(.85);
  animation: semPulse 1.8s ease-out infinite;
}

@keyframes semPulse{
  0%   { opacity:.0; transform: scale(.85); }
  35%  { opacity:.65; }
  100% { opacity:0; transform: scale(1.35); }
}

/* Accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .sem-dot.danger::after{ animation:none; }
}

/* =========================================================
   ROLES PANEL — BOTONES (Pendientes toggle + Limpiar)
   (VERSIÓN LIMPIA / COMPACTA / SIN DUPLICADOS)
   ========================================================= */

/* Contenedor: que no se pegue a los bordes del panel */
.roles-actions{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;

  /* 👇 margen interno para que NO toquen el borde derecho */
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 6px;
  box-sizing: border-box;
}

/* Base común a ambos botones: compactos y coherentes */
.role-toggle,
.role-clear{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 10px !important;   /* 👈 tamaño compacto */
  border-radius: 14px !important; /* 👈 pill elegante, no gigante */

  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.14) !important;

  font-weight: 900;
  color: #111827;

  box-shadow: 0 6px 14px rgba(0,0,0,.10); /* 👈 sombra suave */
  cursor: pointer;

  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.role-toggle:hover,
.role-clear:hover{
  transform: translateY(-1px);
  background: #ffffff !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.13);
}

.role-toggle:active,
.role-clear:active{
  transform: translateY(0px);
}

/* Texto del botón */
.role-toggle .txt{
  font-size: inherit;   /* 👈 usa el mismo tamaño que el botón base */
  font-weight: inherit; /* 👈 mismo peso que limpiar */
}

/* Off/On pequeño */
.role-toggle .state{
  font-weight: 900;
  font-size: .88rem;
  color: #64748b;
}

/* Switch mini */
.role-toggle .pill{
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(15,23,42,.07);
  position: relative;
  flex: 0 0 40px;
}

.role-toggle .pill::after{
  content:"";
  position:absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .18s ease;
}

/* Estado ON */
.role-toggle.is-on .pill{
  background: rgba(90,162,255,.22);
  border-color: rgba(90,162,255,.40);
}
.role-toggle.is-on .pill::after{
  transform: translateX(18px);
}
.role-toggle.is-on .state{
  color: #2563eb;
}

/* Limpiar: mismo look, un pelín más “acción” pero sin hacerse rojo */
.role-clear{
  justify-content:center;
  min-width: 92px; /* para que no quede enano */
}

/* Si quieres marcarlo cuando hay filtro activo (opcional) */
.role-clear.active{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.26) !important;
}

/* Responsive: en móvil, que no reviente */
@media (max-width: 520px){
  .roles-actions{
    justify-content: flex-end;
    padding-right: 0;
  }
}

/* Cuando la tarjeta está FINALIZADA (verde), fuerza texto legible */
.card.status-FINALIZADO,
.card.status-FINALIZADO * {
  color: #0b0b0b;          /* texto oscuro */
}

/* En concreto, los muted NO deben ir con opacity en verde */
.card.status-FINALIZADO .muted,
.card.status-FINALIZADO .small {
  opacity: 1;
  color: rgba(0,0,0,.72);
}

/* Opcional: mejora contraste de la barra de progreso en verde */
.card.status-FINALIZADO .progress {
  background: rgba(0,0,0,.14);
}
.card.status-FINALIZADO .progress > div {
  background: rgba(255,255,255,.35);
}

/* Vencimientos criticos */
.pill{ padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.pill-blue{ background:#2b5cff33; border:1px solid #2b5cff66; color:#cfe0ff; }
.pill-gray{ background:#ffffff14; border:1px solid #ffffff22; color:#cfd3da; }
.small.danger{ color:#ff7b7b; }
button.small.danger{ color:#fff !important; }
.small.warn{ color:#ffd36e; }


.toolbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.toolbar .input, .toolbar select { min-height:36px; }

.container{
  max-width: 1600px;
  width: min(1600px, calc(100% - 48px));
}

.grid { display:grid; gap:16px; }

@media (min-width: 1024px) {
  .grid.cols-2 { grid-template-columns: 1.25fr .95fr; }
}

.muted { opacity:.8; }

.table th,
.table td {
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
}

.actions {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  align-items:center;
}

.actions select,
.actions .input,
.actions button{
  min-width: 0;
}

.btn.small {
  padding:.32rem .55rem;
  font-size:.82rem;
}

.input[disabled] { opacity:.7; }

.truncate{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== RESUMEN: estilo integrado con el tema oscuro ===== */

#tab-resumen .summary-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

#tab-resumen .summary-chart-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--text);
}

/* Gráfica principal de fases (más alta) */
#tab-resumen .summary-chart-card.chart-phase-lg .summary-chart-box {
  height: 380px;
}
#tab-resumen .summary-chart-card.chart-card-sm .summary-chart-box {
  height: 580px;
}

#tab-resumen .summary-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#tab-resumen .summary-chart-summary {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}

#tab-resumen.is-period-report > #summaryKpis,
#tab-resumen.is-period-report > #summaryResumeBox,
#tab-resumen.is-period-report > .phase,
#tab-resumen.is-period-report > .summary-global-only,
#tab-resumen.is-period-report > .summary-block:not(.summary-period-activity) {
  display: none;
}

#tab-resumen .summary-period-activity[hidden] {
  display: none;
}

#tab-resumen #summaryPeriodChartCard[hidden] {
  display: none;
}

#tab-resumen .summary-period-log-card {
  padding: 16px;
}

#tab-resumen .summary-period-log-card h3 {
  margin: 0 0 12px;
}

#tab-resumen .summary-period-timeline {
  max-height: 300px;
  overflow-y: auto;
}

#tab-resumen .summary-period-row {
  display: grid;
  grid-template-columns: 92px 152px minmax(120px, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  font-size: 12px;
}

#tab-resumen .summary-period-row strong {
  color: var(--text);
}

#tab-resumen .summary-period-row span {
  color: var(--text-muted);
}

#tab-resumen .summary-phase-card {
  grid-column: 1 / -1;
}

#tab-resumen .summary-phase-summary {
  display: grid;
  gap: 12px;
}

#tab-resumen .summary-phase-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}

#tab-resumen .summary-phase-title {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

#tab-resumen .summary-phase-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

#tab-resumen .summary-phase-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

#tab-resumen .summary-phase-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

#tab-resumen .summary-phase-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

#tab-resumen .summary-phase-line strong {
  color: var(--text);
  white-space: nowrap;
}

#tab-resumen .summary-phase-total {
  border-top: 1px solid var(--border);
  margin-top: 5px;
  padding-top: 7px;
  font-weight: 700;
}

@media (max-width: 780px) {
  #tab-resumen .summary-phase-columns {
    grid-template-columns: 1fr;
  }
}

#tab-resumen .summary-mini-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tab-resumen .summary-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}

#tab-resumen .summary-mini-total {
  font-weight: 700;
  border-bottom: 0;
  padding-top: 10px;
}

#tab-resumen .summary-mini-label {
  color: var(--text-muted);
}

#tab-resumen .summary-mini-value {
  color: var(--text);
  font-weight: 700;
}

#tab-resumen .summary-resume-wrap {
  margin: 14px 0 18px;
}

#tab-resumen .summary-resume-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#tab-resumen .summary-resume-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

#tab-resumen .summary-resume-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

#tab-resumen .summary-resume-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

#tab-resumen .summary-resume-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

body {
  zoom: 0.75;
}

/* =========================================
   MOBILE FIXES BANK73
   ========================================= */

@media (max-width: 768px){

  html{
    font-size:14px;
  }

  body{
    overflow-x:hidden;
  }

  .container{
    padding:0 10px;
  }

  /* ===== TOP ===== */

  .proyecto-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .status-controls{
    width:100%;
    justify-content:space-between;
  }

  .select-clean{
    min-width:0;
  }

  /* ===== KPIS ===== */

  .kpi-row{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .kpi{
    padding:10px;
  }

  .kpi .value{
    font-size:1.4rem;
  }

  /* ===== TABS ===== */

  .tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }

  .tabs::-webkit-scrollbar{
    display:none;
  }

  .tab{
    white-space:nowrap;
    flex:0 0 auto;
  }

  /* ===== BOTONES ===== */

  .btn,
  .btn-primary{
    padding:10px 12px;
    font-size:.92rem;
  }

  /* ===== MODALES ===== */

  .modal{
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;

    border-radius:0 !important;

    padding:12px !important;

    display:flex;
    flex-direction:column;
  }

  .modal-body{
    flex:1;
    overflow:auto;
    padding-bottom:120px;
  }

  .modal-footer{
    position:sticky;
    bottom:0;
    background:#fff;
    padding-top:12px;
  }

  /* ===== FICHA UNIDAD ===== */

  .form-grid-4{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  .label{
    margin-bottom:-4px;
    font-size:.9rem;
  }

  #fichaUnidadModal input,
  #fichaUnidadModal select{
    min-height:44px;
    font-size:16px;
  }

  /* ===== COMERCIAL ===== */

  .commercial-folder-body{
    grid-template-columns:1fr !important;
  }

  .unit-card{
    padding:12px !important;
  }

  .unit-card .price{
    font-size:1.2rem !important;
  }

  /* ===== RESUMEN ===== */

  .grid-2{
    grid-template-columns:1fr !important;
  }

  /* ===== FINANZAS ===== */

  .fin-phases-grid{
    grid-template-columns:1fr !important;
  }

  .fin-cols{
    grid-template-columns:1fr !important;
  }

  /* ===== PERMISOS ===== */

  #modalBody table.dark{
    display:block;
    overflow-x:auto;
  }

  #modalBody table.dark tbody tr{
    min-width:700px;
  }

  /* ===== CHARTS ===== */

  canvas{
    max-width:100% !important;
    height:auto !important;
  }

}
/* =========================================
   MOBILE FIX COMERCIAL
   ========================================= */

@media (max-width: 768px){

  /* Evita que Comercial ensanche toda la pantalla */
  #tab-comercial{
    overflow-x:hidden;
  }

  /* Botonera comercial */
  #tab-comercial .row,
  #tab-comercial .commercial-actions,
  #tab-comercial .export-docs-actions{
    flex-wrap:wrap;
  }

  #tab-comercial .btn,
  #tab-comercial .btn-primary{
    flex:1 1 auto;
    min-width:140px;
  }

  /* Select y buscador */
  #tab-comercial select,
  #tab-comercial input{
    width:100%;
    max-width:100%;
  }

  /* KPIs comerciales: scroll horizontal */
  #tab-comercial .commercial-stats,
  #tab-comercial .sales-stats,
  #tab-comercial .units-summary,
  #tab-comercial .commercial-summary{
    display:flex !important;
    overflow-x:auto;
    gap:14px;
    padding-bottom:8px;
    white-space:nowrap;

    scrollbar-width:none;
  }

  #tab-comercial .commercial-stats::-webkit-scrollbar,
  #tab-comercial .sales-stats::-webkit-scrollbar,
  #tab-comercial .units-summary::-webkit-scrollbar,
  #tab-comercial .commercial-summary::-webkit-scrollbar{
    display:none;
  }

  #tab-comercial .commercial-stats > *,
  #tab-comercial .sales-stats > *,
  #tab-comercial .units-summary > *,
  #tab-comercial .commercial-summary > *{
    flex:0 0 auto;
  }

  /* Carpetas */
  .commercial-folder{
    width:100%;
    max-width:100%;
    padding:14px 10px;
    overflow:hidden;
  }

  .commercial-folder-body{
    grid-template-columns:1fr !important;
  }

  /* Cards de unidad */
  #tab-comercial .unit-card{
    width:100%;
    max-width:100%;
  }

  #tab-comercial .unit-card .head{
    align-items:flex-start;
  }

  #tab-comercial .unit-card .badges{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;

    scrollbar-width:none;
  }

  #tab-comercial .unit-card .badges::-webkit-scrollbar{
    display:none;
  }

  #tab-comercial .unit-card .chip{
    flex:0 0 auto;
  }

  /* Tabs ficha unidad */
  #fichaUnidadModal .modal-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    white-space:nowrap;

    scrollbar-width:none;
  }

  #fichaUnidadModal .modal-tabs::-webkit-scrollbar{
    display:none;
  }

  #fichaUnidadModal .modal-tab{
    flex:0 0 auto;
  }

  /* Secciones ficha */
  #fichaUnidadModal .section{
    width:100%;
    max-width:100%;
  }

  /* Footer ficha */
  #fichaUnidadModal .modal-footer{
    position:sticky !important;
    bottom:0;
    width:100%;
    background:#fff !important;
    z-index:20;
  }

  #fichaUnidadModal .modal-footer .btn,
  #fichaUnidadModal .modal-footer button{
    width:100%;
  }
}

/* =========================================
   MOBILE — FINAL FIX DEFINITIVO
   Topbar + portfolio + popups + comercial
   ========================================= */

@media (max-width: 768px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    zoom:1 !important;
  }

  body{
    position:relative;
  }

  /* ===== TOPBAR GENERAL ===== */

  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    padding:12px 14px !important;

    background:rgba(15,20,34,.96) !important;
    backdrop-filter:blur(10px);
  }

  .topbar .brand{
    min-width:0 !important;
    font-size:16px !important;
    font-weight:800 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .topbar #logoutBtn,
  .topbar .btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:88px !important;

    padding:10px 16px !important;
    border-radius:18px !important;

    position:relative !important;
    z-index:10000 !important;
  }

  /* ===== PORTFOLIO TOPBAR ===== */

  .topbar-left{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .topbar-right{
    flex:0 0 auto !important;
    min-width:auto !important;
    display:flex !important;
    justify-content:flex-end !important;
  }

  .topbar-center{
    order:3 !important;
    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;
  }

  .topbar-search{
    width:100% !important;
    max-width:100% !important;
  }

  /* ===== CONTENEDORES ===== */

  .container,
  .unit-card,
  .phase,
  .card,
  .section{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* ===== COMERCIAL / CARPETAS ===== */

  .commercial-folder{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    padding:16px !important;
    overflow:hidden !important;
  }

  .commercial-folder-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;

  flex-wrap:wrap !important;

  gap:12px !important;

  width:100% !important;
  max-width:100% !important;
}

.commercial-folder-head h3{
  flex:1 1 140px !important;
  min-width:0 !important;

  margin:0 !important;

  font-size:26px !important;
  line-height:1.1 !important;

  white-space:normal !important;
  word-break:break-word !important;

  writing-mode:initial !important;
}

.folder-actions{
  flex:0 1 auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  flex-wrap:wrap !important;

  gap:10px !important;

  min-width:180px !important;
}

.folder-actions .folder-color{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:10px !important;
}

.folder-actions .btn,
.folder-actions button{
  width:auto !important;
  min-width:120px !important;
}

  .folder-actions .folder-color{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    padding:0 !important;
  }

  .folder-actions .btn,
  .folder-actions button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    padding:10px 12px !important;
    border-radius:999px !important;

    white-space:nowrap !important;
  }

  .commercial-folder-body{
    grid-template-columns:1fr !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #tab-comercial .unit-card{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  #tab-comercial .unit-card .head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .badges,
  .unit-card .badges{
    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:6px !important;
    max-width:100% !important;

    scrollbar-width:none !important;
  }

  .badges::-webkit-scrollbar,
  .unit-card .badges::-webkit-scrollbar{
    display:none !important;
  }

  .chip{
    flex:0 0 auto !important;
  }

  /* ===== POPUPS FULLSCREEN ===== */

  .modal-backdrop,
  #fichaUnidadModal,
  #modalBackdrop{
    position:fixed !important;
    inset:0 !important;

    width:100% !important;
    height:100dvh !important;

    margin:0 !important;
    padding:0 !important;

    z-index:999999 !important;

    overflow:hidden !important;

    background:rgba(0,0,0,.55) !important;
    zoom:1 !important;
  }

  .modal-backdrop[style*="display: flex"],
  .modal-backdrop[style*="display:flex"],
  #fichaUnidadModal[style*="display: flex"],
  #fichaUnidadModal[style*="display:flex"],
  #modalBackdrop[style*="display: flex"],
  #modalBackdrop[style*="display:flex"],
  .modal-backdrop.show{
    display:block !important;
  }

  .modal-backdrop .modal,
  #fichaUnidadModal .modal,
  #modalBackdrop .modal{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    max-width:100vw !important;

    height:100dvh !important;
    max-height:100dvh !important;

    margin:0 !important;
    padding:14px !important;

    border-radius:0 !important;
    border:0 !important;

    background:#fff !important;
    color:#0f172a !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    box-shadow:none !important;
    transform:none !important;
  }

  .modal-head{
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    background:#fff !important;

    padding:8px 0 12px !important;

    border-bottom:1px solid #e5e7eb !important;
  }

  .modal-head b{
    font-size:20px !important;
    color:#0f172a !important;
  }

  .modal-head button,
  .modal-head .btn{
    width:auto !important;
    min-width:110px !important;

    background:#fff !important;
    color:#111827 !important;

    border:1px solid #cbd5e1 !important;
    border-radius:14px !important;

    padding:10px 14px !important;

    box-shadow:0 8px 22px rgba(15,23,42,.15) !important;
  }

  #fichaUnidadModal .modal-tabs{
    flex:0 0 auto !important;

    display:flex !important;
    gap:8px !important;

    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    white-space:nowrap !important;

    padding:10px 0 10px !important;
    margin:0 !important;

    background:#fff !important;

    border-bottom:1px solid #e5e7eb !important;

    scrollbar-width:none !important;
  }

  #fichaUnidadModal .modal-tabs::-webkit-scrollbar{
    display:none !important;
  }

  #fichaUnidadModal .modal-tab{
    flex:0 0 auto !important;

    min-width:max-content !important;

    padding:12px 18px !important;

    border-radius:12px 12px 0 0 !important;
  }

  .modal-body,
  #modalBody,
  #fichaUnidadModal .modal-body{
    flex:1 1 auto !important;

    height:auto !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:14px 0 90px !important;

    margin:0 !important;
  }

  .modal-footer{
    flex:0 0 auto !important;

    background:#fff !important;
    border-top:1px solid #e5e7eb !important;

    padding:12px 0 calc(12px + env(safe-area-inset-bottom)) !important;

    margin:0 !important;
  }

  .modal-footer button,
  .modal-footer .btn{
    width:100% !important;

    min-height:50px !important;

    border-radius:16px !important;
  }

  #fichaUnidadModal .section,
  #modalBody .permits-phase-card{
    width:100% !important;
    max-width:100% !important;

    border-radius:18px !important;

    overflow:hidden !important;
  }

  #modalBody .permits-table-wrap{
    overflow-x:auto !important;
  }

  #modalBody table.dark{
    min-width:560px !important;
  }
}

.unit-title-input {
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  max-width: 180px;
  padding: 4px 8px;
  border-radius: 10px;
}

.unit-title-input:hover {
  background: #eef2ff;
}

.unit-title-input:focus {
  outline: 2px solid #3b82f6;
  background: #fff;
}