/* ==========================================================================
   Comisiona · núcleo visual
   Tokens, base de elementos, cabecera, botones y pie. Escrita desde cero en
   Showroom 5 (10 oct 2026) con nombres y medidas propias; reemplaza a la hoja
   heredada. La cargan base.html y base_agente.html antes que las demás:
   ui.css (Diseño 2.0) y la hoja de cada zona van encima.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Tipografía (Showroom 2): Newsreader en títulos; Hanken Grotesk en texto, interfaz y cifras. */
  --fuente-titulo:"Newsreader", Georgia, "Times New Roman", serif;
  --fuente-ui:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fuente-num:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Paleta de la marca (DEMO-BRIEF §5). */
  --cb-turquesa:#00989E;
  --cb-turquesa-oscuro:#007A80;
  --cb-morado:#24234A;
  --cb-dorado:#D4AF37;
  --cb-blanco:#FFFFFF;
  --cb-fondo-suave:#F5F5F1;
  --cb-gris-borde:#CFD8DC;
  --cb-charcoal:#263238;

  /* Roles. La web de cada agente redefine --marca* y --noche* con sus dos colores. */
  --fondo:#FFFFFF;
  --fondo-suave:#F5F5F1;
  --superficie:#FFFFFF;
  --texto:#263238;
  --texto-suave:#5F6E75;
  --linea:rgba(38,50,56,.10);
  --marca:#00989E;          /* fondos, íconos y acentos sobre oscuro */
  --marca-texto:#007A80;    /* texto y enlaces sobre blanco (5,1:1) */
  --marca-claro:#33ADB2;    /* el tramo claro de los degradados */
  --marca-suave:#E6F4F5;    /* tintes de fondo */
  --noche:#24234A;
  --noche-suave:#34325F;
  --noche-oscura:#24234A;
  --noche-profunda:#1B1A38;
  --sombra:0 16px 52px rgba(36,35,74,.085);
  --sombra-fuerte:0 24px 72px rgba(36,35,74,.13);
  --radio:22px;
  --wa:#25D366;
  --wa-oscuro:#128C7E;

  /* La cabecera: el tamaño del logotipo y su alto (las páginas se despegan con .bajo-cabecera). */
  --logo-tam:27px;
  --cabecera-h:102px;
}

/* ---------- Base ---------- */
*, *::before, *::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;      /* sin letras infladas al girar el teléfono */
  -webkit-tap-highlight-color:rgba(0,152,158,.16);           /* el toque, en el color de la marca */
}
@supports (color: color-mix(in srgb, red 50%, blue)){
  html{-webkit-tap-highlight-color:color-mix(in srgb, var(--cb-turquesa) 18%, transparent)}
}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--fuente-ui);
  line-height:1.5;
  color:var(--texto);
  background:var(--fondo);
  /* viewport-fit=cover: con el teléfono de lado, nada queda bajo la muesca. */
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
}
a{color:inherit; text-decoration:none}
img, video{display:block; max-width:100%}
h1, h2, h3, h4{font-family:var(--fuente-titulo); font-weight:600; color:var(--texto)}
/* Showroom 3: sin esto, Safari dibuja botones y campos con la fuente del sistema. */
button, input, select, textarea{font-family:inherit}

/* El ancho de toda la web: fluido, con tope de 1440 px y margen que crece con la ventana. */
.container{
  width:min(1440px, calc(100% - 2 * clamp(16px, 3vw, 40px)));
  margin-inline:auto;
}

/* ---------- Cabecera ---------- */
.cabecera{
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:var(--superficie);
  border-bottom:1px solid rgba(21,20,44,.08);
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
}
.cabecera-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding-block:22px;
}
.marca-portal{
  display:flex;
  flex-direction:column;
  min-width:158px;
  margin-right:8px;
  line-height:1;
}
/* ---------- Logotipo (Showroom 5, _logotipo.html) ---------- */
/* Isotipo dorado + el nombre en Hanken Grotesk 700 + el lema espaciado. Todo en em: el tamaño lo da
   --logo-tam (o el font-size de quien lo contiene). Sobre fondo claro, el dorado va más hondo y el
   nombre en la noche de la marca. */
.logo{
  display:inline-flex;
  align-items:center;
  gap:.32em;
  font-size:var(--logo-tam);
  line-height:1;
  white-space:nowrap;
  color:var(--cb-morado);
}
.logo-iso{flex:none; display:block; width:1.21em; height:1.42em; color:#B48D24}
.logo-texto{display:flex; flex-direction:column; gap:.2em; min-width:0}
.logo-nombre{font-family:var(--fuente-ui); font-size:1em; font-weight:700; letter-spacing:-.018em}
.logo-lema{
  padding-left:.06em;
  font-family:var(--fuente-ui);
  font-size:max(.33em, 9.5px);
  font-weight:600;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#5F6E75;
}
/* 2 nov (Roberto): la primera mitad del nombre («Co») en el dorado del isotipo, en cada fondo. */
.logo .logotipo-a{color:#B48D24}
.logo .logotipo-b{color:var(--cb-morado)}
.logo.sobre-oscuro{color:#fff}
.logo.sobre-oscuro .logo-iso{color:var(--cb-dorado)}
.logo.sobre-oscuro .logo-lema{color:rgba(255,255,255,.72)}
.logo.sobre-oscuro .logotipo-a{color:var(--cb-dorado)}
.logo.sobre-oscuro .logotipo-b{color:#fff}
/* Dentro de una línea de texto (Powered by): del tamaño del texto, sin lema. */
.logo.en-linea{gap:.26em; font-size:1.08em; vertical-align:-.22em; color:inherit}
.logo.en-linea .logo-iso{width:.98em; height:1.15em; color:var(--cb-dorado)}
.logo.en-linea .logotipo-a{color:var(--cb-dorado)}
.menu-principal{
  display:flex;
  gap:22px;
  font-size:14px;
  font-weight:500;
  color:#2b2b30;
}
.menu-principal a{position:relative; padding-block:6px; opacity:.92}
@media (hover: hover){ .menu-principal a:hover{opacity:1} }
.menu-principal a.active{font-weight:600; color:var(--noche)}

/* El botón de la cabecera (Publicar, Ingreso de agentes): una píldora con tinte de la marca. */
.boton-cabecera{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(0,152,158,.34);
  background:linear-gradient(140deg, rgba(0,152,158,.17), rgba(0,152,158,.06));
  color:var(--noche);
  font-weight:600;
  white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
@media (hover: hover){
  .boton-cabecera:hover{
    transform:translateY(-1px);
    border-color:rgba(0,152,158,.58);
    background:linear-gradient(140deg, rgba(0,152,158,.27), rgba(0,152,158,.13));
  }
}

/* El ☰ del celular: tres barras. */
.menu-abrir{
  display:none;
  padding:8px 10px;
  border:1px solid rgba(21,20,44,.09);
  border-radius:10px;
  background:none;
  cursor:pointer;
}
.menu-abrir span{
  display:block;
  width:22px;
  height:2px;
  margin-block:4px;
  border-radius:2px;
  background:#1f1f24;
  transition:opacity .2s ease, transform .25s ease;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid rgba(21,20,44,.09);
  background:var(--superficie);
  box-shadow:0 8px 22px rgba(21,20,44,.045);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover){ .btn:hover{transform:translateY(-1px)} }
.btn.primary{
  border:0;
  color:#fff;
  background:linear-gradient(140deg, var(--marca-texto), var(--marca));
  box-shadow:0 12px 32px rgba(0,152,158,.23);
}
.btn.noche{border-color:var(--noche-oscura); background:var(--noche-oscura); color:#fff}
@media (hover: hover){ .btn.noche:hover{background:#1c1b33} }

/* ---------- Secciones ---------- */
/* La página común del panel y de lo legal: un velo de blanco a gris tibio hacia abajo. */
.seccion{
  padding:24px 0 90px;
  background:linear-gradient(180deg, #fff 8%, #fafaf9 32%, #f6f6f4 100%);
}
/* Despega el contenido de la cabecera fija (va después de .seccion: con igual peso, manda la última). */
.bajo-cabecera{padding-top:calc(var(--cabecera-h) + 34px)}

/* ---------- Pie ---------- */
.pie-sitio{
  padding:72px 0 28px;
  background:#001e47;
  color:#cfd2d6;
}
.pie-grilla{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pie-marca .logo{font-size:30px}
.pie-marca p{
  max-width:320px;
  margin:18px 0 22px;
  font-size:14px;
  line-height:1.7;
  color:#9ba1a8;
}
.pie-columna h4{
  margin:0 0 18px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--marca);
}
.pie-columna a{font-size:14px; color:#c0c2c6; transition:color .2s ease}
@media (hover: hover){ .pie-columna a:hover{color:var(--marca)} }
.pie-final{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:24px;
  font-size:12.5px;
  color:#878c95;
}
.pie-final a{color:#878c95}
@media (hover: hover){ .pie-final a:hover{color:var(--marca)} }

/* ---------- Anchos ---------- */
/* 2 nov (Roberto, medido en su PC): con el logotipo del tamaño de escritorio (desde 641 px; en el celular se achica),
   el lema calza mejor bajo «CoBroker» un poco más junto y 2 px a la derecha. */
@media (min-width: 641px){
  .logo.sobre-oscuro .logo-lema{margin-left:2px; letter-spacing:1.93pt}
}
@media (max-width: 960px){
  /* El menú del panel y el público bajan a una lista bajo la cabecera, que abre el ☰. */
  .menu-principal{
    position:absolute;
    inset:100% 0 auto;
    display:none;
    flex-direction:column;
    gap:0;
    padding-block:8px;
    border-top:1px solid rgba(21,20,44,.06);
    background:var(--superficie);
  }
  .menu-principal.is-open{display:flex}
  .menu-principal a{padding:14px 20px; border-bottom:1px solid rgba(21,20,44,.04)}
  .menu-abrir{display:block}
  .pie-grilla{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width: 640px){
  :root{--logo-tam:24px; --cabecera-h:92px}
  .cabecera-fila{gap:12px; padding-block:16px}
  .marca-portal{min-width:0}
  .boton-cabecera{padding:10px 14px; font-size:13px}
  .pie-sitio{margin-top:0; padding:56px 0 24px}
  .pie-grilla{grid-template-columns:1fr}
  .pie-final{flex-direction:column; align-items:start; row-gap:8px}
}

/* ---------- El celular como app nativa (Showroom 3, probado en WebKit) ---------- */
/* M1: Safari del iPhone amplía la página al tocar un campo de menos de 16 px. En pantallas táctiles
   (y angostas) todo campo va a 16 px. Nunca con maximum-scale ni user-scalable=no: rompe el zoom. */
@media (pointer: coarse), (max-width: 760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
  select, textarea{font-size:16px !important}
}
.web-agente-top{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
/* M6 y A9: con un modal abierto el fondo queda quieto y el WhatsApp fijo se esconde (cobroker.js). */
html.modal-abierto, html.modal-abierto body{overflow:hidden}
html.modal-abierto .ui-wa-fija{display:none !important}
dialog, .visor, .legal-caja{overscroll-behavior:contain}
/* A7: zonas tocables de al menos 44 px (la guía de Apple). Los enlaces chicos dentro de una línea de
   texto agrandan solo su zona, con un ::before transparente, sin mover el diseño. */
@media (pointer: coarse), (max-width: 760px){
  .cabecera .marca-portal, .cabecera .boton-cabecera, .menu-abrir, .wa-menu, .btn, .tarjeta-editar, .foto-mover,
  .ui-filtro-estado, .sel-vista button, button.ui-chip[data-centrar], .visor-cerrar, .visor-paso, .visor-pestanas button,
  .simulador-cerrar, .legal-cerrar, .galeria-todas, [data-cerrar-dialogo], .cabecera .menu-usuario-lista a,
  .wa-nav a{min-height:44px}
  .menu-abrir, .wa-menu, .foto-mover, .visor-cerrar, .visor-paso, .simulador-cerrar, .legal-cerrar,
  [data-cerrar-dialogo]{min-width:44px}
  .cabecera .marca-portal{justify-content:center}
  .ui-embudo-lead > summary, .ui-corregir > summary, .ui-caso-notas > summary{padding-block:12px}
  .ver-detalle, .ui-enlace-icono, a.accion, a.ui-numero, .leer-mas{position:relative}
  .ver-detalle::before, .ui-enlace-icono::before, a.accion::before, a.ui-numero::before,
  .leer-mas::before{content:""; position:absolute; inset:-12px -4px}
  /* Con el teclado abierto (cobroker.js), la barra de abajo y el WhatsApp fijo no tapan la caja de texto. */
  html.escribiendo .barra-movil, html.escribiendo .ui-wa-fija{display:none !important}
}
/* A 320 px (iPhone SE de 1.ª generación o «Zoom de pantalla»): nada se sale por los costados. */
@media (max-width: 640px){ .grilla{grid-template-columns:minmax(0, 1fr)} }
@media (max-width: 960px){ .ficha-columnas{grid-template-columns:minmax(0, 1fr)} }
@media (max-width: 360px){
  :root{--logo-tam:21px}
  .cabecera .marca-portal{min-width:0}
  .cabecera .cabecera-fila{gap:8px}
  .cabecera .boton-cabecera:not(.boton-publicar){padding:8px 10px; font-size:12.5px}
}

/* Showroom 5.1: el avatar único (ui.avatar) también donde no carga ui.css (la web de la agente):
   un círculo con la foto de Mi perfil recortada o la inicial. ui.css le suma el anillo del panel. */
.avatar{display:inline-grid; place-items:center; inline-size:36px; block-size:36px; border-radius:50%; flex:none; font-weight:700; line-height:1}
.avatar.con-foto{overflow:hidden}
.avatar img{inline-size:100%; block-size:100%; object-fit:cover; display:block; border-radius:inherit}