/* Remate Interno Colliers — hoja de estilos única */
:root{
  --azul:#002B49; --azul-claro:#00558C; --celeste:#29ABE2;
  --texto:#1A2733; --texto-suave:#5A6B7B; --borde:#DFE6EC;
  --fondo:#F4F7FA; --blanco:#FFFFFF;
  --verde:#0F7B4F; --verde-bg:#E6F4EC;
  --ambar:#96590A; --ambar-bg:#FDF1DC;
  --rojo:#B3261E; --rojo-bg:#FCEBEA;
  --gris-bg:#EDF1F5;
  --cerrado-bg:#DCE4EC; --cerrado-borde:#B9C9D9;
  --disponible-bg:#DFF0E4; --disponible-borde:#A9D6BB;
  --sombra:0 1px 3px rgba(16,35,52,.08), 0 1px 2px rgba(16,35,52,.04);
  --radio:10px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2{margin:0 0 4px;line-height:1.25}
h1{font-size:24px;font-weight:650}
h2{font-size:17px;font-weight:600}
a{color:var(--azul-claro);text-decoration:none}
a:hover{text-decoration:underline}
small{font-size:.78em;font-weight:400;color:var(--texto-suave)}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.barra{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:var(--azul);color:#fff;padding:0 24px;height:60px;
}
.marca{display:flex;align-items:center;gap:11px;color:#fff;font-weight:600;font-size:15px}
.marca:hover{text-decoration:none}
.marca img{height:30px;width:auto;display:block}
.menu{display:flex;gap:4px;margin-right:auto}
.menu a{
  color:#C6D8E5;padding:7px 13px;border-radius:7px;font-size:14px;font-weight:500;
}
.menu a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.menu a.activo{background:rgba(255,255,255,.16);color:#fff}
.barra-derecha{display:flex;align-items:center;gap:16px;font-size:13px}
.reloj{
  background:rgba(41,171,226,.2);border:1px solid rgba(41,171,226,.45);
  color:#BFE7FA;padding:4px 11px;border-radius:20px;font-weight:600;white-space:nowrap;
}
.reloj.cerrado{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#D6E2EB}
.usuario{color:#C6D8E5;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salir{color:#8FB4CC;font-size:13px}
.salir:hover{color:#fff}

.contenido{max-width:1140px;margin:0 auto;padding:26px 20px 60px}
.pie{
  max-width:1140px;margin:0 auto;padding:20px;color:var(--texto-suave);
  font-size:13px;border-top:1px solid var(--borde);
}

.encabezado-pagina{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.bajada{margin:2px 0 0;color:var(--texto-suave);font-size:14px;max-width:640px}
.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:12px 18px;box-shadow:var(--sombra)}
.kpi strong{display:block;font-size:21px;color:var(--azul)}
.etiqueta{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.55px;color:var(--texto-suave);font-weight:600}

/* ── Filtros ────────────────────────────────────────────────────────────── */
.filtros{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  background:var(--blanco);border:1px solid var(--borde);border-radius:20px;
  padding:6px 15px;font-size:13px;color:var(--texto-suave);font-weight:500;
}
.chip:hover{border-color:var(--celeste);color:var(--azul);text-decoration:none}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}

/* ── Grilla de productos ────────────────────────────────────────────────── */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.carta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:17px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--sombra);
  transition:border-color .15s, box-shadow .15s;
}
.carta:hover{border-color:var(--celeste);box-shadow:0 4px 12px rgba(16,35,52,.1)}
.carta-cerrada{background:var(--cerrado-bg);border-color:var(--cerrado-borde)}
.carta-cerrada:hover{border-color:var(--cerrado-borde);box-shadow:var(--sombra)}
.carta-cerrada .carta-titulo,
.carta-cerrada .valor-ref,
.carta-cerrada .valor-alto{color:var(--texto-suave)}
.carta-cerrada .badge-adjudicado{background:#C7D5E2;color:#33475C}
.carta-cerrada .badge-adjudicado.sin-adjudicar{background:var(--ambar-bg);color:var(--ambar)}
.carta-disponible{background:var(--disponible-bg);border-color:var(--disponible-borde)}
.carta-disponible:hover{border-color:var(--disponible-borde);box-shadow:var(--sombra)}
.carta-top{display:flex;justify-content:space-between;align-items:center}
.codigo{font-size:11px;font-weight:700;color:var(--celeste);letter-spacing:.7px}
.codigo-min{font-size:11px;font-weight:700;color:var(--texto-suave);margin-right:5px}
.badge-stock{background:var(--gris-bg);color:var(--texto-suave);font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.carta-titulo{font-size:16px;font-weight:600;margin:0;line-height:1.3}
.carta-meta{margin:0;font-size:12.5px;color:var(--texto-suave)}
.carta-precios{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);margin-top:2px}
.precio-bloque.derecha{text-align:right}
.valor-ref{font-size:16px;font-weight:600;color:var(--texto)}
.valor-alto{font-size:16px;font-weight:700;color:var(--azul-claro)}
.carta-estado{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px;flex-wrap:wrap}
.ofertas-n{font-size:12.5px;color:var(--texto-suave)}

/* ── Pastillas ──────────────────────────────────────────────────────────── */
.pastilla{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.pastilla.verde{background:var(--verde-bg);color:var(--verde)}
.pastilla.ambar{background:var(--ambar-bg);color:var(--ambar)}
.pastilla.gris{background:var(--gris-bg);color:var(--texto-suave)}
.pastilla.mia{background:#E7F2FA;color:var(--azul-claro)}

/* ── Botones ────────────────────────────────────────────────────────────── */
.boton{
  display:inline-block;background:var(--azul);color:#fff;border:1px solid var(--azul);
  padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  text-align:center;font-family:inherit;transition:background .15s;
}
.boton:hover{background:var(--azul-claro);border-color:var(--azul-claro);color:#fff;text-decoration:none}
.boton.ancho{display:block;width:100%}
.boton.secundario{background:var(--blanco);color:var(--azul);border-color:var(--borde)}
.boton.secundario:hover{background:var(--gris-bg);color:var(--azul)}
.boton.peligro{background:var(--rojo);border-color:var(--rojo)}
.boton.peligro:hover{background:#8F1E17;border-color:#8F1E17}
.boton.chico{padding:6px 13px;font-size:13px}
.enlace-boton{background:none;border:none;color:var(--azul-claro);font-size:13px;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline}
.volver{display:inline-block;margin-bottom:14px;font-size:14px;color:var(--texto-suave)}

/* ── Paneles y detalle ──────────────────────────────────────────────────── */
.panel{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);margin-bottom:18px}
.detalle{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.panel-oferta{position:sticky;top:18px}
.nota{color:var(--texto-suave);font-size:14px;margin:10px 0 0}
.explicacion{background:#F0F7FC;border-left:3px solid var(--celeste);padding:11px 14px;border-radius:0 7px 7px 0;font-size:13.5px;color:var(--texto-suave);margin:16px 0 0}
.datos-clave{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--borde)}
.datos-clave strong{font-size:19px;color:var(--azul);font-weight:650}

/* ── Formularios ────────────────────────────────────────────────────────── */
.form-oferta label,.form-login label,.form-admin label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:var(--texto)}
.form-oferta input,.form-oferta select,.form-login input,.form-admin input,.form-admin select,.form-admin textarea{
  width:100%;padding:10px 13px;border:1px solid var(--borde);border-radius:8px;
  font-size:15px;font-family:inherit;color:var(--texto);background:var(--blanco);
}
.form-oferta input:focus,.form-login input:focus,.form-admin input:focus,.form-admin select:focus{
  outline:none;border-color:var(--celeste);box-shadow:0 0 0 3px rgba(41,171,226,.16);
}
.campo-monto{display:flex;align-items:center;border:1px solid var(--borde);border-radius:8px;background:var(--blanco);overflow:hidden}
.campo-monto:focus-within{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(41,171,226,.16)}
.campo-monto span{padding:0 4px 0 13px;color:var(--texto-suave);font-size:17px;font-weight:600}
.campo-monto input{border:none!important;box-shadow:none!important;font-size:20px;font-weight:650;padding-left:2px}
.total-linea{font-size:13.5px;color:var(--texto-suave);margin:14px 0}
.total-linea strong{color:var(--azul);font-size:16px}
.pie-nota{font-size:12.5px;color:var(--texto-suave);margin:12px 0 0;line-height:1.5}
.form-secundario{margin-top:14px;text-align:center}

.mi-estado{border-radius:8px;padding:13px 15px;margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.mi-estado.adjudica{background:var(--verde-bg);border-left:3px solid var(--verde)}
.mi-estado.parcial{background:var(--ambar-bg);border-left:3px solid var(--ambar)}
.mi-estado.fuera{background:var(--rojo-bg);border-left:3px solid var(--rojo)}
.mi-estado-titulo{font-weight:700;font-size:14.5px}
.mi-estado.adjudica .mi-estado-titulo{color:var(--verde)}
.mi-estado.parcial .mi-estado-titulo{color:var(--ambar)}
.mi-estado.fuera .mi-estado-titulo{color:var(--rojo)}
.mi-estado-detalle{font-size:13px;color:var(--texto-suave)}

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.tabla th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--texto-suave);padding:9px 10px;border-bottom:2px solid var(--borde);font-weight:700;
}
.tabla td{padding:11px 10px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla .num{text-align:right}
.tabla th.num{text-align:right}
.tabla .fecha{color:var(--texto-suave);font-size:12.5px;white-space:nowrap}
.fila-mia{background:#F2F9FD}
.tu{color:var(--celeste);font-weight:600;font-size:12px}
.tabla-scroll{overflow-x:auto}
.vacio{color:var(--texto-suave);font-size:14px;margin:10px 0 0}
.vacio-panel{text-align:center;padding:44px 22px}
.vacio-panel p{color:var(--texto-suave);margin:0 0 18px}

/* ── Mensajes ───────────────────────────────────────────────────────────── */
.mensaje{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:16px;border-left:3px solid}
.mensaje.ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde)}
.mensaje.error{background:var(--rojo-bg);color:var(--rojo);border-color:var(--rojo)}
.mensaje.aviso{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar)}

/* ── Login ──────────────────────────────────────────────────────────────── */
.pagina-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(160deg,#002B49 0%,#004A73 100%)}
.login-caja{background:var(--blanco);border-radius:14px;padding:38px 34px;width:100%;max-width:404px;box-shadow:0 12px 40px rgba(0,20,40,.28)}
.login-logo{height:52px;width:auto;margin-bottom:22px}
.login-caja h1{font-size:21px}
.login-sub{color:var(--texto-suave);font-size:14px;margin:4px 0 22px}
.campo-codigo{text-align:center;font-size:27px!important;letter-spacing:11px;font-weight:700;padding-left:11px!important}
.form-login .boton{margin-top:18px}

/* ── Página simple (instalador) ─────────────────────────────────────────── */
.pagina-simple{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.tarjeta-centrada{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:34px;max-width:520px;box-shadow:var(--sombra)}
.lista-check{list-style:none;padding:0;margin:16px 0;font-size:14px}
.lista-check li{padding:5px 0 5px 24px;position:relative;color:var(--texto-suave)}
.lista-check li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:700}
.resumen{background:var(--gris-bg);padding:12px 15px;border-radius:8px;font-size:14px}
.alerta-roja{background:var(--rojo-bg);color:var(--rojo);padding:12px 15px;border-radius:8px;font-size:13.5px}

/* ── Pestañas admin ─────────────────────────────────────────────────────── */
.tabs{display:flex;gap:5px;border-bottom:2px solid var(--borde);margin-bottom:20px;flex-wrap:wrap}
.tabs a{padding:10px 17px;font-size:14px;font-weight:600;color:var(--texto-suave);border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a:hover{color:var(--azul);text-decoration:none}
.tabs a.activo{color:var(--azul);border-bottom-color:var(--celeste)}
.rejilla-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}
.fila-acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.tarjetas-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:20px}
.tarjeta-kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra)}
.tarjeta-kpi strong{display:block;font-size:25px;color:var(--azul);font-weight:650;margin-top:3px}
.titulo-grupo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-suave);margin:26px 0 10px}
.titulo-grupo:first-of-type{margin-top:4px}
.panel-cerrado{background:var(--gris-bg);border-color:#D7E0E8}

/* ── Sección "Ya adjudicados" del catálogo ────────────────────────────────── */
.separador-seccion{margin:34px 0 16px;padding-top:22px;border-top:1px solid var(--borde)}
.separador-seccion h2{font-size:16px;color:var(--texto-suave);margin:0 0 3px;font-weight:650}
.separador-seccion p{margin:0}

@media (max-width:860px){
  .detalle{grid-template-columns:1fr}
  .panel-oferta{position:static}
  .barra{height:auto;padding:11px 16px;gap:11px}
  .menu{order:3;width:100%;margin-right:0}
  .barra-derecha{margin-left:auto}
  .contenido{padding:18px 14px 44px}
}

/* ── Botón de inicio de sesión con Microsoft ─────────────────────────────── */
.boton-microsoft{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;margin-top:8px;padding:13px 20px;
  background:var(--blanco);border:1px solid #8C8C8C;border-radius:8px;
  color:#5E5E5E;font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.boton-microsoft:hover{background:#F3F3F3;border-color:#5E5E5E;color:#3B3B3B;text-decoration:none}
.boton-microsoft svg{flex:none}

/* ── Aviso de retiro de los activos ──────────────────────────────────────── */
.aviso-retiro{
  background:#FFF8E6;border:1px solid #F0D9A0;border-left:4px solid #D9A441;
  border-radius:8px;padding:13px 17px;margin-bottom:18px;
  font-size:14px;color:#6B4E15;line-height:1.55;
}
.anonimo{color:var(--texto-suave);font-style:italic}

/* ── Vista de ofertas por producto (panel) ───────────────────────────────── */
.encabezado-oferta{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.encabezado-oferta h2{margin:3px 0 2px}
.resumen-plegable{
  cursor:pointer;font-size:17px;font-weight:600;color:var(--azul);
  list-style:none;padding:2px 0;user-select:none;
}
.resumen-plegable::-webkit-details-marker{display:none}
.resumen-plegable::before{content:"▸ ";color:var(--celeste);font-size:14px}
details[open] > .resumen-plegable::before{content:"▾ "}
.resumen-plegable:hover{color:var(--azul-claro)}

.badge-adjudicado{
  background:var(--verde-bg);color:var(--verde);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;letter-spacing:.2px;
}

/* ── Panel de adjudicación (quien se llevó el activo) ────────────────────── */
.panel-adjudicado{
  background:linear-gradient(180deg,#F0FAF4 0%,#E6F4EC 100%);
  border:1px solid #B9DFC9;border-left:4px solid var(--verde);
  border-radius:10px;padding:20px;
}
.adjudicado-titulo{display:block;font-size:18px;font-weight:700;color:var(--verde);margin-bottom:14px}
.adjudicado-cifras{display:flex;gap:26px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #C9E6D6}
.adjudicado-cifras strong{display:block;font-size:19px;color:var(--texto);font-weight:650;margin-top:2px}
.adjudicado-cifras strong.destacado{color:var(--verde);font-size:23px}
.adjudicado-instrucciones{margin-top:15px;font-size:14px;color:#2C4A38;line-height:1.6}
.instrucciones-titulo{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.55px;
  font-weight:700;color:var(--verde);margin-bottom:7px;
}