/* =============================================================================
   Sistema visual.
   SaaS moderno: fondo gris muy claro, tarjetas blancas redondeadas, verde como
   color de accion, iconos de linea y mucho aire.

   Los nombres de clase se mantienen estables a proposito: la logica del panel
   depende de ellos, y cambiar la estetica no deberia obligar a tocar el JS.
   ========================================================================== */

:root {
  /* Superficies */
  --fondo:        #f8fafc;
  --blanco:       #ffffff;
  --sutil:        #f1f5f9;
  --sutil-2:      #f8fafc;

  /* Bordes */
  --linea:        #e2e8f0;
  --linea-2:      #eef2f6;

  /* Texto */
  --texto:        #0f172a;
  --medio:        #475569;
  --tenue:        #64748b;
  --tenue-2:      #94a3b8;

  /* Accion. --acento lo pisa la marca de cada organizacion. */
  --acento:       #0f7b4f;
  --acento-osc:   #0b6340;
  --acento-suave: #ecfdf5;
  --acento-texto: #047857;

  /* Estados */
  --ok:           #15803d;
  --ok-suave:     #dcfce7;
  --alerta:       #dc2626;
  --alerta-suave: #fef2f2;
  --aviso:        #b45309;
  --aviso-suave:  #fffbeb;
  --dato:         #2563eb;
  --dato-suave:   #eff6ff;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04);
  --sombra-md: 0 4px 12px rgba(15, 23, 42, .06);

  --nav-ancho: 232px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* Gana sobre cualquier regla de display, sin importar el orden en la hoja. */
.oculto { display: none !important; }

/* --- Tipografia ----------------------------------------------------------- */

.titulo    { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.subtitulo { font-size: 1rem;   font-weight: 600; letter-spacing: -.01em; }

/* Etiqueta de apoyo: gris, chica, sin versalita forzada. */
.eti {
  font-size: .72rem;
  font-weight: 500;
  color: var(--tenue);
  letter-spacing: 0;
  text-transform: none;
}
/* Encabezado de seccion en la navegacion y sobre las metricas. */
.eti-lg {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue-2);
}
.mono  { font-family: var(--mono); font-size: .82rem; }
.tenue { color: var(--tenue); }
.medio { color: var(--medio); }
.num   { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Iconos --------------------------------------------------------------- */

.ico {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 22px; height: 22px; }

/* --- Estructura ----------------------------------------------------------- */

.marco { display: grid; grid-template-columns: var(--nav-ancho) 1fr; min-height: 100vh; }
@media (max-width: 940px) { .marco { grid-template-columns: 1fr; } }

.lateral {
  background: var(--blanco);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
@media (max-width: 940px) {
  .lateral { position: static; height: auto; border-right: none;
             border-bottom: 1px solid var(--linea); }
}

.lateral__marca {
  padding: 1.1rem 1.15rem; display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--linea-2);
}
.lateral__marca .escudo {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  background: var(--acento); color: #fff; display: grid; place-items: center;
}
.lateral__marca b { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; display: block; }
.lateral__marca img { height: 26px; max-width: 120px; object-fit: contain; }

.lateral__org { padding: .8rem 1.15rem; border-bottom: 1px solid var(--linea-2); }
.lateral__org strong { display: block; font-weight: 600; font-size: .88rem; margin-top: .1rem; }

.lateral__grupo { padding: .9rem .6rem .1rem; }
.lateral__grupo > .eti-lg { padding: 0 .55rem .45rem; display: block; }

.nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .55rem; margin-bottom: 2px; width: 100%;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); text-align: left;
  font-family: var(--sans); font-size: .875rem; font-weight: 500;
  color: var(--medio);
}
.nav-item:hover { background: var(--sutil); color: var(--texto); }
.nav-item.activo { background: var(--acento-suave); color: var(--acento-texto); font-weight: 600; }
.nav-item .cuenta {
  margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--tenue-2);
  background: var(--sutil); border-radius: 99px; padding: .05rem .4rem;
}
.nav-item.activo .cuenta { background: #fff; color: var(--acento-texto); }
/* Sin numero no hay pastilla: si no, queda un punto gris sin significado. */
.nav-item .cuenta:empty { display: none; }

.lateral__pie { margin-top: auto; padding: .6rem; border-top: 1px solid var(--linea-2); }
.lateral__conmutador {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .6rem .55rem; border: 1px solid var(--linea); background: var(--blanco);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--medio);
}
.lateral__conmutador:hover { background: var(--sutil); color: var(--texto); }
.lateral__conmutador .crece { text-align: left; }

/* --- Barra superior -------------------------------------------------------- */

.contenido { min-width: 0; display: flex; flex-direction: column; }

.barra {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1.6rem; background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.barra__contexto { font-size: .72rem; font-weight: 600; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--tenue-2); }

.estado-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .6rem; border-radius: 99px;
  background: var(--ok-suave); color: var(--ok);
  font-size: .75rem; font-weight: 600;
}
.estado-pill i { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.estado-pill.malo { background: var(--alerta-suave); color: var(--alerta); }

.usuario-menu { display: flex; align-items: center; gap: .55rem; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 99px;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}
.usuario-menu small { display: block; color: var(--tenue); font-size: .72rem; }
.usuario-menu strong { display: block; font-size: .82rem; font-weight: 600; }

.cabecera { padding: 1.4rem 1.6rem .2rem; }
.cabecera__acciones { display: flex; align-items: center; gap: .6rem; }
.cabecera .entre { align-items: flex-start; }
.cabecera p { color: var(--tenue); font-size: .875rem; margin-top: .25rem; }

.vista { padding: 1.2rem 1.6rem 3rem; }
@media (max-width: 620px) {
  .vista, .cabecera, .barra { padding-left: 1rem; padding-right: 1rem; }
}

/* --- Tarjetas -------------------------------------------------------------- */

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
}
.tarjeta__cab {
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--linea-2);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.tarjeta__cab .eti { font-weight: 600; color: var(--texto); font-size: .9rem; }
.tarjeta__cuerpo { padding: 1.15rem; }

.rejilla { display: grid; gap: 1rem; }
.rejilla--metricas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla--2 { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1040px) { .rejilla--2 { grid-template-columns: 1fr; } }

.metrica {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 1.1rem 1.15rem;
}
.metrica .eti { font-size: .7rem; font-weight: 600; letter-spacing: .04em;
                text-transform: uppercase; color: var(--tenue); }
.metrica strong {
  display: block; margin-top: .45rem;
  font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.metrica .delta { font-size: .78rem; color: var(--tenue); }

/* --- Distintivos ----------------------------------------------------------- */

.dist {
  display: inline-flex; align-items: center;
  font-size: .74rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 99px; white-space: nowrap;
  background: var(--sutil); color: var(--medio);
}
.dist--ok     { background: var(--ok-suave);     color: var(--ok); }
.dist--aviso  { background: var(--aviso-suave);  color: var(--aviso); }
.dist--alerta { background: var(--alerta-suave); color: var(--alerta); }
.dist--dato   { background: var(--dato-suave);   color: var(--dato); }

/* --- Tablas ---------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th {
  text-align: left; padding: .7rem 1.15rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tenue);
  background: var(--sutil-2); border-bottom: 1px solid var(--linea-2);
}
.tabla td { padding: .85rem 1.15rem; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--sutil-2); }
.tabla .der { text-align: right; }

/* --- Controles ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  padding: .6rem 1rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  transition: background .12s ease;
}
.btn:hover { background: var(--acento-osc); border-color: var(--acento-osc); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--claro {
  background: var(--blanco); color: var(--medio); border-color: var(--linea);
}
.btn--claro:hover { background: var(--sutil); color: var(--texto); }
.btn--peligro {
  background: var(--alerta); border-color: var(--alerta); color: #fff;
}
.btn--peligro:hover { background: #b91c1c; border-color: #b91c1c; }
.btn--chico { padding: .4rem .7rem; font-size: .78rem; }

.campo { margin-bottom: 1rem; }
.campo > label { display: block; margin-bottom: .35rem; font-size: .82rem;
                 font-weight: 600; color: var(--texto); }

input, select, textarea {
  width: 100%; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-sm); padding: .6rem .75rem;
  font-family: var(--sans); font-size: .875rem; color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--tenue-2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 12%, transparent);
}
input[type="color"] { padding: 3px; height: 38px; }

.fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.fila > input, .fila > select { width: auto; }

/* --- Avisos ---------------------------------------------------------------- */

#aviso {
  display: none; padding: .8rem 1rem; margin-bottom: 1rem;
  border-radius: var(--r-sm); font-size: .875rem; border: 1px solid;
}
#aviso.ok  { display: block; background: var(--ok-suave);     border-color: #bbf7d0; color: var(--ok); }
#aviso.err { display: block; background: var(--alerta-suave); border-color: #fecaca; color: var(--alerta); }

.vacio {
  padding: 2.5rem 1.15rem; text-align: center; color: var(--tenue); font-size: .875rem;
}
.vacio .ico { width: 30px; height: 30px; color: var(--tenue-2); margin-bottom: .6rem; }

/* --- Barras y graficos ----------------------------------------------------- */

.barra-prog { height: 6px; background: var(--sutil); border-radius: 99px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.barra-prog i.lleno { background: var(--alerta); }

.grafico { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.grafico__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                gap: 2px; min-width: 0; }
.grafico__col i { display: block; background: var(--acento); border-radius: 3px 3px 0 0; }
.grafico__col i.sec { background: var(--tenue-2); }
.grafico__pie { display: flex; gap: 4px; margin-top: .5rem; }
.grafico__pie span { flex: 1; text-align: center; font-size: .68rem; color: var(--tenue-2); }

.leyenda { display: flex; gap: .9rem; }
.leyenda span { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--tenue); }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; background: var(--acento); }
.leyenda i.sec { background: var(--tenue-2); }

/* --- Inbox ----------------------------------------------------------------- */

.inbox { display: grid; grid-template-columns: 290px 1fr 250px; gap: 1rem; align-items: start; }
@media (max-width: 1200px) { .inbox { grid-template-columns: 260px 1fr; } .inbox__ficha { display: none; } }
@media (max-width: 820px)  { .inbox { grid-template-columns: 1fr; } }

/*
  La lista de conversaciones tiene su propio scroll, con la altura de la
  columna del chat.

  El truco es `contain: size`: le dice al navegador que el contenido de la lista
  no cuenta para calcular su tamano. Asi la fila de la grilla la define el chat
  —que tiene altura fija—, la tarjeta de la lista se estira hasta ahi, y lo que
  sobra scrollea adentro. Sin eso, 600 conversaciones hacian la fila de 600
  conversaciones de alto y la pagina no terminaba nunca.
*/
.inbox__lista { display: flex; flex-direction: column; align-self: stretch; }
.inbox__scroll { flex: 1 1 0; min-height: 240px; overflow-y: auto; contain: size; }
/* En una sola columna no hay chat al lado que marque la altura: se le pone una. */
@media (max-width: 820px) {
  .inbox__scroll { flex: none; contain: none; max-height: 60vh; }
}

.conv { padding: .8rem 1.15rem; cursor: pointer; border-bottom: 1px solid var(--linea-2); }
.conv:hover { background: var(--sutil-2); }
.conv.sel { background: var(--acento-suave); }
.conv__cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.conv__cab strong { font-weight: 600; font-size: .875rem; }
.conv__prev { color: var(--tenue); font-size: .8rem; margin-top: .15rem;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__meta { font-size: .7rem; color: var(--tenue-2); margin-top: .3rem; }
.conv__sin {
  font-size: .68rem; font-weight: 700; background: var(--acento); color: #fff;
  border-radius: 99px; padding: .05rem .38rem;
}

.hilo { height: min(56vh, 470px); overflow-y: auto; padding: 1.15rem;
        display: flex; flex-direction: column; gap: .6rem; background: var(--sutil-2); }
.msj { max-width: 74%; padding: .6rem .8rem; font-size: .875rem; line-height: 1.5;
       border-radius: var(--r); box-shadow: var(--sombra); }
.msj--sal { align-self: flex-end; background: var(--acento-suave); border: 1px solid #bbf7d0;
            border-bottom-right-radius: 4px; }
.msj--ent { align-self: flex-start; background: var(--blanco); border: 1px solid var(--linea);
            border-bottom-left-radius: 4px; }
.msj small { display: block; margin-top: .3rem; font-size: .68rem; color: var(--tenue-2); }

.responder { display: flex; gap: .6rem; padding: .9rem 1.15rem; border-top: 1px solid var(--linea-2); }

.ficha__dato { padding: .8rem 1.15rem; border-bottom: 1px solid var(--linea-2); }
.ficha__dato:last-child { border-bottom: none; }
.ficha__dato > span:first-child { display: block; margin-bottom: .2rem; }

/* --- Sesiones -------------------------------------------------------------- */

.sesiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.sesion__num { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-top: .3rem;
               font-variant-numeric: tabular-nums; }
.sesion__datos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea-2); }
.sesion__dato { padding: .8rem 1.15rem; border-right: 1px solid var(--linea-2); }
.sesion__dato:nth-child(2n) { border-right: none; }
.sesion__dato strong { display: block; margin-top: .2rem; font-size: .95rem; font-weight: 600; }
.sesion__acciones { display: flex; gap: .5rem; padding: .9rem 1.15rem; border-top: 1px solid var(--linea-2); }

.slot { border-style: dashed; background: var(--sutil-2); box-shadow: none; }
.slot__qr {
  aspect-ratio: 1; max-width: 200px; margin: 0 auto; display: grid; place-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  color: var(--tenue-2); overflow: hidden;
}
.slot__qr img { width: 100%; height: 100%; object-fit: contain; }

/* --- Acceso ---------------------------------------------------------------- */

.acceso {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto;
  background: var(--fondo); display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1rem;
}
.acceso__caja { width: 100%; max-width: 26rem; }
.acceso__titulo { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
                  text-align: center; line-height: 1.2; }
.acceso__bajada { text-align: center; color: var(--tenue); margin-top: .6rem; font-size: .95rem; }
.acceso__tarjeta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra-md); padding: 1.4rem; margin-top: 1.6rem;
}
.acceso__pestanas {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  background: var(--sutil); border-radius: var(--r-sm); padding: .25rem; margin-bottom: 1.3rem;
}
.acceso__pestana {
  border: 0; background: none; border-radius: 6px; cursor: pointer;
  padding: .5rem; font-family: var(--sans); font-size: .85rem; font-weight: 600;
  color: var(--tenue);
}
.acceso__pestana.activa { background: var(--blanco); color: var(--acento-texto); box-shadow: var(--sombra); }
.acceso__error { margin-top: .8rem; font-size: .85rem; color: var(--alerta); min-height: 1.2em; text-align: center; }
.acceso__pie { margin-top: 1.1rem; text-align: center; font-size: .82rem; color: var(--tenue); }
.acceso__pie a { color: var(--acento-texto); font-weight: 600; text-decoration: none; }
.acceso__cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.6rem;
}
.acceso__cifra {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  padding: .75rem; text-align: center;
}
.acceso__cifra span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
                      text-transform: uppercase; color: var(--tenue-2); }
.acceso__cifra strong { font-size: 1.1rem; font-weight: 700; }

/* Campo con icono adentro, como en el diseño de referencia. */
.campo--ico { position: relative; }
.campo--ico .ico { position: absolute; left: .7rem; top: 2.1rem; color: var(--tenue-2); }
.campo--ico input { padding-left: 2.35rem; }

/* --- Utilidades ------------------------------------------------------------ */

.pila { display: grid; gap: 1rem; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.crece { flex: 1; min-width: 0; }
.secreto {
  font-family: var(--mono); font-size: .78rem; word-break: break-all;
  background: var(--sutil); border: 1px dashed var(--linea); border-radius: var(--r-sm);
  padding: .8rem; margin-top: .7rem;
}

/* --- Documento (Novedades) -------------------------------------------------- */

.doc { max-width: 68ch; line-height: 1.7; }
.doc h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
.doc h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento-texto); margin: 2.2rem 0 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea-2);
}
.doc h3 { font-size: 1.02rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.doc p  { margin-bottom: .85rem; color: var(--medio); }
.doc ul { margin: 0 0 1rem 1.15rem; }
.doc li { margin-bottom: .5rem; color: var(--medio); }
.doc strong { font-weight: 600; color: var(--texto); }
.doc code {
  font-family: var(--mono); font-size: .84em;
  background: var(--sutil); border-radius: 5px; padding: .1rem .35rem;
}
.doc blockquote {
  border-left: 3px solid var(--acento); background: var(--acento-suave);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .8rem 1rem; margin: 0 0 1rem; color: var(--medio);
}
.doc hr { border: none; border-top: 1px solid var(--linea); margin: 2.2rem 0; }

/* --- Documentacion de la API ------------------------------------------------ */

.endpoint { padding: .9rem 1.15rem; border-bottom: 1px solid var(--linea-2); }
.endpoint:last-child { border-bottom: none; }
.endpoint:hover { background: var(--sutil-2); }
.endpoint__cab { display: flex; align-items: center; gap: .6rem; }
.endpoint__cab .mono { font-size: .85rem; font-weight: 600; }
.endpoint__txt { color: var(--medio); font-size: .85rem; margin-top: .4rem; }
.endpoint__campos {
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; margin-top: .45rem;
}
.endpoint__campos .eti { min-width: 4.5rem; }
.endpoint__campos code {
  font-family: var(--mono); font-size: .74rem;
  background: var(--sutil); border: 1px solid var(--linea-2);
  border-radius: 5px; padding: .1rem .4rem; color: var(--medio);
}

.metodo {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  padding: .18rem .4rem; border-radius: 5px; min-width: 3.6rem; text-align: center;
  background: var(--sutil); color: var(--medio);
}
.metodo--get    { background: var(--dato-suave);   color: var(--dato); }
.metodo--post   { background: var(--ok-suave);     color: var(--ok); }
.metodo--put    { background: var(--aviso-suave);  color: var(--aviso); }
.metodo--delete { background: var(--alerta-suave); color: var(--alerta); }

/* Codigo dentro de un parrafo suelto, fuera de .doc y de la lista de endpoints. */
p code {
  font-family: var(--mono); font-size: .84em;
  background: var(--sutil); border: 1px solid var(--linea-2);
  border-radius: 5px; padding: .05rem .3rem;
}

/* --- Campanita y avisos ----------------------------------------------------- */

.campana {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--linea); background: var(--blanco);
  border-radius: var(--r-sm); cursor: pointer; color: var(--tenue);
}
.campana:hover { background: var(--sutil); color: var(--texto); }
.campana--activa { color: var(--alerta); border-color: #fecaca; background: var(--alerta-suave); }
.campana__n {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--alerta); color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 17px; text-align: center;
}

.aviso { padding: .9rem 1.15rem; border-bottom: 1px solid var(--linea-2); }
.aviso:last-child { border-bottom: none; }
.aviso--nuevo { background: var(--sutil-2); border-left: 3px solid var(--alerta); }

/* Distintivo del canal en la bandeja. Solo aparece en lo que no es WhatsApp:
   marcar tambien el caso normal seria ruido en todas las filas. */
.canal {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid var(--linea); border-radius: 99px; padding: .05rem .45rem;
  font-size: .68rem; font-weight: 600; color: var(--tenue); background: var(--sutil);
}
.canal .ico { width: 12px; height: 12px; }

/* --- Acuses de entrega ------------------------------------------------------ */

.acuse { font-weight: 700; letter-spacing: -.1em; margin-right: .1rem; }
.acuse--leido { color: var(--dato); }
.acuse--falla { color: var(--alerta); letter-spacing: 0; }

/* --- Adjuntos y etiquetas --------------------------------------------------- */

.adjunto { display: block; margin-bottom: .4rem; max-width: 100%; }
.adjunto--img {
  border-radius: var(--r-sm); max-height: 260px; object-fit: contain;
  background: var(--sutil); cursor: zoom-in;
}
.adjunto__baja { margin-bottom: .4rem; }
.msj audio { width: 260px; max-width: 100%; }

.etiqueta {
  border: 1px solid var(--linea); background: var(--blanco);
  border-radius: 99px; padding: .18rem .55rem; cursor: pointer;
  font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--tenue);
}
.etiqueta:hover { border-color: var(--c); color: var(--c); }
.etiqueta--puesta {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: var(--c); color: var(--c);
}

#resultadosBusqueda mark {
  background: color-mix(in srgb, var(--acento) 22%, transparent);
  color: inherit; border-radius: 3px;
}

/* --- Landing publica ---------------------------------------------------------
   Con portada, la pantalla de acceso deja de ser una caja centrada y pasa a ser
   una pagina que se recorre de arriba a abajo. Las franjas van de borde a borde
   y el ancho lo limita cada seccion por dentro (.lp-ancho): centrar todo en una
   sola columna angosta era lo que hacia que la portada pareciera un borrador.
   -------------------------------------------------------------------------- */

/* Sin portada, el acceso es una capa fija centrada. Con portada tiene que
   scrollear el documento entero: dejarla fija hacia que la rueda no moviera
   nada fuera de la caja y que el alto del telefono cortara la pagina. */
.acceso--portada {
  position: static; display: block; padding: 0;
  background: var(--blanco); overflow: visible;
}
.landing:empty { display: none; }

.lp-ancho { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

/* Barra superior: da identidad a la pagina y deja el ingreso siempre a mano,
   sin obligar a bajar hasta el formulario. */
.lp-barra {
  position: sticky; top: 0; z-index: 2;
  /* Fondo solido, no translucido: el blur crea una capa de composicion que
     deja rastros al scrollear en varios navegadores. */
  background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.lp-barra__int {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 1rem;
}
.lp-marca {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.lp-marca__escudo {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--acento); color: #fff; display: grid; place-items: center;
}
.lp-barra__acciones { display: flex; align-items: center; gap: .4rem; }
.lp-enlace {
  border: 0; background: none; cursor: pointer; font-family: var(--sans);
  font-size: .875rem; font-weight: 600; color: var(--medio);
  padding: .5rem .65rem; border-radius: var(--r-sm); text-decoration: none;
}
.lp-enlace:hover { color: var(--texto); background: var(--sutil); }

/* --- Portada ---------------------------------------------------------------- */

.lp-hero {
  background: linear-gradient(180deg, var(--acento-suave), var(--blanco) 72%);
  border-bottom: 1px solid var(--linea-2);
}
.lp-hero__int { text-align: center; padding: 4.5rem 1.25rem 3.5rem; }
.lp-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; margin: 0 auto;
}
.lp-hero__bajada {
  color: var(--medio); font-size: clamp(1rem, 2.2vw, 1.15rem);
  max-width: 52ch; margin: 1.1rem auto 2rem; line-height: 1.6;
}
.lp-hero__botones { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.btn--grande { padding: .8rem 1.5rem; font-size: .95rem; }

.lp-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; margin-top: 2.75rem;
}
.lp-cifra {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); padding: .9rem; box-shadow: var(--sombra);
}
.lp-cifra span {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue-2);
}
.lp-cifra strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

/* --- Secciones -------------------------------------------------------------- */

.lp-seccion { padding: 3.75rem 0; }
.lp-titulo {
  text-align: center; font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: -.025em;
}
.lp-subtitulo {
  text-align: center; color: var(--tenue); line-height: 1.6;
  margin: .6rem auto 2.25rem; max-width: 46ch;
}

.lp-bloques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
}
.lp-bloque {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--sombra);
}
.lp-bloque__ico {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: .9rem;
  background: var(--acento-suave); color: var(--acento-texto);
  display: grid; place-items: center;
}
.lp-bloque h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: .4rem; }
.lp-bloque p { color: var(--tenue); font-size: .92rem; line-height: 1.65; }

/* La franja gris separa los planes de los beneficios sin necesidad de una linea. */
.lp-planes { background: var(--fondo); border-top: 1px solid var(--linea); }
.lp-planes__grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; align-items: stretch;
}
/* Columna con el boton empujado abajo: asi las tarjetas quedan parejas aunque
   un plan tenga una linea mas que otro. */
.lp-plan {
  display: flex; flex-direction: column; position: relative;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--sombra);
}
.lp-plan--destacado {
  border-color: var(--acento); box-shadow: 0 8px 24px rgba(15, 123, 79, .12);
}
.lp-plan__cinta {
  position: absolute; top: -.65rem; left: 1.3rem;
  background: var(--acento); color: #fff; border-radius: 99px;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .22rem .6rem;
}
.lp-plan h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue);
}
.lp-plan__precio {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; margin: .45rem 0 1.1rem;
}
.lp-plan__precio small {
  font-size: .8rem; font-weight: 500; color: var(--tenue); letter-spacing: 0;
}
.lp-plan__limites { list-style: none; margin-bottom: 1.3rem; }
.lp-plan__limites li {
  display: flex; gap: .5rem; align-items: baseline;
  font-size: .875rem; color: var(--medio); padding: .3rem 0;
}
.lp-plan__limites li::before { content: "¹3"; color: var(--acento-texto); font-weight: 700; }
.lp-plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* El formulario, al pie: hasta aca la persona ya sabe que es esto. */
.lp-acceso { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lp-acceso .lp-titulo { margin-bottom: 1.75rem; }
.acceso--portada .lp-acceso {
  background: var(--fondo); border-top: 1px solid var(--linea);
  padding: 3.5rem 1.25rem 4rem;
}
.acceso--portada .acceso__caja { max-width: 26rem; }
.acceso--portada .acceso__tarjeta { margin-top: 0; }

.lp-pie { background: var(--texto); color: #cbd5e1; }
.lp-pie__int {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.6rem 1.25rem; font-size: .875rem;
}
.lp-pie .lp-marca { color: #fff; }
.lp-pie a { color: #fff; font-weight: 600; text-decoration: none; }
/* Los enlaces legales van en el pie, a la vista: Meta revisa que la politica se
   encuentre desde el inicio y no solo en la configuracion de la app. */
.lp-legales { font-size: .85rem; }
.lp-legales a { font-weight: 500; opacity: .85; }
.lp-pie a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .lp-hero__int { padding: 3rem 1.25rem 2.5rem; }
  .lp-seccion { padding: 2.75rem 0; }
  .lp-hero__botones .btn { width: 100%; }
}

/* Filas que llevan a un detalle. */
.tabla tr.clickeable { cursor: pointer; }

/* --- Motivos de una campaña -------------------------------------------------- */

.motivos {
  padding: .9rem 1.15rem; background: var(--sutil-2);
  border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2);
}
.motivo {
  display: flex; align-items: baseline; gap: .6rem; margin-top: .5rem;
  font-size: .875rem; color: var(--medio);
}
.motivo__n {
  flex: none; min-width: 1.6rem; text-align: center;
  font-weight: 700; font-size: .78rem;
  background: var(--aviso-suave); color: var(--aviso);
  border-radius: 99px; padding: .1rem .4rem;
}

/* --- Resumen de la IA -------------------------------------------------------- */

.resumen-ia {
  background: var(--dato-suave); border: 1px solid #bfdbfe;
  border-radius: var(--r); padding: .8rem 1rem; margin-bottom: .6rem;
}
.resumen-ia p { color: var(--medio); font-size: .875rem; line-height: 1.6; margin-top: .35rem; }

/* --- Envío en espera --------------------------------------------------------- */

.espera {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.15rem; background: var(--aviso-suave);
  border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a;
}
.espera .ico { color: var(--aviso); flex: none; margin-top: .1rem; }
.espera strong { font-size: .9rem; color: var(--aviso); }
.espera p { font-size: .85rem; color: var(--medio); margin-top: .2rem; line-height: 1.55; }

/* --- Valor para copiar ------------------------------------------------------- */

.copiable {
  display: flex; align-items: flex-end; gap: .6rem; margin-top: .7rem;
}
.copiable .secreto { margin-top: .25rem; }

/* --- Diálogo de baja de un número -------------------------------------------- */
/*
   `<dialog>` nativo y no un div superpuesto: el navegador ya resuelve el foco
   atrapado dentro, el cierre con Escape y quedar por encima de todo. Un div
   hecho a mano tendria que reimplementar las tres cosas, y suele hacerlo mal.
*/
/*
   Centrado. El navegador ya centra un dialogo modal con `margin: auto`, pero
   el `* { margin: 0 }` de arriba lo pisa y quedan todos pegados arriba a la
   izquierda. Va en el elemento y no en la clase para que cualquier dialogo
   que se agregue despues nazca centrado sin tener que acordarse.
*/
dialog[open] { inset: 0; margin: auto; }

.dialogo {
  border: 1px solid var(--linea); border-radius: var(--r); padding: 0;
  width: min(460px, calc(100vw - 2rem)); background: var(--blanco);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18); color: var(--texto);
  /* En una pantalla baja el contenido scrollea dentro del dialogo; sin esto
     el pie con los botones se va fuera de la vista y no hay como cerrarlo. */
  max-height: calc(100vh - 2rem); display: flex; flex-direction: column;
}
.dialogo::backdrop { background: rgba(15, 23, 42, .45); }

/* Pasos numerados dentro de un dialogo: crear el bot de Telegram es la parte
   que nadie sabe hacer de memoria, asi que las instrucciones van al lado del
   campo donde se pega el token. */
.ayuda-pasos { margin: .6rem 0 1rem 1.1rem; color: var(--medio); font-size: .875rem; }
.ayuda-pasos li { margin-bottom: .35rem; line-height: 1.55; }
.ayuda-pasos code, .dialogo__cuerpo code {
  font-family: var(--mono); font-size: .84em;
  background: var(--sutil); border-radius: 5px; padding: .1rem .35rem;
}
.dialogo__cuerpo { padding: 1.25rem; overflow-y: auto; }
.dialogo__cuerpo > p { color: var(--medio); font-size: .875rem;
                       line-height: 1.6; margin-top: .4rem; }
.dialogo__pie {
  display: flex; flex: none; justify-content: flex-end; gap: .55rem;
  padding: .9rem 1.25rem; border-top: 1px solid var(--linea-2);
  background: var(--sutil);
}

/* Cada opcion es una tarjeta clicable entera, no un radio de 13px al lado de
   un texto: la diferencia entre las dos es demasiado importante como para
   jugarsela a que alguien le pegue al circulito correcto. */
.opcion {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: .8rem .9rem; margin-top: .8rem;
}
.opcion:hover { background: var(--sutil); }
.opcion input { width: auto; margin: .15rem 0 0; flex: none; accent-color: var(--acento); }
.opcion strong { display: block; font-size: .88rem; font-weight: 600; }
.opcion small { display: block; color: var(--tenue); font-size: .8rem;
                line-height: 1.5; margin-top: .2rem; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion--peligro:has(input:checked) { border-color: var(--alerta); background: var(--alerta-suave); }

/* --- Pasos de un flujo ------------------------------------------------------- */

.paso {
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: .85rem; margin-bottom: .7rem; background: var(--sutil);
}
.paso__cab {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem;
}
.paso__cab .eti { flex: 1; color: var(--texto); font-weight: 600; }
.paso textarea { background: var(--blanco); }

/* Las opciones se separan del mensaje con una guía a la izquierda: dejan de
   verse como campos sueltos y se leen como lo que son, las salidas del paso. */
.paso__ops {
  margin-top: .6rem; padding-left: .8rem;
  border-left: 2px solid var(--linea);
  display: flex; flex-direction: column; gap: .45rem; align-items: flex-start;
}
.paso__ops .fila { width: 100%; }

/* Archivo de un paso: label con input oculto adentro, para que el botón sea
   el disparador del selector sin JS de por medio. */
.paso__archivo {
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap; margin-top: .5rem;
}
.paso__archivo label { cursor: pointer; margin: 0; }

/* Caja de adjuntar. Siempre visible, aunque no haya archivo: un botón que
   aparece solo después de hacer no-sé-qué es un botón que nadie encuentra. */
.adjuntar {
  display: flex; align-items: center; gap: .55rem;
  flex-wrap: wrap; margin-top: .6rem;
}
.adjuntar label { cursor: pointer; margin: 0; }

/* Fila que pide atención en una tabla de métricas: un paso donde la gente se
   traba. El fondo y no solo un texto en rojo, para que se vea al pasar la
   vista por la tabla sin leer cada renglón. */
.tabla tr.fila--alerta td { background: var(--alerta-suave); }

/* Tarjeta de métrica que pide atención: más de un tercio de la gente se va
   sin terminar, o pide una persona. El borde y no un fondo pleno, para que
   siga leyéndose como una métrica y no como un error. */
.metrica.metrica--alerta { border-color: #fecaca; }
.metrica.metrica--alerta strong { color: var(--alerta); }

/* --- Menu de plataformas de la familia (barra superior) ------------------ */

.apps { position: relative; }
.apps__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: 300px; max-width: calc(100vw - 2rem);
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); box-shadow: var(--sombra-md); padding: .4rem;
}
.apps__titulo {
  margin: 0; padding: .35rem .6rem .25rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tenue-2);
}
.apps__item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .6rem; border-radius: var(--r-sm);
  color: var(--texto); text-decoration: none;
}
.apps__item:hover { background: var(--sutil); }
.apps__inicial {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--acento-texto); font-weight: 700;
}
.apps__nombre { display: block; font-size: .85rem; font-weight: 600; }
.apps__desc { display: block; margin-top: .1rem; font-size: .75rem; color: var(--tenue); line-height: 1.35; }
.apps__vacio { margin: 0; padding: .6rem; font-size: .8rem; color: var(--tenue); }
.apps__todas {
  display: block; margin-top: .3rem; padding: .55rem .6rem .35rem;
  border-top: 1px solid var(--linea-2);
  font-size: .78rem; font-weight: 600; color: var(--acento-texto); text-decoration: none;
}