:root {
  --azul: #0b3d7e;
  --azul-osc: #072a58;
  --oro: #d9a21b;
  --fondo: #f4f6fa;
  --tarjeta: #ffffff;
  --texto: #1d2433;
  --suave: #5d6880;
  --borde: #dde2ec;
  --ok: #1e7f4f;
  --alerta: #b7791f;
  --peligro: #b42318;
  --radio: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--azul); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; color: var(--azul-osc); }
h3 { font-size: 1rem; margin: 0 0 .5rem; }

/* ---------- cabecera ---------- */
.cabecera { background: var(--azul-osc); color: #fff; border-bottom: 3px solid var(--oro); }
.cabecera .dentro { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .5rem 1rem; max-width: 1280px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.marca img { width: 34px; height: 34px; }
.marca span b { color: var(--oro); }
.cabecera nav { display: flex; gap: .25rem; flex-wrap: nowrap; flex: 1 1 auto; overflow-x: auto; }
.cabecera nav a { white-space: nowrap; }
@media (max-width: 1100px) { .cuenta span { display: none; } }
.cabecera nav a { color: #dbe4f3; text-decoration: none; padding: .35rem .65rem; border-radius: 6px; }
.cabecera nav a:hover, .cabecera nav a.activo { background: rgba(255,255,255,.12); color: #fff; }
.cuenta { font-size: .85rem; color: #c4d0e6; display: flex; gap: .75rem; align-items: center; margin-left: auto; white-space: nowrap; }
.cuenta a { color: #fff; }

main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sub { color: var(--suave); margin: 0; }

/* ---------- avisos ---------- */
.aviso { background: #e7f5ee; border: 1px solid #b5e0c8; color: var(--ok); padding: .6rem .9rem; border-radius: var(--radio); margin-bottom: 1rem; }
.error { background: #fdecea; border: 1px solid #f5c2bd; color: var(--peligro); padding: .6rem .9rem; border-radius: var(--radio); margin-bottom: 1rem; }
.nota { background: #fff8e6; border: 1px solid #f1dca4; padding: .6rem .9rem; border-radius: var(--radio); font-size: .9rem; }

/* ---------- tarjetas y rejillas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dos-col { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.kpi { font-size: 1.7rem; font-weight: 700; color: var(--azul); }
.kpi-etq { color: var(--suave); font-size: .85rem; }

/* ---------- tablas ---------- */
.tabla-caja { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: #eef2f8; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafd; }
td.num, th.num { text-align: right; white-space: nowrap; }
.vacio { color: var(--suave); text-align: center; padding: 1.5rem; }

/* ---------- etiquetas ---------- */
.etq { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; background: #e8edf6; color: var(--azul-osc); white-space: nowrap; }
.etq.basico { background: #e8edf6; }
.etq.avanzado { background: #dbe8ff; color: #123f8c; }
.etq.premium { background: #fbefcf; color: #7a5600; }
.etq.ok, .etq.adjudicada, .etq.cliente, .etq.activo { background: #e1f3e9; color: var(--ok); }
.etq.mal, .etq.desestimada, .etq.descartado, .etq.baja, .etq.revocada { background: #fde4e1; color: var(--peligro); }
.etq.aviso, .etq.pendiente, .etq.pausado { background: #fff1d6; color: var(--alerta); }
.plazo-rojo { color: var(--peligro); font-weight: 700; }
.plazo-ambar { color: var(--alerta); font-weight: 700; }

/* ---------- formularios ---------- */
form.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
form.filtros input, form.filtros select { width: auto; min-width: 160px; }
.campos { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo.ancho { grid-column: 1 / -1; }
label { font-size: .85rem; font-weight: 600; color: var(--suave); }
input, select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #c9d1df; border-radius: 6px;
  font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9ab8e6; border-color: var(--azul); }
textarea { min-height: 110px; resize: vertical; }
input[readonly], select:disabled, textarea[readonly] { background: #f1f3f7; }
.ayuda { font-size: .8rem; color: var(--suave); font-weight: 400; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem 1rem; margin: 0 0 1rem; background: var(--tarjeta); }
legend { font-weight: 700; color: var(--azul-osc); padding: 0 .4rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

.boton, button {
  display: inline-block; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--azul);
  background: var(--azul); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.boton:hover, button:hover { background: var(--azul-osc); }
.boton.sec { background: #fff; color: var(--azul); }
.boton.sec:hover { background: #eef2f8; }
.boton.oro { background: var(--oro); border-color: var(--oro); color: #241a00; }
.boton.peq { padding: .25rem .6rem; font-size: .85rem; }

/* ---------- ficha ---------- */
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.datos dt { color: var(--suave); font-size: .85rem; }
dl.datos dd { margin: 0; }
.historial { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.historial li { padding: .45rem 0; border-bottom: 1px dashed var(--borde); }
.historial small { color: var(--suave); display: block; }

/* ---------- pipeline ---------- */
.tablero { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.columna { background: #e9edf4; border-radius: var(--radio); padding: .6rem; min-height: 300px; }
.columna h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--azul-osc); display: flex; justify-content: space-between; }
.columna.encima { outline: 2px dashed var(--azul); background: #dfe7f5; }
.columna.bloqueada { opacity: .75; }
.ficha-lead { background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--azul); border-radius: 6px; padding: .5rem .6rem; margin-bottom: .5rem; font-size: .88rem; }
.ficha-lead[draggable="true"] { cursor: grab; }
.ficha-lead a { font-weight: 600; text-decoration: none; }
.ficha-lead .meta { color: var(--suave); font-size: .8rem; }
.ficha-lead.premium { border-left-color: var(--oro); }

/* ---------- acceso ---------- */
.acceso { max-width: 420px; margin: 8vh auto; padding: 0 1rem; }
.acceso .logo { text-align: center; margin-bottom: 1rem; }
.acceso .logo img { width: 84px; }
.acceso .logo div { font-weight: 800; font-size: 1.4rem; letter-spacing: .05em; color: var(--azul-osc); }
.acceso .logo div b { color: var(--oro); }

@media (max-width: 640px) {
  .cabecera .dentro { gap: .5rem 1rem; }
  .cabecera nav { order: 3; flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; }
  .cuenta { margin-left: auto; }
  .cuenta span { display: none; }
  .tablero { grid-template-columns: repeat(6, 80vw); }
}
@media print {
  .cabecera, .acciones, form.filtros { display: none; }
  body { background: #fff; }
}

/* ---------- documentos ---------- */
.subir-firmado { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.subir-firmado input[type=file] { width: auto; max-width: 220px; padding: .25rem; font-size: .8rem; }
.opciones-radio { display: flex; gap: .5rem; flex-wrap: wrap; }
.opciones-radio label { display: flex; align-items: center; gap: .4rem; border: 1px solid #c9d1df; border-radius: 6px; padding: .45rem .7rem; cursor: pointer; color: var(--texto); font-weight: 500; background: #fff; }
.opciones-radio input { width: auto; }
.opciones-radio label:has(input:checked) { border-color: var(--azul); background: #eef3fb; }
[hidden] { display: none !important; }

.casilla { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; color: var(--texto); font-weight: 500; }
.casilla input { width: auto; }

/* ---------- cobros ---------- */
.pestanas { display: flex; gap: .25rem; margin: 1.25rem 0 .75rem; border-bottom: 2px solid var(--borde); }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--suave); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.pestanas a.activa { color: var(--azul); border-bottom-color: var(--azul); }
.en-linea { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.en-linea input[type=date] { width: auto; padding: .2rem .3rem; font-size: .85rem; }
.acciones-fila { min-width: 190px; }
.acciones-fila > * { margin: 0 .15rem .25rem 0; vertical-align: top; }
details.cobrar { display: inline-block; }
details.cobrar summary { list-style: none; }
details.cobrar summary::-webkit-details-marker { display: none; }
details.cobrar[open] form { display: grid; gap: .45rem; margin-top: .4rem; padding: .7rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); min-width: 230px; white-space: normal; }
details.cobrar label { display: grid; gap: .15rem; }
details.cobrar label.casilla { display: flex; }
tfoot th { background: #eef2f8; }

.enlace-kpi { text-decoration: none; color: inherit; display: block; }
.enlace-kpi:hover { border-color: var(--azul); }

.cabecera nav { scrollbar-width: none; }
.cabecera nav::-webkit-scrollbar { display: none; }