@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/vendor/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/vendor/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/vendor/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/vendor/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/vendor/fonts/inter-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Paleta FideicomisoGestión: navy + dorado — la misma combinación que ya usa
     https://ncserviciosintegrales.com/sistemas-nc/ (el hub que lista los sistemas del
     estudio), a propósito: es un fideicomiso, no un consultorio clínico, así que en vez de
     inventar una paleta "clínica" más (como las de odonto/derma/psico) se ató directo a la
     identidad institucional del estudio — refuerza que este sistema es parte de la misma
     familia apenas se entra. Misma estructura de variables que los sistemas hermanos, para
     que el resto del CSS (navbar, cards, hero, etc.) sea intercambiable entre todos. */
  --navy: #101d3a;
  --navy-deep: #0a1428;
  --accent: #b5924c;
  --accent-2: #d8bd85;
  --bg: #f7f7f9;
  --radius: 14px;
  --shadow-soft: 0 4px 16px rgba(16,29,58,0.08);
  --shadow-hover: 0 10px 28px rgba(16,29,58,0.16);
}
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body { background: var(--bg); animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.app-navbar { background: var(--navy); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.app-navbar .nav-link { transition: color .15s ease; border-radius: 6px; }
.app-navbar .nav-link:hover { color: #fff !important; }
.brand-link { transition: opacity .15s; display:flex; align-items:center; }
.brand-link:hover { opacity: .85; }
.card { border: none; box-shadow: var(--shadow-soft); border-radius: var(--radius); transition: transform .18s ease, box-shadow .18s ease; }
.stat-card { border-left: 4px solid var(--accent); }
a.stat-card, .stat-card.hover-lift { cursor: pointer; }
.hover-lift:hover, a.card:hover, .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.table thead { background: var(--navy); color: #fff; }
.btn { border-radius: 8px; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(181,146,76,.35); }
.btn:active { transform: translateY(0); }
.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, var(--accent)); background-size: 200% 200%; animation: gradientShift 12s ease infinite; position: relative; overflow: hidden; }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.login-card { max-width: 420px; width: 100%; animation: fadeIn .5s ease; position: relative; z-index: 1; }
.login-decor { position:absolute; opacity:.12; color:#fff; }
.login-decor-1 { top:-60px; left:-60px; width:260px; height:260px; transform:rotate(-12deg); }
.login-decor-2 { bottom:-70px; right:-50px; width:220px; height:220px; transform:rotate(18deg); }
.login-logo { max-width: 220px; max-height: 110px; object-fit: contain; }
.nav-logo { height: 36px; max-width: 160px; object-fit: contain; background:#fff; border-radius:6px; padding:3px 6px; margin-right:8px; }
.logo-thumb { height: 34px; width: 34px; object-fit: contain; background:#fff; border:1px solid #e3e8ef; border-radius:6px; padding:2px; }
.note-illustrative { background:#fff2cc; border:1px solid #bf8f00; color:#7f6000; border-radius:8px; padding:10px 14px; font-size:.875rem; }

/* --- Mapa de Loteo: grilla de 500 celdas coloreadas por estado — misma idea que el
   odontograma de odonto-app (grilla de piezas coloreada por estado clínico), acá con
   estado comercial en vez de clínico. --- */
.mapa-loteo { display:grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap:6px; }
.lote-cell {
  aspect-ratio: 1; border:2px solid #c9d4e0; border-radius:8px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:.68rem; font-weight:700; cursor:pointer;
  background:#fff; color:#495057; position:relative; transition: transform .1s ease;
}
.lote-cell:hover { border-color: var(--accent); transform: translateY(-2px); }
.lote-cell.estado-disponible { background:#fff; border-color:#c9d4e0; color:#495057; }
.lote-cell.estado-reservado { background:#fff3cd; border-color:#e0a800; color:#664d03; }
.lote-cell.estado-contrato_firmado { background:#cfe2ff; border-color:#0d6efd; color:#084298; }
.lote-cell.estado-en_ejecucion_obra { background:#e2d9f3; border-color:#6f42c1; color:#432874; }
.lote-cell.estado-listo_escriturar { background:#d1e7dd; border-color:#198754; color:#0f5132; }
.lote-cell.estado-escriturado { background:#dfe3e8; border-color:#8891a0; color:#495057; }
.lote-cell.en-mora { box-shadow: 0 0 0 3px rgba(220,53,69,.55) inset; }
.lote-cell.en-mora::after { content:"⚠"; position:absolute; top:2px; right:3px; font-size:.65rem; color:#dc3545; }
.leyenda-lote { display:inline-flex; align-items:center; gap:6px; margin-right:14px; margin-bottom:6px; font-size:.8rem; }
.leyenda-swatch { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.15); }
@media (max-width: 576px) { .mapa-loteo { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); } }

.evolucion-timeline { max-height:420px; overflow-y:auto; padding-left:14px; border-left:2px solid #e3e8ef; }
.evolucion-item { position:relative; padding-bottom:14px; }
.evolucion-item:not(:last-child) { border-bottom:1px dashed #e3e8ef; margin-bottom:10px; }
.evolucion-item::before { content:""; position:absolute; left:-18px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* --- Hero de inicio --- */
.hero-banner {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, var(--accent));
  color: #fff; padding: 2rem 2rem; margin-bottom: 1.5rem;
  box-shadow: var(--shadow-hover);
}
.hero-banner .hero-greeting { font-size: 1.6rem; font-weight: 800; margin-bottom: .25rem; }
.hero-banner .hero-sub { color: rgba(255,255,255,.8); font-size: .95rem; }
.hero-logo-frame {
  background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; width: 108px; height: 108px;
}
.hero-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Acciones rápidas --- */
.quick-action {
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  background:#fff; border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration:none; color: var(--navy);
  box-shadow: var(--shadow-soft); border: 1px solid transparent; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quick-action:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(181,146,76,.3); color: var(--navy); }
.quick-action .qa-icon {
  width: 42px; height: 42px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; flex-shrink:0;
}
.quick-action .qa-title { font-weight: 700; font-size: .92rem; }
.quick-action .qa-sub { font-size: .78rem; color:#7a8699; }

/* --- Utilidades de animación de entrada, escalonada por índice --- */
.fade-up { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
.delay-1 { animation-delay: .05s; } .delay-2 { animation-delay: .1s; } .delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .2s; } .delay-5 { animation-delay: .25s; } .delay-6 { animation-delay: .3s; }

.avatar-circle {
  width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background:#fff;
  border: 2px solid #e3e8ef; padding: 3px; flex-shrink: 0;
}
.avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700; flex-shrink:0;
}
.empty-state { text-align:center; padding: 2rem 1rem; color:#8592a6; }
.empty-state svg { width: 72px; height: 72px; opacity: .5; margin-bottom: .5rem; }

/* --- Volver atrás --- */
.volver-atras {
  display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:600;
  color: var(--accent); text-decoration:none; margin-bottom:.75rem;
  transition: transform .15s ease, color .15s ease;
}
.volver-atras:hover { color: var(--navy); transform: translateX(-2px); }

/* --- Badge de rol --- */
.badge-gestor { background: #6c757d; }
.badge-fiduciante { background: #2e74b5; }
.franja-rol { background:#eef1f5; border-left:4px solid #6c757d; border-radius:8px; padding:.5rem .9rem; font-size:.8rem; color:#495057; margin-bottom:1rem; }

/* --- Financiero: tarjetas de resumen --- */
.finanzas-card { border-radius: var(--radius); padding:1.1rem; background:#fff; box-shadow: var(--shadow-soft); }
.finanzas-card .fin-label { font-size:.78rem; color:#7a8699; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.finanzas-card .fin-monto { font-size:1.7rem; font-weight:800; color: var(--navy); }

.medio-pill { display:inline-flex; align-items:center; gap:6px; padding:.3rem .7rem; border-radius:20px; font-size:.78rem; font-weight:600; }
.medio-pill.medio-transferencia { background:#fff3e0; color:#b5690a; }
.medio-pill.medio-efectivo { background:#eafaf3; color:#1a8f6b; }
.medio-pill.medio-otro { background:#f1f1f4; color:#666; }

/* --- Panel Financiero: fiscal / no fiscal, ingreso / egreso --- */
.fiscal-pill { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:14px; font-size:.72rem; font-weight:700; }
.fiscal-pill.si { background:#d1e7dd; color:#0f5132; }
.fiscal-pill.no { background:#e9ecef; color:#495057; }
.monto-ingreso { color:#0f5132; font-weight:700; }
.monto-egreso { color:#842029; font-weight:700; }
.tabla-resumen-fiscal th, .tabla-resumen-fiscal td { text-align:right; }
.tabla-resumen-fiscal th:first-child, .tabla-resumen-fiscal td:first-child { text-align:left; }

/* --- Estado de aporte / documento --- */
.estado-chip { display:inline-flex; align-items:center; gap:6px; padding:.25rem .65rem; border-radius:20px; font-size:.75rem; font-weight:700; }
.estado-chip.pendiente { background:#fff3cd; color:#7f6000; }
.estado-chip.confirmado, .estado-chip.validado, .estado-chip.al_dia, .estado-chip.activo { background:#d1e7dd; color:#0f5132; }
.estado-chip.rechazado, .estado-chip.en_mora, .estado-chip.moroso { background:#f8d7da; color:#842029; }
.estado-chip.cargado { background:#cfe2ff; color:#084298; }
.estado-chip.cedido { background:#e2d9f3; color:#432874; }
.estado-chip.baja { background:#e9ecef; color:#495057; }

/* --- Documentos adjuntos: grilla de miniaturas --- */
.archivos-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap:.75rem; }
.archivo-tile { background:#f8f9fc; border-radius:10px; padding:.5rem; text-align:center; }
.archivo-thumb-link { display:block; }
.archivo-thumb-img { width:100%; height:88px; object-fit:cover; border-radius:8px; background:#e9edf3; }
.archivo-thumb-icon { width:100%; height:88px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; background:#e9edf3; border-radius:8px; }
.archivo-tile-nombre { font-size:.7rem; color:#495057; margin:.35rem 0 .2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- Indicadores de gestión: barra de progreso simple (avance de obra, aportes cobrados) --- */
.kpi-bar-track { background:#e9edf3; border-radius:20px; height:8px; overflow:hidden; }
.kpi-bar-fill { height:100%; border-radius:20px; background: var(--accent); }
.kpi-bar-fill.warn { background:#e0a800; }
.kpi-bar-fill.danger { background:#b02a37; }