/* Componentes del CRM Grupo MM: estructura de navegación y todos los componentes compartidos.
   Primero teléfono; un solo punto de quiebre, 64rem (1024 px): en el teléfono el menú principal se abre con ☰ desde la barra
   azul de arriba; desde 64rem el menú lateral queda fijo a la izquierda.
   Solo se usan tokens de tokens.css. El verde de marca se usa únicamente como relleno, nunca como color de texto. */

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

.marco {
  min-height: 100dvh;
}

.barra-superior {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) max(var(--espacio-4), env(safe-area-inset-right)) var(--espacio-2)
    max(var(--espacio-4), env(safe-area-inset-left));
  padding-top: calc(var(--espacio-2) + env(safe-area-inset-top, 0px));
  background: var(--gmm-azul-marino);
  color: var(--gmm-blanco);
}

.barra-superior__titulo {
  flex: 1;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-l);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.barra-superior__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.barra-superior__iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--radio-pastilla);
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
  font-weight: 700;
}

.barra-superior__nueva {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-m);
  background: var(--gmm-verde);
  color: var(--gmm-azul-marino);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.barra-superior__nueva:hover {
  filter: brightness(0.95);
}

.barra-superior__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radio-m);
  background: transparent;
  color: var(--gmm-blanco);
  cursor: pointer;
}

.barra-superior__menu:hover {
  background: rgba(255, 255, 255, 0.12);
}

.barra-superior__menu[aria-expanded="true"] {
  background: var(--gmm-azul);
}

.barra-superior :is(a, button):focus-visible {
  outline-color: var(--foco-color-sobre-oscuro);
}

/* El logo es un WebP opaco: va sobre una pastilla blanca, como en la portada */
.logo-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-m);
  background: var(--gmm-blanco);
}

.logo-chip img {
  display: block;
  width: auto;
  height: 2.25rem;
}

.icono {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Menú lateral (escritorio) ---------- */

.menu-lateral {
  display: none;
}

.menu-lateral :is(a, button) {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-m);
  color: var(--gmm-blanco);
  font-weight: 500;
  text-decoration: none;
}

/* «Cerrar sesión» es el botón de un formulario POST (la sesión termina en el servidor) y debe verse igual que los enlaces */
.menu-lateral button {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.menu-lateral :is(a, button):hover {
  background: rgba(255, 255, 255, 0.12);
}

.menu-lateral a[aria-current] {
  background: var(--gmm-azul);
  font-weight: 700;
}

.menu-lateral :is(a, button):focus-visible {
  outline-color: var(--foco-color-sobre-oscuro);
}

/* Teléfono: el mismo menú se abre con ☰ justo debajo de la barra azul (el script pone data-abierto) */
@media (max-width: 63.99rem) {
  /* Medido a 360 px: con logo, iniciales, «+ Nueva» y ☰ solo quedan unos 28 px para el título; no cabe, así que se oculta en el teléfono */
  .barra-superior__titulo {
    display: none;
  }

  .barra-superior {
    justify-content: space-between;
  }

  .barra-superior__acciones {
    flex: none;
  }

  .menu-lateral .logo-chip {
    display: none;
  }

  .menu-lateral[data-abierto] {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    max-height: calc(100dvh - var(--tap-min) - 2 * var(--espacio-2) - env(safe-area-inset-top, 0px));
    padding: var(--espacio-3) max(var(--espacio-4), env(safe-area-inset-right))
      calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px)) max(var(--espacio-4), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--gmm-azul-marino);
    box-shadow: var(--sombra-2);
  }
}

/* ---------- Contenido ---------- */

.contenido {
  padding: var(--espacio-4) max(var(--espacio-4), env(safe-area-inset-right))
    calc(var(--espacio-6) + env(safe-area-inset-bottom, 0px))
    max(var(--espacio-4), env(safe-area-inset-left));
  max-width: var(--contenido-max);
}

.pantalla {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.encabezado-pantalla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-5);
  border: 2px solid var(--gmm-azul);
  border-radius: var(--radio-m);
  background: var(--gmm-blanco);
  color: var(--gmm-azul);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.boton--primario {
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
}

.boton--primario:hover {
  background: var(--gmm-azul-marino);
  border-color: var(--gmm-azul-marino);
}

.boton--secundario {
  background: var(--gmm-blanco);
  color: var(--gmm-azul);
}

.boton--secundario:hover {
  background: var(--gmm-fondo);
}

/* ---------- Campos de formulario ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__etiqueta {
  padding: 0;
  font-weight: 600;
}

.campo__control {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--gmm-texto-tenue);
  border-radius: var(--radio-m);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
}

.campo__ayuda {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

/* Botones de opción (radio o casilla): el control nativo cubre toda la pastilla y no se ve */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.opcion {
  position: relative;
  display: inline-flex;
}

.campo > .opcion {
  align-self: flex-start;
}

.opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion__texto {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-4);
  border: 2px solid var(--gmm-texto-tenue);
  border-radius: var(--radio-pastilla);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
  font-weight: 500;
}

.opcion input:checked + .opcion__texto {
  border-color: var(--gmm-azul);
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
}

.opcion input:focus-visible + .opcion__texto {
  outline: 3px solid var(--foco-color);
  outline-offset: 2px;
}

/* ---------- Barra de acciones (pegada abajo, al alcance del pulgar) ----------
   Úsela en pantallas donde el menú inferior está oculto (formularios); queda sobre el área segura del teléfono. */

.barra-acciones {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0 calc(var(--espacio-3) + env(safe-area-inset-bottom, 0px));
  background: var(--gmm-fondo);
  border-top: 1px solid var(--gmm-borde);
}

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

/* ---------- Sugerencias y mensajes ---------- */

.sugerencias {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: 1px solid var(--gmm-azul);
  border-radius: var(--radio-m);
  background: var(--estado-nueva-fondo);
}

.mensaje-exito {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-m);
  background: var(--gmm-verde);
  color: var(--gmm-azul-marino);
  font-weight: 600;
}

/* ---------- Escritorio ---------- */

@media (min-width: 64rem) {
  .barra-superior__nueva,
  .barra-superior__menu {
    display: none;
  }

  .menu-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    width: var(--menu-lateral-ancho);
    padding: var(--espacio-4) var(--espacio-3);
    overflow-y: auto;
    background: var(--gmm-azul-marino);
  }

  .menu-lateral .logo-chip {
    align-self: flex-start;
    margin-bottom: var(--espacio-4);
  }

  .barra-superior {
    margin-left: var(--menu-lateral-ancho);
  }

  .barra-superior > .logo-chip {
    display: none;
  }

  .contenido {
    margin-left: var(--menu-lateral-ancho);
    padding-bottom: var(--espacio-6);
  }
}

/* =====================================================================
   Componentes compartidos de todas las pantallas (plan 02-03).
   Cada clase está en docs/ux/guia-de-estilo.md y se ve en la vista #catalogo del prototipo.
   ===================================================================== */

code {
  padding: 0 var(--espacio-1);
  border-radius: var(--radio-s);
  background: var(--gmm-fondo);
  font-size: var(--texto-s);
  overflow-wrap: anywhere;
}

/* ---------- Utilidades de disposición ---------- */

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.pila--compacta {
  gap: var(--espacio-2);
}

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

.fila--entre {
  justify-content: space-between;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--espacio-3);
}

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-4);
}

.solo-escritorio {
  display: none;
}

.texto-tenue {
  color: var(--gmm-texto-tenue);
}

.texto-chico {
  font-size: var(--texto-s);
}

.texto-fuerte {
  font-weight: 700;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Único caso en que un enlace puede medir menos de 44 px: dentro de una frase */
.enlace-en-linea {
  display: inline;
}

.ancho-completo {
  width: 100%;
}

/* ---------- Botones adicionales ---------- */

.boton--exito {
  border-color: var(--gmm-verde);
  background: var(--gmm-verde);
  color: var(--gmm-azul-marino);
}

.boton--exito:hover {
  filter: brightness(0.95);
}

.boton--peligro {
  border-color: var(--gmm-alerta);
  background: var(--gmm-alerta);
  color: var(--gmm-blanco);
}

.boton--peligro:hover {
  filter: brightness(0.92);
}

.boton--texto {
  border-color: transparent;
  background: transparent;
  color: var(--gmm-azul);
}

.boton--texto:hover {
  background: var(--gmm-fondo);
}

.boton--icono {
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
}

.boton--bloque {
  display: flex;
  width: 100%;
}

/* ---------- Formularios ---------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  max-width: 40rem;
}

.campo--error .campo__control {
  border-color: var(--gmm-alerta);
  border-width: 2px;
}

.campo__error {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--gmm-alerta);
  font-size: var(--texto-s);
  font-weight: 600;
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--tap-min);
  cursor: pointer;
}

.casilla input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--gmm-azul);
}

.buscador {
  position: relative;
  display: flex;
  align-items: center;
}

.buscador .icono {
  position: absolute;
  left: var(--espacio-3);
  color: var(--gmm-texto-tenue);
  pointer-events: none;
}

.buscador .campo__control {
  padding-left: calc(var(--espacio-3) + 1.5rem + var(--espacio-2));
  padding-right: var(--tap-min);
  appearance: none;
}

.buscador .campo__control::-webkit-search-cancel-button {
  appearance: none;
}

.buscador .boton--icono {
  position: absolute;
  right: 0;
  border-color: transparent;
  background: transparent;
}

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 0.125rem var(--espacio-3);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-pastilla);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.etiqueta .icono {
  width: 1rem;
  height: 1rem;
}

.etiqueta--alerta {
  border-color: transparent;
  background: var(--gmm-alerta-fondo);
  color: var(--gmm-alerta);
}

.etiqueta--exito {
  border-color: transparent;
  background: var(--estado-ganada-fondo);
  color: var(--estado-ganada-texto);
}

.etiqueta--pendiente {
  border-color: transparent;
  background: var(--estado-cotizada-fondo);
  color: var(--estado-cotizada-texto);
}

.etiqueta-estado {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--espacio-3);
  border-radius: var(--radio-pastilla);
  background: var(--estado-perdida-fondo);
  color: var(--estado-perdida-texto);
  font-size: var(--texto-s);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.etiqueta-estado--nueva {
  background: var(--estado-nueva-fondo);
  color: var(--estado-nueva-texto);
}

.etiqueta-estado--asignada {
  background: var(--estado-asignada-fondo);
  color: var(--estado-asignada-texto);
}

.etiqueta-estado--contactada {
  background: var(--estado-contactada-fondo);
  color: var(--estado-contactada-texto);
}

.etiqueta-estado--cotizada {
  background: var(--estado-cotizada-fondo);
  color: var(--estado-cotizada-texto);
}

.etiqueta-estado--ganada {
  background: var(--estado-ganada-fondo);
  color: var(--estado-ganada-texto);
}

.etiqueta-estado--perdida {
  background: var(--estado-perdida-fondo);
  color: var(--estado-perdida-texto);
}

.canal {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-weight: 500;
}

.canal .icono {
  width: 1.125rem;
  height: 1.125rem;
}

.iniciales {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radio-pastilla);
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
  font-size: var(--texto-s);
  font-weight: 700;
}

.insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--espacio-1);
  border-radius: var(--radio-pastilla);
  background: var(--gmm-alerta);
  color: var(--gmm-blanco);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Tarjetas y listas ---------- */

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  box-shadow: var(--sombra-1);
}

/* Tarjeta de solicitud (D-09): toda la tarjeta es un enlace; tres líneas, unas seis por pantalla de teléfono */
.tarjeta-solicitud {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  box-shadow: var(--sombra-1);
  color: var(--gmm-tinta);
  line-height: 1.3;
  text-decoration: none;
}

.tarjeta-solicitud:hover {
  border-color: var(--gmm-azul);
}

.tarjeta-solicitud__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-width: 0;
}

.tarjeta-solicitud__nombre {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarjeta-solicitud__tiempo {
  flex: none;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

.tarjeta-solicitud__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarjeta-solicitud__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-3);
  margin-top: 0.125rem;
}

.tarjeta-solicitud__asignada {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  margin-left: auto;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  white-space: nowrap;
}

.tarjeta-solicitud .iniciales {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

.lista {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  list-style: none;
}

.lista > li + li {
  border-top: 1px solid var(--gmm-borde);
}

.lista__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-4);
  color: var(--gmm-tinta);
  text-decoration: none;
}

a.lista__fila:hover {
  background: var(--gmm-fondo);
}

.lista__titulo {
  display: block;
  font-weight: 600;
}

.lista__detalle {
  display: block;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

.contadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

.contador {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-1);
  min-height: var(--tap-min);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
  text-decoration: none;
}

a.contador:hover {
  border-color: var(--gmm-azul);
}

.contador__numero {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xxl);
  font-weight: 800;
  line-height: 1;
}

.contador__texto {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-weight: 600;
}

.contador--alerta {
  border-color: var(--gmm-alerta);
  background: var(--gmm-alerta-fondo);
}

.contador--alerta .contador__numero {
  color: var(--gmm-alerta);
}

.contador--alerta .contador__texto {
  color: var(--gmm-tinta);
}

/* ---------- Pestañas ---------- */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-4);
  border: 2px solid var(--gmm-borde);
  border-radius: var(--radio-pastilla);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
  font-weight: 600;
  text-decoration: none;
}

.pestana:hover {
  border-color: var(--gmm-azul);
}

.pestana[aria-current] {
  border-color: var(--gmm-azul);
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
}

/* ---------- Avisos y estados ---------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border-left: 4px solid var(--gmm-azul);
  border-radius: var(--radio-m);
  background: var(--estado-nueva-fondo);
  color: var(--gmm-tinta);
}

.aviso__texto {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.aviso--exito {
  border-left-color: var(--gmm-verde);
  background: var(--estado-ganada-fondo);
}

.aviso--exito .icono {
  color: var(--estado-ganada-texto);
}

.aviso--alerta {
  border-left-color: var(--estado-cotizada-texto);
  background: var(--estado-cotizada-fondo);
}

.aviso--alerta .icono {
  color: var(--estado-cotizada-texto);
}

.aviso--error {
  border-left-color: var(--gmm-alerta);
  background: var(--gmm-alerta-fondo);
}

.aviso--error .icono {
  color: var(--gmm-alerta);
}

.aviso--info .icono {
  color: var(--gmm-azul);
}

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-6) var(--espacio-4);
  border: 2px dashed var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  text-align: center;
}

.vacio > .icono {
  width: 3rem;
  height: 3rem;
  color: var(--gmm-texto-tenue);
}

.vacio__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-l);
  font-weight: 700;
}

.sin-permiso {
  border-color: var(--gmm-alerta);
}

.sin-permiso > .icono {
  color: var(--gmm-alerta);
}

.sin-conexion {
  border-style: solid;
  border-color: var(--estado-cotizada-texto);
  background: var(--estado-cotizada-fondo);
}

.sin-conexion > .icono {
  color: var(--estado-cotizada-texto);
}

.cargando {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.cargando__bloque {
  height: 4.5rem;
  border-radius: var(--radio-l);
  background: var(--gmm-borde);
}

.cargando__bloque--corto {
  width: 60%;
  height: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .cargando__bloque {
    animation: pulso 1.4s ease-in-out infinite;
  }

  @keyframes pulso {
    50% {
      opacity: 0.45;
    }
  }
}

/* ---------- Hoja inferior, velo y diálogo ---------- */

.fondo-oscuro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--velo);
}

.hoja {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  max-height: min(85dvh, 100%);
  padding: var(--espacio-2) max(var(--espacio-4), env(safe-area-inset-right))
    calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px)) max(var(--espacio-4), env(safe-area-inset-left));
  border-radius: var(--radio-l) var(--radio-l) 0 0;
  background: var(--gmm-blanco);
  box-shadow: var(--sombra-2);
}

.hoja__asa {
  align-self: center;
  width: 3rem;
  height: 0.25rem;
  border-radius: var(--radio-pastilla);
  background: var(--gmm-borde);
}

.hoja__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.hoja__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  overflow-y: auto;
}

.dialogo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  width: min(26rem, calc(100% - 2rem));
  padding: var(--espacio-5);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  box-shadow: var(--sombra-2);
  transform: translate(-50%, -50%);
}

/* Marco para mostrar una hoja o un diálogo dentro de la página (el prototipo los enseña sin taparla toda) */
.escenario {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border: 2px dashed var(--gmm-texto-tenue);
  border-radius: var(--radio-l);
  background: var(--gmm-fondo);
  transform: translateZ(0);
}

.escenario--bajo {
  min-height: 18rem;
}

/* ---------- Ficha, línea de tiempo, contacto y adjuntos ---------- */

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--espacio-3) var(--espacio-4);
  margin: 0;
}

.ficha__dato {
  margin: 0;
}

.ficha__dato dt {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-weight: 600;
}

.ficha__dato dd {
  margin: 0;
  font-weight: 500;
}

.linea-tiempo {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linea-tiempo__registro {
  position: relative;
  display: flex;
  gap: var(--espacio-3);
  padding-bottom: var(--espacio-4);
}

.linea-tiempo__registro:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: 0;
  left: 1.0625rem;
  width: 2px;
  background: var(--gmm-borde);
}

.linea-tiempo__icono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio-pastilla);
  background: var(--estado-nueva-fondo);
  color: var(--gmm-azul);
}

.linea-tiempo__cuerpo {
  min-width: 0;
  padding-top: 0.125rem;
}

.linea-tiempo__meta {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

.acciones-contacto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}

.acciones-contacto .boton {
  flex-direction: column;
  gap: var(--espacio-1);
  min-height: 4rem;
  padding: var(--espacio-2);
  font-size: var(--texto-s);
}

.adjuntos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--espacio-2);
}

.adjuntos__miniatura,
.adjuntos__agregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: 6rem;
  padding: var(--espacio-2);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-m);
  background: var(--gmm-blanco);
  color: var(--gmm-tinta);
  font-size: var(--texto-s);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.adjuntos__agregar {
  border: 2px dashed var(--gmm-azul);
  background: transparent;
  color: var(--gmm-azul);
  font-weight: 600;
}

/* ---------- Tabla ---------- */

.tabla-envoltura {
  position: relative;
  max-height: 70dvh;
  overflow: auto;
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th,
.tabla td {
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: 1px solid var(--gmm-borde);
  text-align: left;
  vertical-align: middle;
}

.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gmm-fondo);
  font-size: var(--texto-s);
  white-space: nowrap;
}

.tabla tbody tr:hover {
  background: var(--gmm-fondo);
}

.tabla td a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 600;
}

/* ---------- Gráfico de barras ---------- */

.barras {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras__fila {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) var(--tap-min);
  align-items: center;
  gap: var(--espacio-3);
}

.barras__etiqueta {
  font-size: var(--texto-s);
  font-weight: 600;
}

.barras__numero {
  font-weight: 700;
  text-align: right;
}

.barras__barra {
  width: 100%;
  height: 1rem;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: var(--gmm-borde);
  overflow: hidden;
  appearance: none;
}

.barras__barra::-webkit-progress-bar {
  background: var(--gmm-borde);
}

.barras__barra::-webkit-progress-value {
  border-radius: var(--radio-pastilla);
  background: var(--gmm-azul);
}

.barras__barra::-moz-progress-bar {
  border-radius: var(--radio-pastilla);
  background: var(--gmm-azul);
}

/* ---------- Tablero Kanban (escritorio) ---------- */

.tablero-kanban {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding-bottom: var(--espacio-2);
  overflow-x: auto;
}

.columna-kanban {
  display: flex;
  flex: 0 0 17rem;
  flex-direction: column;
  min-width: 0;
  gap: var(--espacio-2);
  padding: var(--espacio-2);
  border-radius: var(--radio-l);
  background: var(--gmm-borde);
}

.columna-kanban__cabecera {
  margin: 0;
  padding: var(--espacio-1) var(--espacio-2);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-m);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Calendario y agenda ---------- */

.calendario {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-borde);
}

.calendario__encabezado {
  padding: var(--espacio-2);
  background: var(--gmm-fondo);
  font-size: var(--texto-s);
  font-weight: 700;
  text-align: center;
}

.calendario__dia {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  min-height: 6rem;
  padding: var(--espacio-1);
  background: var(--gmm-blanco);
}

.calendario__numero {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-weight: 700;
}

.agenda {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.agenda__dia {
  margin: 0;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-m);
}

.evento {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: var(--tap-min);
  padding: var(--espacio-1) var(--espacio-2);
  border-left: 4px solid var(--gmm-azul);
  border-radius: var(--radio-s);
  background: var(--estado-nueva-fondo);
  color: var(--gmm-tinta);
  font-size: var(--texto-s);
  line-height: 1.25;
  text-decoration: none;
}

.evento:hover {
  filter: brightness(0.96);
}

.evento__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-weight: 700;
}

.evento--publicada {
  border-left-color: var(--gmm-verde);
  background: var(--estado-ganada-fondo);
}

.evento--error {
  border-left-color: var(--gmm-alerta);
  background: var(--gmm-alerta-fondo);
}

/* ---------- Correo ---------- */

.correo-marco {
  overflow: hidden;
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
}

.correo-marco__cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espacio-1) var(--espacio-3);
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: 1px solid var(--gmm-borde);
  background: var(--gmm-fondo);
  font-size: var(--texto-s);
}

.correo-marco__cabecera dt {
  color: var(--gmm-texto-tenue);
  font-weight: 600;
}

.correo-marco__cabecera dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.correo-marco__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  width: 100%;
  max-width: 37.5rem;
  margin: 0 auto;
  padding: var(--espacio-5) var(--espacio-4);
}

.hilo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--espacio-3);
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-4);
  color: var(--gmm-tinta);
  text-decoration: none;
}

a.hilo:hover {
  background: var(--gmm-fondo);
}

.hilo .insignia {
  justify-self: end;
}

.hilo__asunto {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hilo__fecha {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

.hilo__resumen {
  overflow: hidden;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mensaje {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
}

.mensaje--propio {
  border-color: var(--gmm-azul);
  background: var(--estado-nueva-fondo);
}

.mensaje__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
}

/* ---------- Fusionar e importar ---------- */

.comparacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-3);
}

.comparacion__registro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border: 2px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  cursor: pointer;
}

.comparacion__registro:has(input:checked) {
  border-color: var(--gmm-azul);
  background: var(--estado-nueva-fondo);
}

.comparacion__registro input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--gmm-azul);
}

.comparacion__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--tap-min);
  font-weight: 700;
}

.comparacion__resumen {
  padding: var(--espacio-3);
  border-left: 4px solid var(--gmm-azul);
  border-radius: var(--radio-s);
  background: var(--estado-nueva-fondo);
  font-weight: 600;
}

.resumen-importacion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}

.fila-problema {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--espacio-2) var(--espacio-4);
}

.fila-problema__motivo {
  color: var(--gmm-alerta);
  font-size: var(--texto-s);
  font-weight: 600;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasos__paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
  padding-top: var(--espacio-2);
  border-top: 4px solid var(--gmm-borde);
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-weight: 600;
  text-align: center;
}

.pasos__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid currentcolor;
  border-radius: var(--radio-pastilla);
}

.pasos__paso--hecho {
  border-top-color: var(--gmm-verde);
  color: var(--estado-ganada-texto);
}

.pasos__paso[aria-current] {
  border-top-color: var(--gmm-azul);
  color: var(--gmm-azul);
}

.pasos__paso[aria-current] .pasos__numero {
  background: var(--gmm-azul);
  color: var(--gmm-blanco);
}

/* ---------- Redes sociales ---------- */

.tarjeta-canal {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  box-shadow: var(--sombra-1);
}

.tarjeta-canal__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

.tarjeta-canal__nombre {
  flex: 1 1 8rem;
  min-width: 0;
  font-weight: 700;
}

.vista-previa {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  max-width: 26rem;
  padding: var(--espacio-3);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
}

.vista-previa__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-weight: 700;
}

.vista-previa__imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.91 / 1;
  border-radius: var(--radio-m);
  background: var(--gmm-borde);
  color: var(--gmm-texto-tenue);
}

.vista-previa__imagen .icono {
  width: 3rem;
  height: 3rem;
}

.selector-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--espacio-2);
}

.selector-imagenes__miniatura,
.selector-imagenes__agregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: 5.5rem;
  padding: var(--espacio-1);
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-m);
  background: var(--gmm-borde);
  color: var(--gmm-tinta);
  font-size: var(--texto-s);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.selector-imagenes__agregar {
  border: 2px dashed var(--gmm-azul);
  background: transparent;
  color: var(--gmm-azul);
  font-weight: 600;
}

.contador-caracteres {
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.contador-caracteres--excedido {
  color: var(--gmm-alerta);
  font-weight: 700;
}

/* ---------- Avisos del equipo (campana) ---------- */

.avisos-lista {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gmm-borde);
  border-radius: var(--radio-l);
  background: var(--gmm-blanco);
  list-style: none;
}

.avisos-lista > li + li {
  border-top: 1px solid var(--gmm-borde);
}

.avisos-lista__item {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--tap-min);
  padding: var(--espacio-2) var(--espacio-4);
  color: var(--gmm-tinta);
  text-decoration: none;
}

.avisos-lista__item:hover {
  background: var(--gmm-fondo);
}

.avisos-lista__punto {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radio-pastilla);
  background: transparent;
}

.avisos-lista__item--sin-leer .avisos-lista__punto {
  background: var(--gmm-azul);
}

.avisos-lista__item--sin-leer .avisos-lista__texto {
  font-weight: 700;
}

.avisos-lista__texto {
  flex: 1;
  min-width: 0;
}

.avisos-lista__hora {
  flex: none;
  color: var(--gmm-texto-tenue);
  font-size: var(--texto-s);
}

.campana {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.campana .insignia {
  position: absolute;
  top: 0;
  right: 0;
}

/* ---------- Dos anchos: teléfono y escritorio (punto de quiebre 64rem) ---------- */

/* ---------- Ajustes de la revisión final (plan 02-10) ---------- */

/* Botón de texto pegado al margen del contenido: «Volver a…» y enlaces sueltos que no llevan relleno lateral */
.boton--enlace {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
  border-color: transparent;
  background: transparent;
  color: var(--gmm-azul);
  text-align: left;
  text-decoration: underline;
}

.boton--enlace:hover {
  text-decoration-thickness: 2px;
}

/* Contador neutro (mensajes de un hilo): el rojo queda reservado para atrasos y errores */
.insignia--neutra {
  background: var(--gmm-azul);
}

/* Acción dentro del aviso, debajo del texto, para que no quede una columna angosta en el teléfono */
.aviso__accion {
  align-self: flex-start;
  margin-top: var(--espacio-1);
}

/* Etiqueta de una persona o cosa desactivada: gris, sin rojo ni verde */
.etiqueta--desactivada {
  border-color: transparent;
  background: var(--estado-perdida-fondo);
  color: var(--estado-perdida-texto);
}

/* Marco punteado más alto, para mostrar un panel completo sin inventar tarjetas de relleno */
.escenario--alto {
  min-height: 44rem;
}

/* Pie de una hoja o panel: queda a la vista, con fondo blanco, mientras el contenido se desplaza */
.hoja__pie {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin-top: auto;
  padding: var(--espacio-3) 0 0;
  border-top: 1px solid var(--gmm-borde);
  background: var(--gmm-blanco);
}

/* Fila de lista que no es un enlace (vista previa, solo lectura) */
.lista__fila--estatica {
  cursor: default;
}

/* Fila de lista con una acción propia a la derecha: el nombre sigue siendo un enlace y el botón es aparte */
.lista__con-accion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding-right: var(--espacio-4);
}

.lista__con-accion .lista__fila {
  flex: 1;
  min-width: 0;
}

/* Día del mes anterior o siguiente en el calendario: más tenue que los días del mes */
.calendario__dia--otro-mes {
  background: var(--gmm-fondo);
}

.calendario__dia--otro-mes .calendario__numero {
  font-weight: 500;
}

/* Tarjeta angosta y centrada (ingreso) y logo grande */
.tarjeta--angosta {
  align-self: center;
  width: 100%;
  max-width: 26rem;
  padding: var(--espacio-5);
}

.logo-chip--grande {
  align-self: center;
  padding: var(--espacio-2) var(--espacio-4);
}

.logo-chip--grande img {
  width: 12rem;
  height: auto;
}

/* Número de una barra como enlace de 44 px, dentro de la columna del número */
.barras__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--gmm-azul);
  font-weight: 700;
}

@media (min-width: 64rem) {
  .solo-telefono {
    display: none !important;
  }

  .solo-escritorio {
    display: block;
  }

  .dos-columnas {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .contadores {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .comparacion {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendario__dia {
    min-height: 7rem;
  }

  .hoja {
    top: 0;
    left: auto;
    width: 26rem;
    max-height: none;
    padding-top: var(--espacio-4);
    border-radius: 0;
  }

  .hoja__asa {
    display: none;
  }
}

.evento .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Grupos del menú lateral (plan 02-11) ---------- */

.menu-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}

.menu-grupo__titulo {
  margin: var(--espacio-3) var(--espacio-3) var(--espacio-1);
  color: var(--gmm-blanco);
  font-size: var(--texto-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.menu-separador {
  width: 100%;
  margin: var(--espacio-3) 0 var(--espacio-1);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Botón «+» de un día del calendario: abre la publicación nueva con esa fecha (44 px de toque) */
.calendario__nuevo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  margin-top: auto;
  border-radius: var(--radio-m);
  color: var(--gmm-azul);
  text-decoration: none;
}

.calendario__nuevo:hover {
  background: var(--gmm-fondo);
}