/* =====================================================================
   Tema "M3Max" para el Panel Clientes (Gestion de Licitaciones)
   Se agrega al final del <head> de cada pagina: solo cambia el aspecto,
   no la estructura ni la logica. Los colores de cada ESTADO se mantienen.
   ===================================================================== */

:root {
  --brand-1: #635bff;          /* indigo */
  --brand-2: #8b5cf6;          /* violeta */
  --brand-3: #d946ef;          /* fucsia */
  --grad-brand: linear-gradient(135deg, #635bff 0%, #8b5cf6 55%, #d946ef 120%);
  --menu-bg: linear-gradient(185deg, #0c1024 0%, #141a37 60%, #1a1550 100%);
  --surface: #ffffff;
  --border: #eceef5;
  --surface-soft: #f7f8fc;
  --text-strong: #0f172a;
  --text: #1e293b;
  --text-muted: #64748b;
  --r-control: 10px;
  --r-card: 16px;
  --r-page: 20px;
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md: 0 6px 24px rgba(15,23,42,.07);
  --sh-lg: 0 18px 50px rgba(31,26,92,.14);
  --sh-page: 0 10px 40px rgba(31,26,92,.06);
  --focus: 0 0 0 3px rgba(99,91,255,.15);
}

/* ---------- Base: tipografia y fondo ---------- */
html, body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
  color: var(--text);
}
body {
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(900px 480px at 105% 0%, rgba(99,91,255,.09), transparent 60%),
    linear-gradient(180deg, #f7f8fc 0%, #eef0f8 100%) fixed !important;
  background-attachment: fixed !important;
}
h1, h2, h3, .card-title, .modal-titulo, .page-head h2 { letter-spacing: -0.02em; color: var(--text-strong); }
.cabecera-oscura .t { letter-spacing: -0.02em; color: #fff !important; }
input, select, textarea, button { font-family: inherit; }
table, .num, .kpi .v, .v, .value, .total-general {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
kbd, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Menu superior oscuro (mismos colores que el menu de M3Max) ---------- */
header[style*="0f172a"], body > header:first-of-type {
  background: var(--menu-bg) !important;
  border-bottom: none !important;
  box-shadow: 0 10px 30px rgba(12,16,36,.28);
}
/* Plus Jakarta Sans es un poco mas ancha: se ajusta el espacio para que el menu siga entrando en una linea */
header[style*="0f172a"], body > header:first-of-type { padding-left: 20px !important; padding-right: 20px !important; }
header nav { gap: 2px !important; }
header nav a {
  padding: 7px 11px !important;
  font-size: .8rem !important;
  color: rgba(233,236,255,.72) !important;
  border-radius: 12px !important;
  transition: background .15s, color .15s, box-shadow .15s;
}
header nav a:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; }
header nav a[style*="6366f1"] {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(99,91,255,.45);
}
/* Logo "GL" */
header div[style*="width:34px"] {
  background: var(--grad-brand) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(99,91,255,.35);
}
#tituloEmpresa { letter-spacing: -0.01em; }
header span, header button, header nav a { white-space: nowrap; }
/* Encabezado propio del detalle de cotizacion (titulo, subtitulo y "Volver") sobre el fondo oscuro */
header h1, header #tituloProceso { color: #ffffff !important; letter-spacing: -0.02em; }
header .sub, header #subtituloProceso { color: rgba(233,236,255,.72) !important; }
header a.back { color: #c4b5fd !important; }
header a.back:hover { color: #ffffff !important; }
#usuarioNombre { color: rgba(233,236,255,.72) !important; }
header button[onclick="logout()"] {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e9ecff !important;
  border-radius: var(--r-control) !important;
}
header button[onclick="logout()"]:hover { background: rgba(255,255,255,.14) !important; }

/* ---------- Aparicion suave de la pagina ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: fadeUp .35s ease both; }
@media (prefers-reduced-motion: reduce) { main { animation: none; } * { transition: none !important; } }

/* ---------- Superficies: tarjetas y contenedores ---------- */
.card, .panel, .resumen .card, .kpi-row .kpi, .modal-box, .modal-caja, .ph {
  border-radius: var(--r-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--sh-md);
}
.table-wrap, .tabla-scroll {
  border-radius: var(--r-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--sh-page);
  background: var(--surface) !important;
}

/* ---------- Tablas ---------- */
thead th {
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border-bottom-color: var(--border) !important;
}
tbody td { border-bottom-color: #f1f2f8 !important; }
tbody tr:hover, tbody tr:hover td { background: rgba(99,91,255,.04) !important; }
/* Celdas calculadas de la cotizacion: tono de marca suave */
thead th.calc { background: #efeeff !important; color: #4338ca !important; }
td.calc-cell { background: #f7f6ff !important; color: #3730a3 !important; }

/* ---------- Controles ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input:not([type]), select, textarea {
  border-radius: var(--r-control);
}
.toolbar input[type=text], .f-item input[type="text"], .f-item input[type="date"], .f-item select, .ms-btn, .fe-btn,
.card input, #buscador {
  border-color: var(--border) !important;
  border-radius: var(--r-control) !important;
  background: #fff !important;
  box-shadow: var(--sh-sm);
}
input:focus, select:focus, textarea:focus, .ms-btn:focus, .fe-btn:focus {
  outline: none !important;
  border-color: var(--brand-1) !important;
  box-shadow: var(--focus) !important;
}

/* ---------- Botones principales: degrade de marca ---------- */
.btn-primary:not([style*="background"]), .btn-abrir, .btn.btn-primary, .btn-login,
.card > form button[type="submit"], #btnIngresar {
  background: var(--grad-brand) !important;
  border: none !important;
  border-radius: var(--r-control) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(99,91,255,.28);
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:not([style*="background"]):hover, .btn-abrir:hover, .btn.btn-primary:hover, .btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(99,91,255,.34);
}
/* Botones con color propio (Exportar PDF, Marcar como cotizada): se respeta el color, se suaviza la forma */
.btn-primary[style*="background"] { border-radius: var(--r-control) !important; box-shadow: var(--sh-md); }
.btn-light, .btn-secondary, .btn-archivos, .btn-ghost {
  border-radius: var(--r-control) !important;
}
.btn-ghost { background: #efeeff !important; color: #4338ca !important; }
.btn-competencia { background: #efeeff !important; color: #5b21b6 !important; border-radius: 999px !important; }

/* ---------- Pastillas de estado: se mantienen los colores, forma mas prolija ---------- */
.estado-select, .badge, .res, .pos, .fe-op .pill, .chip {
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}

/* ---------- Analisis Historico ---------- */
.kpi { transition: transform .15s, box-shadow .15s; }
.kpi:hover { transform: translateY(-2px); }
.kpi::after { background: rgba(255,255,255,.13) !important; }
.kpi.indigo  { background: linear-gradient(135deg, #635bff, #8b5cf6) !important; box-shadow: 0 10px 24px rgba(99,91,255,.30) !important; }
.kpi.verde   { background: linear-gradient(135deg, #10b981, #14b8a6) !important; box-shadow: 0 10px 24px rgba(16,185,129,.28) !important; }
.kpi.celeste { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; box-shadow: 0 10px 24px rgba(59,130,246,.28) !important; }
.kpi.ambar   { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; box-shadow: 0 10px 24px rgba(245,158,11,.28) !important; }
.subtitulo { border-radius: 14px !important; }
.subtitulo::after { background: rgba(255,255,255,.13) !important; }
.subtitulo.verde { background: linear-gradient(135deg, #10b981, #14b8a6) !important; }
.subtitulo.ambar { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; }
.subtitulo.rojo  { background: linear-gradient(135deg, #f43f5e, #a855f7) !important; }
.subtitulo.azul  { background: linear-gradient(135deg, #0ea5e9, #635bff) !important; }
.cabecera-oscura { background: var(--menu-bg) !important; }
.cabecera-oscura svg { color: #c4b5fd !important; }
.chip { background: #e0e7ff !important; color: #4338ca !important; border: 1px solid #a5b4fc; }
.sel-oscuro.sel-pendiente { background: var(--grad-brand) !important; }

/* ---------- Chips de estado generales (como .ant-tag de M3Max) ---------- */
.res-gane  { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #86efac; box-shadow: none !important; }
.res-bien  { background: #e0e7ff !important; color: #4338ca !important; border: 1px solid #a5b4fc; box-shadow: none !important; }
.res-perdi { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fca5a5; box-shadow: none !important; }
.res-neutro{ background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0; box-shadow: none !important; }

/* ---------- Login e inicio ---------- */
body > .card, .login-card, .hero, .caja-inicio {
  border-radius: var(--r-page) !important;
  box-shadow: var(--sh-lg) !important;
  border-color: var(--border) !important;
}

/* ---------- Scrollbars finos ---------- */
* { scrollbar-width: thin; scrollbar-color: #c7cbe0 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7cbe0; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Proximas Aperturas: letra mas chica y compacta en la tabla para que no se corten
   el comitente, el N° de proceso, las observaciones ni el plazo ---------- */
body:has(#filtroEstados) tbody input,
body:has(#filtroEstados) tbody textarea,
body:has(#filtroEstados) .obs-preview {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: .74rem !important;
  letter-spacing: -0.01em;
}
/* Un poco mas de ancho para las columnas que se cortaban: N° Proceso (2), Comitente (6) y Plazo (9) */
body:has(#filtroEstados) thead th:nth-child(2) { width: 170px !important; min-width: 170px; }
body:has(#filtroEstados) thead th:nth-child(6) { width: 190px !important; min-width: 190px; }
body:has(#filtroEstados) thead th:nth-child(9) { width: 110px !important; min-width: 110px; }
body:has(#filtroEstados) thead th:nth-child(8) { width: 70px !important; min-width: 70px; }