/* ══════════════════════════════════════════
   CERTUS Finanzas — look and feel de CERTUS (JS Pharma)
   Tokens y componentes copiados de certus-v1/public/assets/style.css.
   Fuentes e iconos servidos desde /vendor (npm), no desde CDN.
══════════════════════════════════════════ */
@import url('/vendor/raleway/400.css');
@import url('/vendor/raleway/600.css');
@import url('/vendor/raleway/700.css');
@import url('/vendor/open-sans/400.css');
@import url('/vendor/open-sans/600.css');

:root {
  --teal:         #4ECDC4;
  --teal-dark:    #3DBFB8;
  --teal-light:   #A8EDEA;
  --purple:       #7B7FC4;
  --purple-dark:  #4A4A8A;
  --purple-light: #B8BAE8;
  --grad-start:   #7B7FC4;
  --grad-end:     #4ECDC4;
  --white:        #FFFFFF;
  --bg:           #F5F7FA;
  --surface:      #FFFFFF;
  --text:         #2D2D5E;
  --text-muted:   #7A8099;
  --border:       #E2E8F0;
  --success:      #38A169;
  --warning:      #D69E2E;
  --danger:       #E53E3E;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --shadow-sm:    0 1px 3px rgba(123,127,196,.10);
  --shadow-md:    0 4px 16px rgba(123,127,196,.15);
  --shadow-lg:    0 8px 32px rgba(123,127,196,.20);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: 'Open Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; }
h1, h2, h3 { font-family: 'Raleway', sans-serif; color: var(--purple-dark); }
.oculto { display: none !important; }
.marca-acento {
  background: linear-gradient(135deg, var(--purple), var(--teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
code { font-family: Consolas, monospace; background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.sub { color: var(--text-muted); font-size: .85rem; }

/* ── LOGIN ── */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(135deg, #7B7FC4 0%, #4ECDC4 100%);
}
.login-card {
  background: white; border-radius: var(--radius-lg); padding: 3rem 2.5rem;
  width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); text-align: center;
}
.login-logo { height: 80px; object-fit: contain; margin-bottom: 1.25rem; }
.login-card h2 { font-weight: 700; margin: 0 0 .5rem; }
.login-card > p { color: var(--text-muted); font-size: .9rem; margin: 0 0 1.5rem; }
.login-card .login-version { font-size: .72rem; margin-top: -1rem; }
.btn-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: .875rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: white; text-decoration: none;
  font-size: .925rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.btn-login:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(78,205,196,.25); }
.login-dev { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.login-dev p { font-size: .78rem; color: var(--text-muted); margin: 0 0 .75rem; }
.login-dev select { margin-bottom: .75rem; width: 100%; }
.btn-login-dev { border-color: var(--teal); }
.login-footer { margin-top: 2rem; font-size: .78rem; color: var(--text-muted); }

/* ── NAVBAR ── */
.navbar {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 2rem; height: 64px; display: flex; align-items: center;
  justify-content: space-between; box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 100; gap: 12px;
}
.navbar-brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.navbar-brand img { height: 40px; object-fit: contain; }
.navbar-brand span {
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1rem;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.navbar-user { display: flex; align-items: center; gap: 12px; }
.navbar-user-datos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; gap: 2px; }
.navbar-user-datos strong { font-size: .85rem; font-weight: 600; }
.user-avatar-nav {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-light), var(--teal-light));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: var(--purple-dark);
  border: 2px solid var(--teal); flex-shrink: 0;
}
.btn-signout {
  font-size: .8rem; padding: 6px 14px; border: 1px solid var(--border);
  background: transparent; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: all .2s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-signout:hover { border-color: var(--danger); color: var(--danger); }

/* ── LAYOUT / SIDEBAR ── */
.layout { display: flex; min-height: calc(100vh - 64px); }
.sidebar {
  width: 240px; background: var(--white); border-right: 1px solid var(--border);
  padding: 1.25rem 0 0; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;
  transition: width .2s ease;
}
.sidebar-section { padding: 0 1rem .75rem; }
.sidebar-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: .5rem .75rem .3rem;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px; padding: .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--text); font-size: .855rem; transition: all .15s; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.sidebar-item i { font-size: 1.1rem; opacity: .7; flex-shrink: 0; }
.sidebar-item:hover:not(:disabled) { background: var(--bg); color: var(--purple); }
.sidebar-item.activo {
  background: linear-gradient(135deg, rgba(123,127,196,.12), rgba(78,205,196,.12));
  color: var(--purple-dark); font-weight: 600;
}
.sidebar-item.activo i { opacity: 1; }
.sidebar-item:disabled { color: #B5BCCB; cursor: not-allowed; }
.sidebar-badge {
  margin-left: auto; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: #FFF0F0; color: #C53030;
}
.sidebar-collapse-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: .6rem;
  border: none; border-top: 1px solid var(--border); background: none; color: var(--text-muted);
  cursor: pointer; font-size: 1.15rem;
}
.sidebar-collapse-btn:hover { color: var(--purple); }
.sidebar.colapsado { width: 62px; }
.sidebar.colapsado .sidebar-label, .sidebar.colapsado .sidebar-text, .sidebar.colapsado .sidebar-badge { display: none !important; }
.sidebar.colapsado .sidebar-section { padding: 0 .4rem .75rem; }
.sidebar.colapsado .sidebar-item { justify-content: center; padding: .6rem 0; position: relative; }
.sidebar.colapsado .sidebar-item:hover::after {
  content: attr(data-label); position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
  background: var(--purple-dark); color: #fff; font-size: .78rem; padding: .3rem .65rem; border-radius: 6px;
  white-space: nowrap; z-index: 999; pointer-events: none;
}

/* ── MAIN ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenido { flex: 1; padding: 2rem; }
.pie { padding: .75rem 2rem; color: var(--text-muted); font-size: .75rem; }

/* ── PAGE HEADER: la primera .barra de cada vista es el encabezado con degradado ── */
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.barra h2 { margin: 0; font-size: 1.15rem; }
.contenido > .barra:first-child {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  border-radius: var(--radius-lg); padding: 1.6rem 2rem; color: white; margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.contenido > .barra:first-child::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none;
}
.contenido > .barra:first-child h2 { color: white; font-size: 1.55rem; font-weight: 700; }
.contenido > .barra:first-child .sub { color: rgba(255,255,255,.88); }
.contenido > .barra:first-child .btn { background: rgba(255,255,255,.18); color: white; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.contenido > .barra:first-child .btn:hover { background: rgba(255,255,255,.28); }
.contenido > .barra:first-child .filtros { margin: 0; }
.contenido > .barra:first-child select { background: rgba(255,255,255,.95); }

/* ── CARDS ── */
.tarjeta {
  background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 1.5rem; transition: box-shadow .2s;
}
.tarjeta:hover { box-shadow: var(--shadow-md); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tarjeta-num {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; position: relative; overflow: hidden; transition: all .2s;
}
.tarjeta-num::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--purple), var(--teal)); }
.tarjeta-num:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tarjeta-num .valor { font-family: 'Raleway', sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--purple-dark); }
.tarjeta-num .etiqueta { color: var(--text-muted); font-size: .78rem; margin-top: 2px; }
.tarjeta-num.alerta-num::before { background: linear-gradient(90deg, #E53E3E, #D69E2E); }
.tarjeta-num.clic { cursor: pointer; }
.tarjeta-num .valor i { font-size: 1.1rem; color: var(--purple); vertical-align: -1px; }
.acciones-fila { white-space: nowrap; text-align: right; }
.acciones-fila .btn { margin-left: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.seccion-titulo { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ── CHIPS ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.chip-purple { background: rgba(123,127,196,.15); color: var(--purple-dark); border-color: transparent; }
.chip-teal  { background: rgba(78,205,196,.15); color: var(--teal-dark); border-color: transparent; }
.chip-green, .chip.vigente, .chip.cobro-pagada, .chip.cobro-pagada_pue { background: rgba(56,161,105,.12); color: #276749; border-color: transparent; }
.chip-orange, .chip.cobro-parcial { background: #FFF0E6; color: #9C4221; border-color: transparent; }
.chip-red, .chip.cancelado, .chip.inactivo, .chip.cobro-pendiente, .chip.cobro-sobrepagada { background: #FFF0F0; color: #C53030; border-color: transparent; }
.chip-blue  { background: #EBF4FF; color: #2B6CB0; border-color: transparent; }
.chip.cobro-cancelada { color: var(--text-muted); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: .5rem 1.15rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none;
  font-family: inherit; background: transparent; border: 1.5px solid var(--border); color: var(--text-muted);
}
.btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario {
  background: linear-gradient(135deg, var(--purple), var(--teal)); color: white; border: none;
  box-shadow: 0 2px 8px rgba(78,205,196,.3);
}
.btn-primario:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); color: white; }
.btn-chico { padding: .3rem .75rem; font-size: .78rem; }
.btn-peligro { border-color: var(--danger); color: var(--danger); }
.btn-peligro:hover:not(:disabled) { background: var(--danger); color: white; border-color: var(--danger); }
.enlace { background: none; border: 0; padding: 0; color: var(--purple); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.enlace:hover { color: var(--teal-dark); }

/* ── ALERTS ── */
.alerta {
  padding: .8rem 1.1rem; border-radius: var(--radius-sm); font-size: .875rem; margin: .75rem 0;
  background: rgba(229,62,62,.1); color: #9B2C2C; border-left: 4px solid var(--danger); line-height: 1.5;
}
.aviso {
  padding: .8rem 1.1rem; border-radius: var(--radius-sm); font-size: .875rem; margin: .75rem 0;
  background: rgba(214,158,46,.12); color: #7B5A12; border-left: 4px solid var(--warning); line-height: 1.5;
}
.exito {
  padding: .8rem 1.1rem; border-radius: var(--radius-sm); font-size: .875rem; margin: .75rem 0;
  background: rgba(56,161,105,.1); color: #276749; border-left: 4px solid var(--success);
}

/* ── FORMS ── */
input, select, textarea {
  font-family: inherit; font-size: .875rem; padding: .55rem .85rem; color: var(--text); background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(78,205,196,.15); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--teal); }
textarea { resize: vertical; min-height: 70px; width: 100%; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; align-items: center; }
.filtros input[type=search] { flex: 1; min-width: 200px; }
.filtros label { display: flex; align-items: center; gap: 6px; }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1rem; }
.campos input, .campos select, .campos textarea, .modal label input, .modal label select { width: 100%; min-width: 0; }
.campos .ancho { grid-column: 1 / -1; }
.modal label, .campos label {
  display: flex; flex-direction: column; gap: .35rem; font-size: .74rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.modal label.check { flex-direction: row; align-items: center; text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* ── TABLES ── */
.tabla-scroll { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--white); }
table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .85rem; }
thead tr { background: var(--bg); }
th { padding: .65rem .9rem; text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); color: var(--text); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FAFBFD; }
tr.clic { cursor: pointer; }
tr.clic:hover td { background: rgba(78,205,196,.06); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num strong { color: var(--purple-dark); }
.contenido > table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.paginacion { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; color: var(--text-muted); font-size: .85rem; }

/* ── TABS ── */
.pestanas { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.pestana {
  padding: .6rem 1.15rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); border: none; background: none;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; font-family: inherit;
}
.pestana:hover { color: var(--purple); }
.pestana.activa { color: var(--purple-dark); border-bottom-color: var(--purple); }

/* ── MODAL ── */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(45,45,94,.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 200;
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 2rem; width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); animation: subir .25s ease;
  max-height: 90vh; overflow-y: auto;
}
@keyframes subir { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.modal-medio { max-width: 640px; }
.modal-ancho { max-width: 1000px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 4px; }
.modal-close:hover { background: var(--bg); color: var(--purple-dark); }
.acciones { display: flex; justify-content: flex-end; gap: .75rem; margin-top: .5rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem 1.25rem; margin: .5rem 0 1rem; }
.datos div { font-size: .875rem; }
.datos span { display: block; color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* ── PRECIERRE ── */
.tabla-calculo tr.grupo td { background: var(--bg); font-weight: 700; color: var(--purple-dark); font-family: 'Raleway', sans-serif; }
.tabla-calculo tr.total td { font-weight: 700; border-top: 2px solid var(--purple-light); }
.positivo { color: #C53030; }
.negativo { color: #276749; }

/* ── EMPTY / SCROLLBAR ── */
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.vacio i { font-size: 2.4rem; opacity: .4; display: block; margin-bottom: .75rem; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--teal-light); border-radius: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .navbar { padding: 0 1rem; }
  .navbar-user-datos { display: none; }
  .layout { flex-direction: column; }
  .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); padding: .5rem 0; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .sidebar-section { padding: 0 .25rem; display: flex; flex-wrap: wrap; }
  .sidebar-label, .sidebar-collapse-btn { display: none; }
  .sidebar-item { width: auto; }
  .contenido { padding: 1rem; }
  .contenido > .barra:first-child { padding: 1.2rem 1.25rem; }
  .campos, .grid-2 { grid-template-columns: 1fr; }
}

/* ── PROYECTOS ── */
.avance { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.avance-barra { height: 100%; width: 0; background: linear-gradient(90deg, var(--purple), var(--teal)); }
.acciones-fila .btn + .btn { margin-left: 6px; }
label.btn { text-transform: none; letter-spacing: 0; font-size: .78rem; display: inline-flex; flex-direction: row; cursor: pointer; }
#tablaEntregables input { width: 100%; }

/* ── FASE 6: SAT ── */
.bloque-sat { margin-bottom: 1.5rem; }
.bloque-sat .barra { margin-bottom: .25rem; }
.bloque-sat .seccion-titulo { margin: 0; }

/* ── UTILIDAD (7d) ── */
.util-neg { color: #C53030; }
tr.fila-total td { font-weight: 700; border-top: 2px solid var(--purple-light); }

/* ── COTIZACIONES (Fase 8) ── */
input.corto { width: 5rem; }
#zonaImpresion { display: none; }
@media print {
  body.imprimiendo > *:not(#zonaImpresion) { display: none !important; }
  body.imprimiendo #zonaImpresion { display: block; font-family: 'Open Sans', sans-serif; color: #000; padding: 1rem; }
  #zonaImpresion .imp-logo { height: 48px; }
  #zonaImpresion table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
  #zonaImpresion th, #zonaImpresion td { border-bottom: 1px solid #ccc; padding: 6px; text-align: left; }
  #zonaImpresion .num { text-align: right; }
  #zonaImpresion .imp-pie { margin-top: 2rem; font-size: 0.85rem; color: #555; }
}

/* ── LOGIN CON CONTRASEÑA ── */
.login-password { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.login-password.oculto { display: none; }
.login-password input { padding: 0.7rem 0.9rem; border: 1px solid var(--border, #ddd); border-radius: 8px; font-size: 0.95rem; }