/*
 * Hub de PARRA PROPIEDADES — hoja de estilos unica.
 *
 * OJO: parrapropiedades.com.ar NO es nuestra, es OTRA inmobiliaria con el mismo
 * nombre. De ahi se habian sacado los colores y una "flor" de logo a la maniana del 14/9;
 * a la tarde Francisco aclaro que el logo es el nuestro (la P con dos edificios, ver
 * iconos.html) y que los colores quedan como estan porque le gustan:
 *   verde oscuro #123016  -> barra superior y paneles fuertes
 *   verde        #156733  -> botones principales
 *   coral        #e96c3c  -> la accion principal de cada pagina
 *
 * Decisiones de Francisco:
 *   - SOLO modo claro. No hay modo oscuro (14/9).
 *   - Lo que se clickea se ve como boton, no como link subrayado (14/9).
 *   - Pocos botones y chicos (14/9, tarde): editar y borrar van en los tres puntitos,
 *     las acciones de los encabezados son "fantasmas" (sin borde).
 *
 * Reglas para tocar esto sin desarmarlo:
 *   - Los colores se usan SOLO por variable (--...). Nada de hex sueltos abajo.
 *   - Espaciados de la escala: 4, 8, 12, 16, 20, 24, 32, 48 px.
 *   - Sin fuentes ni librerias de afuera.
 *   - La hoja se sirve con ?v=<huella> (main.py): Cloudflare la guarda 4 horas,
 *     y sin eso la gente veia la version vieja despues de cada cambio.
 */

:root {
  color-scheme: light;

  --verde-noche: #0d2410;
  --verde-oscuro: #123016;
  --verde: #156733;
  --verde-hover: #10552a;
  --verde-vivo: #5cc281;
  --verde-claro: #e6f2e8;
  --verde-fondo: #f4f8f4;

  --coral: #e96c3c;
  --coral-hover: #d85a2b;
  --coral-suave: #fde9df;

  --superficie: #ffffff;
  --superficie-2: #f7faf7;
  --borde: #dde6de;
  --borde-fuerte: #c3d0c5;
  --borde-rojo: #efc3bf;
  --texto: #132019;
  --texto-2: #4f5e55;
  --texto-3: #7a877e;
  --blanco: #ffffff;
  --blanco-78: rgba(255, 255, 255, 0.78);
  --blanco-18: rgba(255, 255, 255, 0.18);
  --blanco-09: rgba(255, 255, 255, 0.09);

  --rojo: #b42318;
  --rojo-hover: #951c13;
  --rojo-suave: #fdecea;
  --ambar: #8f5b00;
  --ambar-suave: #fdf1d8;
  --naranja-vivo: #f59e0b;
  --rojo-vivo: #ef4444;

  --radio: 10px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(18, 48, 22, 0.05), 0 1px 3px rgba(18, 48, 22, 0.04);
  --sombra-alta: 0 10px 30px rgba(18, 48, 22, 0.14);
  --foco: 0 0 0 3px rgba(21, 103, 51, 0.25);
  /* El cuadradito de cada canal en el costado de Mensajes (bandeja unica). */
  --red-instagram: #c13584;
  --red-facebook: #1877f2;
  --red-mercadolibre: #e6b800;
  --red-whatsapp: #1f9e55;
  --charla: #1d4f91;
  --charla-suave: #e7eef8;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--verde-fondo);
  color: var(--texto);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); text-decoration: none; }

h1, h2, h3 { color: var(--texto); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 650; }
p { margin: 0; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 0 5px;
}

svg.icono { width: 16px; height: 16px; flex: none; }

.oculto { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-3); }
.chico { font-size: 13px; }

:focus-visible { outline: none; box-shadow: var(--foco); }

/* ------------------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: var(--radio);
  border: 1px solid var(--verde);
  background: var(--verde);
  color: var(--blanco);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.boton:hover { background: var(--verde-hover); border-color: var(--verde-hover); }
.boton:active { transform: translateY(1px); }

.boton-coral { background: var(--coral); border-color: var(--coral); }
.boton-coral:hover { background: var(--coral-hover); border-color: var(--coral-hover); }

.boton-secundario { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--verde); }
.boton-secundario:hover { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-hover); }

.boton-peligro { background: var(--superficie); border-color: var(--borde-rojo); color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo-suave); border-color: var(--rojo); color: var(--rojo-hover); }

.boton-peligro-lleno { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.boton-peligro-lleno:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); }

/* Fantasma: sin borde ni fondo hasta pasar por arriba. Para las acciones de
   los encabezados de panel ("Ver todos", "Agregar"), que no tienen por que
   competir con el contenido. */
.boton-fantasma { background: transparent; border-color: transparent; color: var(--verde); }
.boton-fantasma:hover { background: var(--verde-claro); border-color: transparent; color: var(--verde-hover); }

.boton-chico { height: 32px; padding: 0 12px; font-size: 13px; }
.boton-mini { height: 28px; padding: 0 9px; font-size: 12.5px; gap: 5px; border-radius: var(--radio-chico); }

/* Redondo, solo con icono (el "hecho" de los pendientes en Inicio). */
.boton-icono {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.boton-icono:hover { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }
.boton-icono svg.icono { width: 15px; height: 15px; }
.boton-mini svg.icono { width: 14px; height: 14px; }
.boton-ancho { width: 100%; }

.botones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.botones form { margin: 0; }

/* ------------------------------------------------------------------ barra superior */

.barra {
  background: var(--verde-oscuro);
  position: sticky;
  top: 0;
  z-index: 10;
}

.barra-interior {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* El logo de la inmobiliaria (14/9/2026). Va sobre una ficha blanca porque
   el dibujo tiene partes blancas: sobre el verde oscuro de la barra se perderian. */
.marca { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.marca-ficha {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.marca-logo { width: 30px; height: 30px; }
.marca-nombre { font-weight: 650; font-size: 16px; color: var(--blanco); letter-spacing: -0.005em; }

.nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radio);
  color: var(--blanco-78);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav a:hover { background: var(--blanco-09); color: var(--blanco); }
.nav a[aria-current="page"] { background: var(--verde); color: var(--blanco); }

.contador {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--verde-claro);
  color: var(--verde);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.nav .contador { background: var(--blanco-18); color: var(--blanco); }
.nav .contador.alerta, .contador.alerta { background: var(--coral); color: var(--blanco); }

/* La bolita "Estado" de la barra (4/10/2026): reemplaza la tarjeta del Inicio.
   Colores vivos porque va sobre el verde oscuro (los de las tarjetas se pierden). */
.estado-barra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 20px;
  border: 1px solid var(--blanco-18);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.estado-barra:hover, .estado-barra[aria-current="page"] { background: var(--blanco-09); color: var(--blanco); }
.estado-bolita { width: 11px; height: 11px; border-radius: 50%; background: var(--blanco-78); flex: none; }
.estado-barra-ok .estado-bolita { background: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(92, 194, 129, 0.25); }
.estado-barra-alerta .estado-bolita { background: var(--naranja-vivo); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28); }
.estado-barra-error .estado-bolita { background: var(--rojo-vivo); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); }

.menu-usuario { position: relative; }
.menu-usuario > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 5px;
  border-radius: 20px;
  border: 1px solid var(--blanco-18);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 600;
}
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover { background: var(--blanco-09); }
.menu-usuario-flecha { width: 14px; height: 14px; opacity: 0.7; }
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex: none;
}
.avatar-verde { background: var(--verde-claro); color: var(--verde); }
.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 230px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 8px;
  display: grid;
  gap: 6px;
}
.menu-usuario-quien { padding: 4px 6px 8px; font-size: 13px; color: var(--texto-3); border-bottom: 1px solid var(--borde); margin-bottom: 2px; }
.menu-lista form { margin: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item svg.icono { color: var(--texto-3); }
.menu-item:hover { background: var(--verde-claro); color: var(--verde-hover); }
.menu-item:hover svg.icono { color: var(--verde); }
.menu-item-peligro, .menu-item-peligro svg.icono { color: var(--rojo); }
.menu-item-peligro:hover { background: var(--rojo-suave); color: var(--rojo-hover); }
.menu-item-peligro:hover svg.icono { color: var(--rojo); }

/* Tres puntitos: editar y borrar escondidos hasta que se tocan. */
.menu-puntos { position: relative; flex: none; margin-left: auto; }
.menu-puntos > summary { list-style: none; }
.menu-puntos > summary::-webkit-details-marker { display: none; }
.boton-puntos {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.boton-puntos:hover, .menu-puntos[open] > .boton-puntos { background: var(--superficie-2); color: var(--texto); }
.menu-puntos .menu-lista { top: calc(100% + 4px); min-width: 160px; }

/* ------------------------------------------------------------------ pagina */

.hoja { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
.hoja-angosta { max-width: 660px; }

.cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cabecera .bajada { color: var(--texto-2); margin-top: 6px; font-size: 15px; }
.cabecera-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.volver { margin-bottom: 16px; }

.columnas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.pila { display: grid; gap: 24px; min-width: 0; }

/* ------------------------------------------------------------------ paneles y filas */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  min-width: 0;
}
.panel-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  min-height: 62px;
  border-bottom: 1px solid var(--borde);
}
.panel-cuerpo { padding: 20px; }
.panel-pie {
  padding: 14px 20px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-3);
  background: var(--superficie-2);
  border-radius: 0 0 14px 14px;
}

.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--borde);
}
.filas > .fila:first-child { border-top: 0; }
.fila-principal { flex: 1; min-width: 0; }
.fila-titulo { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.fila-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--texto-3);
}
.fila-acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.fila-acciones form { margin: 0; }
.fila-envuelve { flex-wrap: wrap; }
.fila.cerrada .fila-titulo { color: var(--texto-3); text-decoration: line-through; font-weight: 500; }

.vacio { padding: 36px 20px; text-align: center; color: var(--texto-3); font-size: 14px; }
.vacio strong { display: block; color: var(--texto-2); font-weight: 650; margin-bottom: 4px; font-size: 15px; }
.vacio .botones { justify-content: center; margin-top: 14px; }

/* ------------------------------------------------------------------ herramientas (inicio) */

.herramientas {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.herramienta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.herramienta:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.herramienta-cabeza { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
/* La foto de una herramienta o link; sin foto, la inicial. */
.ficha {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--blanco);
  border: 1px solid var(--borde);
}
.ficha-letra {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: var(--verde-vivo);
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.ficha-chica { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
/* Icono de herramienta cuando no tiene imagen (1/10/2026). */
.ficha-icono {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: var(--verde-vivo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ficha-icono .icono { width: 22px; height: 22px; }
.ficha-chica.ficha-icono .icono { width: 16px; height: 16px; }
.nav a svg.icono { width: 15px; height: 15px; opacity: .85; }
.ficha-grande { width: 64px; height: 64px; border-radius: 14px; font-size: 24px; }
.herramienta-texto { flex: 1; min-width: 0; }
.herramienta-titulo { font-weight: 650; color: var(--texto); line-height: 1.3; }
.herramienta-dominio { font-size: 12px; color: var(--texto-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herramienta-desc {
  font-size: 13px;
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.herramienta .botones { margin-top: auto; }

/* ------------------------------------------------------------------ links a mano (inicio) */

.links {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.link { display: flex; align-items: center; gap: 2px; border-radius: 10px; min-width: 0; padding-right: 4px; }
.link:hover { background: var(--superficie-2); }
.link-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--texto); }
.link-texto { min-width: 0; display: grid; }
.link-titulo { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-abrir:hover .link-titulo { color: var(--verde); }
.link-dominio { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ agenda (inicio) */

.agenda { padding: 4px 0 8px; }
.agenda-dia { padding: 12px 20px 4px; }
.agenda-dia + .agenda-dia { border-top: 1px solid var(--borde); }
.agenda-dia-nombre { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--verde); margin-bottom: 8px; }
.agenda-eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agenda-evento { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.agenda-hora { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.en-curso .agenda-hora { color: var(--coral); font-weight: 700; }
.agenda-que { display: grid; min-width: 0; font-size: 14px; }
.agenda-que a, .agenda-titulo { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.agenda-que a:hover { color: var(--verde); text-decoration: underline; }
.agenda-lugar { font-size: 12px; color: var(--texto-3); margin-top: 1px; }
.agenda-mas { padding: 8px 20px 4px; font-size: 13px; color: var(--texto-3); }

/* El pie de los avisos cambia segun el permiso del navegador (avisos.js). Sin
   JavaScript, o en un navegador sin avisos, no se muestra nada. */
.avisos { display: none; }
.avisos[data-estado="default"], .avisos[data-estado="granted"], .avisos[data-estado="denied"] { display: block; }
.avisos > span { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.avisos[data-estado="granted"] .avisos-si,
.avisos[data-estado="default"] .avisos-preguntar,
.avisos[data-estado="denied"] .avisos-no { display: flex; }

.fila-compacta { padding-top: 12px; padding-bottom: 12px; }

/* ------------------------------------------------------------------ formularios */

.form { display: grid; gap: 16px; }
.form-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span:not(.ayuda) { font-size: 13px; font-weight: 650; color: var(--texto-2); }
.campo .opcional { font-weight: 400; color: var(--texto-3); }
.ayuda { font-size: 12px; color: var(--texto-3); }

input[type="text"], input[type="password"], input[type="date"], input[type="url"], input[type="search"], input:not([type]), select, textarea {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}
textarea { height: auto; padding: 10px 12px; }
input::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde); box-shadow: var(--foco); }

fieldset.campo { border: 0; margin: 0; padding: 0; }
.campo legend { font-size: 13px; font-weight: 650; color: var(--texto-2); padding: 0; margin-bottom: 6px; }
.elegir { display: grid; gap: 8px; }
.opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.opcion input { margin: 3px 0 0; accent-color: var(--verde); }
.opcion > span { display: grid; gap: 2px; font-size: 14px; }
.elegir-foto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.elegir-foto-acciones { display: grid; gap: 8px; justify-items: start; }
/* El input de archivo real queda invisible adentro de un boton: el nativo es feo
   y dice "Ningun archivo seleccionado" en ingles segun el navegador. */
.archivo-escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.boton { position: relative; }
label.boton:focus-within { box-shadow: var(--foco); }

.tilde { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); cursor: pointer; }
.tilde input { width: 18px; height: 18px; accent-color: var(--verde); }

.buscador { position: relative; width: 240px; max-width: 100%; }
.buscador input { height: 34px; padding-left: 34px; font-size: 13px; }
.buscador svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--texto-3); pointer-events: none; }
.buscador-grande { width: 320px; }
.buscador-grande input { height: 42px; font-size: 14px; }

/* ------------------------------------------------------------------ avisos y etiquetas */

.aviso {
  padding: 14px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 14px;
  margin-bottom: 20px;
}
.aviso strong { font-weight: 650; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso-error { background: var(--rojo-suave); border-color: var(--borde-rojo); color: var(--rojo); }
.aviso-ok { background: var(--verde-claro); border-color: var(--borde-fuerte); color: var(--verde); }
.aviso-alerta { background: var(--ambar-suave); border-color: var(--ambar-suave); color: var(--ambar); }
.aviso-en-panel { margin: 16px 20px 0; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 650;
  background: var(--verde-claro);
  color: var(--verde);
  white-space: nowrap;
}
.etiqueta-roja { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta-ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta-coral { background: var(--coral-suave); color: var(--coral-hover); }
.etiqueta-gris { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }

.texto-rojo { color: var(--rojo); }
.texto-ambar { color: var(--ambar); }
.texto-verde { color: var(--verde); }

/* ------------------------------------------------------------------ pestañas (filtros) */

.pestanas {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--verde-fondo);
  border: 1px solid var(--borde);
  border-radius: 12px;
  flex-wrap: wrap;
}
.pestanas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 650;
}
.pestanas a:hover { background: var(--superficie); color: var(--texto); }
.pestanas a[aria-current="page"] { background: var(--verde); color: var(--blanco); }
.pestanas a[aria-current="page"] .contador { background: var(--blanco-18); color: var(--blanco); }

/* ------------------------------------------------------------------ resumen de etapas */

.etapas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; padding: 16px 20px; }
.etapa-resumen {
  display: block;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.etapa-resumen:hover { border-color: var(--verde); background: var(--verde-claro); }
.etapa-numero { font-size: 28px; font-weight: 750; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--verde-oscuro); }
.etapa-nombre { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.etapa-alerta { font-size: 12px; color: var(--coral-hover); font-weight: 650; margin-top: 4px; }
.etapas-panel { margin-bottom: 24px; }

/* ------------------------------------------------------------------ textos largos (privacidad, alta de WhatsApp) */

.texto-largo { max-width: 72ch; line-height: 1.6; color: var(--texto-2); }
.texto-largo h2 { margin: 22px 0 6px; font-size: 16px; color: var(--texto); }
.texto-largo h2:first-child { margin-top: 0; }
.texto-largo ul { padding-left: 20px; display: grid; gap: 6px; }
.texto-chico { font-size: 13px; color: var(--texto-3); margin-top: 12px; }
.pasos { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 18px; color: var(--texto-2); line-height: 1.5; }
.detalle-tecnico { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--texto-2); }

/* ------------------------------------------------------------------ mensajes de WhatsApp (doc 28) */

/* El cartel de estado de la conexion. El color va SOLO en el punto y en el
   borde: el texto sigue siendo texto normal, que se lee igual con cualquier color. */
.conexion { margin-bottom: 24px; border-left: 4px solid var(--borde-fuerte); }
.conexion-cuerpo { display: flex; align-items: center; gap: 14px; padding: 14px 20px; flex-wrap: wrap; }
.conexion-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-3); flex: none; }
.conexion-texto { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.conexion-texto span { font-size: 13px; color: var(--texto-2); }
.conexion-ok { border-left-color: var(--verde); }
.conexion-ok .conexion-punto { background: var(--verde); }
.conexion-alerta { border-left-color: var(--ambar); }
.conexion-alerta .conexion-punto { background: var(--ambar); }
.conexion-error { border-left-color: var(--rojo); }
.conexion-error .conexion-punto { background: var(--rojo); }

/* Reusa las tarjetas del resumen de etapas; solo suma la barrita y el detalle. */
.mensajes-tablero { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.etapa-resumen.elegida { border-color: var(--verde); background: var(--verde-claro); }
.mensajes-barra { height: 4px; border-radius: 2px; background: var(--borde); margin-top: 10px; overflow: hidden; }
.mensajes-barra span { display: block; height: 100%; border-radius: 2px; background: var(--verde); }
.mensajes-detalle { font-size: 12px; color: var(--texto-3); margin-top: 6px; font-variant-numeric: tabular-nums; }

.falta-lista { margin-top: 8px; font-size: 13px; color: var(--texto-2); display: grid; gap: 2px; }
.falta-lista .texto-rojo, .falta-lista .texto-ambar { font-weight: 650; }

.movimiento-cuando { min-width: 92px; }

/* ------------------------------------------------------------------ entrar */

.entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); }
.entrar-marca {
  background: var(--verde-oscuro);
  color: var(--blanco);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.marca-grande { gap: 14px; }
.marca-grande .marca-ficha { width: 48px; height: 48px; border-radius: 12px; }
.marca-grande .marca-logo { width: 38px; height: 38px; }
.marca-grande .marca-nombre { font-size: 20px; }
.entrar-lema { font-size: 34px; font-weight: 700; line-height: 1.18; max-width: 480px; letter-spacing: -0.02em; }
.entrar-lema span { color: var(--coral); }
.entrar-pie { font-size: 13px; color: var(--blanco-78); }
.entrar-formulario { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--superficie); }
.entrar-caja { width: 100%; max-width: 360px; }
.entrar-caja .bajada { color: var(--texto-2); font-size: 15px; margin: 6px 0 28px; }
.entrar-caja .boton { width: 100%; height: 46px; font-size: 15px; }
.entrar-ayuda { margin-top: 24px; font-size: 13px; color: var(--texto-3); }

/* ------------------------------------------------------------------ cuentas */

.cuenta-acciones { flex-basis: 100%; padding-left: 44px; }
.cuenta-acciones > summary { list-style: none; display: inline-flex; }
.cuenta-acciones > summary::-webkit-details-marker { display: none; }
.cuenta-acciones form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cuenta-acciones input { flex: 1; min-width: 200px; height: 34px; }

.con-aire { margin-top: 12px; }
.con-aire-chico { margin-top: 6px; }
.con-aire-grande { margin-top: 24px; }
.separado { margin-bottom: 24px; }
.separado-chico { margin-bottom: 16px; }

/* ------------------------------------------------------------------ configuracion (spec 005, solo el dueno) */

/* La etiqueta del tipo de cada permiso. Sensible y peligrosa resaltan: son
   las que conviene pensar dos veces antes de tildar. */
.permiso-tipo { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid var(--borde); }
.permiso-tipo-hacer { background: var(--verde-claro); color: var(--verde); border-color: var(--verde-claro); }
.permiso-tipo-sensible { background: var(--ambar-suave); color: var(--ambar); border-color: var(--ambar-suave); }
.permiso-tipo-peligrosa { background: var(--rojo-suave); color: var(--rojo); border-color: var(--borde-rojo); }
.config-leyenda { font-size: 12.5px; color: var(--texto-3); line-height: 2; }

.config-rango { display: flex; gap: 6px; align-items: center; }
.config-rango select { height: 32px; width: auto; min-width: 130px; font-size: 13px; }
.config-inactiva .fila-titulo { color: var(--texto-3); }

.config-apps { border-top: 1px solid var(--borde); }
.config-app { border-bottom: 1px solid var(--borde); }
.config-app > summary { display: flex; align-items: center; gap: 10px; padding: 12px 20px; cursor: pointer; font-size: 14px; }
.config-app > summary:hover { background: var(--superficie-2); }
.config-app-nombre { font-weight: 650; color: var(--texto); }
.config-acciones { list-style: none; margin: 0; padding: 0 12px 12px; }
.config-accion label { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radio-chico);
  cursor: pointer; font-size: 14px; }
.config-accion label:hover { background: var(--superficie-2); }
.config-accion input { width: 18px; height: 18px; flex: none; accent-color: var(--verde); }
.config-accion-nombre { flex: 1; min-width: 0; }
.config-accion-sensible label { background: var(--ambar-suave); }
.config-accion-peligrosa label { background: var(--rojo-suave); }
.config-accion-peligrosa input { accent-color: var(--rojo); }
.config-accion + .config-accion { margin-top: 2px; }
/* Con "Todas" marcado, las tildes no cuentan: se ven apagadas (siguen andando). */
.config-matriz.con-todo .config-apps { opacity: 0.45; }

.config-confirmar h3 { font-size: 15px; margin-bottom: 6px; }
.config-confirmar p + p { margin-top: 6px; }
.config-grupo { margin-top: 8px; font-size: 14px; }
.config-grupo ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.config-detalle { font-size: 13px; color: var(--texto-2); margin-top: 3px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ pantallas chicas */

@media (max-width: 980px) {
  .columnas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .barra-interior { gap: 10px; padding: 0 14px; height: 58px; }
  .barra-interior > * { min-width: 0; }
  .menu-usuario-nombre, .menu-usuario-flecha { display: none; }
  .barra .marca-nombre { font-size: 15px; }
  .menu-usuario > summary { padding: 0 4px; border: 0; }
  .estado-barra { height: 36px; padding: 0 10px; }
  .nav { overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .nav a { padding: 0 10px; height: 34px; font-size: 13px; }
  .hoja { padding: 24px 14px 48px; }
  h1 { font-size: 22px; }
  .panel-cabeza, .fila { padding-left: 14px; padding-right: 14px; }
  .herramientas { padding: 14px; }
  .fila { flex-wrap: wrap; }
  .fila-acciones { flex-basis: 100%; justify-content: flex-start; }
  .buscador { width: 100%; }
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar-marca { padding: 28px 24px; }
  .entrar-lema { font-size: 22px; }
  .cuenta-acciones { padding-left: 0; }
  .agenda-dia { padding-left: 14px; padding-right: 14px; }
  .links { padding: 8px; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .barra .marca-nombre { display: none; }
  /* Con "Mensajes" son tres items (21/9/2026): un poco mas apretados para que
     entren sin cortarse. Si igual no entran, la barra se desliza con el dedo. */
  .barra-interior { gap: 6px; }
  .nav { gap: 0; }
  .nav a { padding: 0 8px; gap: 6px; }
}

/* ---- Propiedades (18/9/2026) ----
   En Inicio, las etapas en 2 x 2: con "Por subir" son 4 y la cuarta caia sola
   a otra fila. */
.etapas-resumen-inicio { grid-template-columns: repeat(2, 1fr); }
/* "Datos faltantes": abajo de "Abrir carpeta", abre un recuadro con lo que falta. */
.fila-acciones-columna { flex-direction: column; align-items: flex-end; }
.faltantes { margin-left: 0; }
.faltantes > summary { cursor: pointer; }
.faltantes .menu-lista { min-width: 240px; max-width: 320px; gap: 2px; padding: 10px 14px; font-size: 13px; }
.faltantes-grupo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-3); margin-top: 4px; }
.faltantes-grupo.texto-rojo { color: var(--rojo); }
.faltantes-items { margin: 2px 0 6px; padding-left: 18px; }
.faltantes-items li { margin: 2px 0; }
.faltantes-items ul { margin: 2px 0; padding-left: 16px; color: var(--texto-2); }

/* ---- Publicar en redes (22/9/2026, doc 30) ---- */
.hoja-media { max-width: 860px; }
/* "Trabajando...": el punto late mientras el publicador hace lo suyo. */
.trabajando { display: flex; align-items: center; gap: 14px; }
.trabajando-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); flex: none; animation: latir 1.2s ease-in-out infinite; }
@keyframes latir { 50% { opacity: 0.25; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .trabajando-punto { animation: none; } }
.mensajes-redes { margin: 0; padding: 14px 20px 14px 38px; display: grid; gap: 6px; font-size: 14px; }
.panel-cuerpo .mensajes-redes { padding: 8px 0 0 18px; }
.dato-fijo { padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 14px; }
/* Las fotos de la vista previa: una grilla de miniaturas, cada una con "Va" y "Portada". */
.fotos-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin-top: 4px; }
.foto-elegir { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.foto-elegir:has(input[name="foto"]:not(:checked)) img { opacity: 0.35; }
/* Orden arrastrando (26/9/2026): la foto es la "manija"; el numero es su
   lugar en la publicacion y la primera tildada lleva "Portada". */
.foto-elegir.es-portada { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.foto-elegir:focus-visible { outline: none; box-shadow: var(--foco); }
.foto-arrastre { position: relative; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ordenando, .ordenando .foto-arrastre { cursor: grabbing; }
.foto-elegir.arrastrando { opacity: 0.55; border-style: dashed; border-color: var(--verde); }
.foto-numero:not(:empty) { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--verde-oscuro); color: var(--blanco); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.foto-portada { display: none; position: absolute; bottom: 6px; left: 6px; padding: 2px 8px; border-radius: 11px; background: var(--coral); color: var(--blanco); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--blanco); }
.foto-elegir.es-portada .foto-portada { display: block; }
.foto-elegir img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-chico); display: block; pointer-events: none; }
.foto-elegir .tilde { gap: 6px; }
.foto-elegir .tilde input { width: 16px; height: 16px; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
a.etiqueta:hover { background: var(--verde); color: var(--blanco); }

/* ---- Estado del sistema (22/9/2026, solo admin) ----
   La tarjeta de Inicio reusa el cartel de la conexion de WhatsApp (.conexion):
   solo le falta la raya que separa el cartel de la lista de lo que no anda. */
.sistema-problemas { border-top: 1px solid var(--borde); }

/* ---- Bandeja de redes (hub 0.10.0, doc 32) ----
   /mensajes: un cartel por red arriba (el mismo .conexion de WhatsApp, en
   grilla) y una sola lista con Instagram, Facebook, Mercado Libre y WhatsApp. */
.redes-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 24px; }
.redes-estado .conexion { margin-bottom: 0; }
.redes-estado .conexion-cuerpo { padding: 12px 14px; gap: 10px; align-items: flex-start; }
.redes-estado .conexion-punto { margin-top: 7px; }
/* Con poco ancho, el boton de WhatsApp (solo admin) baja abajo del texto en
   vez de apretarlo en una columnita. */
.redes-estado .conexion-texto { min-width: 140px; }
@media (max-width: 760px) {
  /* En el celular lo que importa es la lista: las redes que andan van de a
     dos y sin el "Leído hace..."; las que tienen un problema, a lo ancho. */
  .redes-estado { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px; margin-bottom: 16px; }
  .redes-estado .conexion-cuerpo { padding: 10px 12px; }
  .redes-estado .conexion-texto { min-width: 0; }
  .redes-estado .conexion-ok .conexion-texto span, .redes-estado .conexion-gris .conexion-texto span { display: none; }
  .redes-estado .conexion-alerta, .redes-estado .conexion-error { grid-column: 1 / -1; }
}
.bandeja-fila .fila-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Un interesado de ML lleva hasta cuatro botones (WhatsApp, Llamar, Ver aviso,
   Listo): en el celular bajan de renglon en vez de salirse de la pantalla. */
.bandeja-fila .fila-acciones { flex-wrap: wrap; max-width: 100%; }
/* Lo que escribio el cliente: texto comun, que se parte donde haga falta
   (una direccion larga no rompe la pantalla del celular). Nunca es un link. */
.bandeja-texto { margin-top: 3px; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.bandeja-apagada .fila-titulo, .bandeja-apagada .bandeja-texto { color: var(--texto-3); font-weight: 500; }
/* "[foto, audio o adjunto]": lo pone el hub cuando la charla llega sin texto.
   Gris y en cursiva para que NO se confunda con algo que escribio el cliente. */
.bandeja-texto.bandeja-adjunto { color: var(--texto-3); font-style: italic; }
/* El telefono de un interesado de ML, bien grande para copiarlo (doc 32, pregunta 3). */
.bandeja-telefono { font-size: 16px; font-weight: 700; color: var(--texto); user-select: all; }
.bandeja-oficina { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ambar); }
/* Al volver de "Listo", la pagina cae en el renglon que sigue (#r-...) o en
   su bloque. Sin este margen, lo tapa la barra de arriba, que es fija (64 px;
   58 en el celular). */
.bandeja-fila, .bandeja-sub, #lista { scroll-margin-top: 76px; }

/* ------------------------------------------------------------------ bandeja unica (etapa 1, hub 0.17.0)
   Costado tipo Gmail + la lista. En el celular el costado queda arriba, en
   tiras que se corren con el dedo (la lista es lo que importa). */
.bandeja-unica { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.bandeja-unica.bandeja-sin-costado { grid-template-columns: minmax(0, 1fr); }
.bandeja-costado { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; }
.costado-titulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin: 14px 12px 4px; }
.costado-titulo:first-child { margin-top: 0; }
.costado-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 0 999px 999px 0; color: var(--texto-2); font-weight: 550; font-size: 14px; text-decoration: none; min-width: 0; }
.costado-item:hover { background: var(--verde-claro); color: var(--texto); }
.costado-item[aria-current="page"] { background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.costado-fuerte { color: var(--texto); font-weight: 700; }
.costado-n { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.costado-n b { color: var(--coral-hover); }
.costado-n.alerta { color: var(--coral-hover); }
.costado-item[aria-current="page"] .costado-n { color: var(--verde); }
.costado-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.costado-red { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.costado-red-instagram { background: var(--red-instagram); }
.costado-red-facebook { background: var(--red-facebook); }
.costado-red-mercadolibre { background: var(--red-mercadolibre); }
.costado-red-whatsapp { background: var(--red-whatsapp); }
.costado-nota { margin: 8px 12px 0; }
.bandeja-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bandeja-cabeza h2 { margin: 0; }
.bandeja-buscar { display: flex; gap: 6px; flex: 1; min-width: 220px; max-width: 520px; margin: 0 0 0 auto; }
.bandeja-buscar input[type="search"] { flex: 1; min-width: 0; height: 34px; }
.bandeja-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px 0; }
.bandeja-filtros a.etiqueta { text-decoration: none; }
.etiqueta-contestado { background: var(--verde-claro); color: var(--verde); }
.etiqueta-charla { background: var(--charla-suave); color: var(--charla); }
a.bandeja-prop { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.bandeja-prop:hover { color: var(--verde); }
/* "¿De que propiedad es este aviso?" (etapa 5): plegado, para no ensuciar la fila. */
.bandeja-vincular { margin-top: 6px; font-size: 13px; }
/* Tickets (bandeja unica, etapa 4) */
.bandeja-ticket { font-size: 12px; color: var(--texto-2); text-decoration: none; margin: 0 4px; }
.bandeja-ticket:hover { text-decoration: underline; }
.ticket-hilo { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.ticket-msj { max-width: 80%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--borde); overflow-wrap: anywhere; white-space: pre-wrap; }
.ticket-cliente { align-self: flex-start; }
.ticket-nosotros { align-self: flex-end; background: var(--superficie-2, transparent); }
.bandeja-vincular summary { cursor: pointer; color: var(--texto-2); font-weight: 600; width: fit-content; }
.bandeja-vincular form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.bandeja-vincular select { max-width: 100%; min-width: 0; height: 30px; }
.texto-coral { color: var(--coral-hover); }

/* ------------------------------------------------------------------ estadisticas de una propiedad (etapa 5)
   Cuatro cifras arriba, despues un grafico de barras por fuente (cada uno con
   su escala: nunca dos escalas en un mismo eje), barras finas con la punta
   redondeada, una sola tinta (la marca) y el numero de cada dia al pasar el
   mouse y en la tabla de abajo. Solo modo claro, como todo el hub. */
.estad-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.estad-numero { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.estad-valor { font-size: 28px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--texto); }
.estad-nombre { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.estad-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.estad-barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--borde-fuerte); }
.estad-barra { flex: 1; min-width: 0; height: var(--alto); background: var(--verde); border-radius: 4px 4px 0 0; }
.estad-barra:hover { background: var(--verde-hover); }
.estad-eje { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.estad-tabla { margin-top: 10px; }
.estad-tabla summary { cursor: pointer; color: var(--texto-2); }
.estad-tabla table, .estad-canales { width: 100%; border-collapse: collapse; font-size: 13px; }
.estad-tabla td, .estad-tabla th, .estad-canales td, .estad-canales th { padding: 6px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.estad-canales th, .estad-tabla th { color: var(--texto-3); font-weight: 600; font-size: 12px; }
.estad-canales td.num, .estad-canales th.num, .estad-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.estad-canales td:first-child, .estad-canales th:first-child { padding-left: 20px; }
@media (max-width: 760px) {
  .estad-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estad-dos { grid-template-columns: minmax(0, 1fr); }
  .estad-canales { font-size: 12px; }
  .estad-canales td, .estad-canales th { padding: 6px 4px; }
  .estad-canales td:first-child, .estad-canales th:first-child { padding-left: 12px; }
}
@media (max-width: 860px) {
  .bandeja-unica { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bandeja-costado { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
                     gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
  .costado-titulo, .costado-nota { display: none; }
  .costado-item { flex: none; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); padding: 5px 12px; }
  .costado-corta { max-width: 160px; }
  .bandeja-buscar { margin: 0; max-width: none; }
}
/* "Hay 12 más de antes: ver todo Mercado Libre", debajo de un bloque aparte. */
.bandeja-mas { padding: 10px 20px; border-top: 1px solid var(--borde); font-size: 13px; }
/* La caja "Responder" (doc 37, hub 0.16.0): solo el admin, solapa Instagram.
   Ocupa todo el ancho del renglon, debajo del texto y los botones. */
.bandeja-fila:has(.responder) { flex-wrap: wrap; }
.responder { flex-basis: 100%; display: grid; gap: 8px; }
.responder-caja { display: grid; gap: 6px; margin: 0; }
.responder-etiqueta { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.responder-caja textarea { min-height: 64px; resize: vertical; font-size: 15px; }
.responder-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.responder-estado { padding: 8px 12px; border-radius: var(--radio-chico); font-size: 14px; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.responder-estado[data-estado="ok"], .responder-ok { background: var(--verde-claro); color: var(--verde); border-color: var(--verde-claro); }
.responder-estado[data-estado="error"], .responder-error { background: var(--rojo-suave); color: var(--rojo); border-color: var(--borde-rojo); }
.responder-estado[data-estado="no_se_sabe"], .responder-no_se_sabe { background: var(--ambar-suave); color: var(--ambar); border-color: var(--ambar-suave); }
/* El selector de cuenta, arriba de la lista (lo que pide Meta: la cuenta elegida, a la vista). */
.responder-cuenta-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; margin-bottom: 16px; }
.responder-selector { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; max-width: 100%; min-width: 0; }
.responder-selector select { width: auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.responder-cuenta-panel .aviso { flex-basis: 100%; margin: 0; }
.bandeja-sub {
  padding: 10px 20px;
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-3);
}
/* ig.me/m/usuario abre el chat en la app de Instagram del celular, pero no anda
   en Instagram web (lo dice Meta): en la compu el boton va a la bandeja. Se
   decide por la pantalla (tactil sin mouse = celular), sin JavaScript. */
.boton.solo-celular { display: none; }
@media (hover: none) and (pointer: coarse) {
  .boton.solo-celular { display: inline-flex; }
  .boton.solo-compu { display: none; }
}

/* ---- El ciclo de cada propiedad (hub 0.12.0) ----
   Debajo de lo que falta: donde esta publicada, desde cuando y que quedo
   desactualizado. Letra chica, como .falta-lista: es para leer, no para tocar. */
.ciclo { margin-top: 8px; font-size: 13px; color: var(--texto-2); display: grid; gap: 4px; }
.sitios { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.sitios li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sitios li > div { flex-basis: 100%; }
.sitio-nombre { font-weight: 600; color: var(--texto); min-width: 96px; }
/* El registro: los datos de la ficha en dos columnas (una en el celular). */
.datos-ficha { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 14px; }
.datos-ficha dt { color: var(--texto-3); }
.datos-ficha dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 640px) {
  .datos-ficha { grid-template-columns: 1fr; gap: 2px; }
  .datos-ficha dd { margin-bottom: 8px; }
}

/* ---- Carga propia (doc 38, etapa 2, hub 0.13.0) ----
   La pantalla del prototipo aprobado (una columna para el pulgar, lo basico,
   el precio y las fotos abiertos, lo demas plegado, chips en vez de listas
   desplegables, - / + para las cantidades y la barra de abajo con el boton
   que importa), con los colores y botones del hub. Lo cambiado en Modificar
   va en naranja (el coral del hub). */
:root {
  /* Velo oscuro sobre la foto, para que se lean los botones blancos encima. */
  --velo-foto: rgba(13, 36, 16, 0.62);
  --velo-hoja: rgba(13, 36, 16, 0.45);
}
.carga-arriba { margin-top: 12px; }
.carga-arriba-grande { margin-top: 24px; }
.texto-naranja { color: var(--coral-hover); font-weight: 600; }

/* El inicio: las dos puertas grandes y la lista chica. */
.carga-grandes { display: grid; gap: 10px; }
.carga-solo-nombre { display: grid; gap: 8px; padding: 14px 16px; background: var(--superficie); border: 1px dashed var(--borde); border-radius: 14px; }
.carga-solo-nombre label { color: var(--texto); }
.carga-solo-nombre-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.carga-solo-nombre-fila input { flex: 1 1 220px; min-width: 0; }
.carga-grande { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 76px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); color: var(--texto); }
.carga-grande:hover { border-color: var(--verde); }
.carga-grande b { display: block; font-size: 16px; }
.carga-grande span span { color: var(--texto-3); font-size: 13px; }
.carga-grande-letra { flex: none; width: 44px; height: 44px; border-radius: var(--radio); display: grid; place-items: center; background: var(--verde-claro); color: var(--verde); font-size: 18px; font-weight: 700; }
.carga-borrador { display: block; color: var(--ambar); margin: 0; }
.carga-cargada-foto { flex: none; width: 56px; height: 42px; border-radius: var(--radio-chico); object-fit: cover; background: var(--superficie-2); }
.carga-cargada-sin { display: grid; place-items: center; color: var(--texto-3); border: 1px solid var(--borde); }

/* La pantalla: espacio abajo para la barra fija. */
.hoja-carga { padding-bottom: 120px; }
.carga { display: grid; gap: 10px; }
.carga-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.carga-seg button { border: 0; background: none; padding: 10px; border-radius: var(--radio-chico); font: inherit; font-weight: 650; color: var(--texto-2); cursor: pointer; min-height: 44px; }
.carga-seg button[aria-pressed="true"] { background: var(--verde); color: var(--blanco); }

.carga-bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.carga-bloque > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 16px; font-weight: 650; cursor: pointer; min-height: 52px; }
.carga-bloque > summary::-webkit-details-marker { display: none; }
.carga-bloque > summary::after { content: "›"; transform: rotate(90deg); transition: transform 0.15s; color: var(--texto-3); font-size: 20px; line-height: 1; }
.carga-bloque[open] > summary::after { transform: rotate(-90deg); }
.carga-cuenta { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--texto-3); }
.carga-bloque-cuerpo { padding: 4px 16px 18px; }
.carga-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.carga-campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.carga-campo.ancho { grid-column: 1 / -1; }
.carga-etiqueta { font-size: 13px; font-weight: 650; color: var(--texto-2); }
.carga-requerido { color: var(--coral-hover); }
.carga-privado { font-size: 11px; font-weight: 600; color: var(--texto-3); border: 1px solid var(--borde); border-radius: 8px; padding: 0 5px; margin-left: 4px; }
.carga-campo input, .carga-campo textarea { height: 46px; font-size: 16px; }
.carga-campo textarea { height: auto; min-height: 88px; resize: vertical; }
.carga-campo input[type="email"], .carga-campo input[type="tel"], .carga-campo input[inputmode] { width: 100%; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; font-size: 16px; }
.carga-campo input:focus, .carga-campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: var(--foco); }
/* Lo cambiado en Modificar: en naranja, igual que en el prototipo. */
.carga-campo.cambiado input, .carga-campo.cambiado textarea, .carga-campo.cambiado .carga-chips, .carga-campo.cambiado .carga-paso { box-shadow: 0 0 0 2px var(--coral); border-radius: var(--radio); }
.carga-campo.cambiado .carga-etiqueta::after { content: " · cambiado"; color: var(--coral-hover); font-weight: 600; }

.carga-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.carga-chip { border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); padding: 8px 13px; border-radius: 99px; font: inherit; font-size: 14px; min-height: 40px; cursor: pointer; }
.carga-chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--blanco); font-weight: 650; }
.carga-otro { margin-top: 4px; }
.carga-paso { display: flex; align-items: stretch; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; background: var(--superficie); min-height: 46px; }
.carga-paso button { flex: none; width: 46px; border: 0; background: var(--superficie-2); color: var(--verde); font-size: 20px; cursor: pointer; }
.carga-paso button:active { background: var(--verde-claro); }
.carga-campo .carga-paso input { border: 0; border-radius: 0; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; height: auto; min-width: 0; padding: 0 4px; }
.carga-campo .carga-paso input:focus { box-shadow: none; }
.carga-plata { display: flex; gap: 8px; align-items: center; }
.carga-plata .carga-chips { flex: none; flex-wrap: nowrap; }
.carga-plata input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.carga-signo { flex: none; color: var(--texto-3); font-weight: 650; }

/* Fotos: grilla de miniaturas cuadradas con numero, "Portada" y flechas. */
.carga-sumar { display: grid; gap: 8px; justify-items: start; padding: 12px; border: 2px dashed var(--borde-fuerte); border-radius: 12px; margin-bottom: 12px; }
.carga-sumar.encima { border-color: var(--verde); background: var(--verde-claro); }
.carga-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.carga-foto { position: relative; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--borde); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.carga-foto:focus-visible { outline: none; box-shadow: var(--foco); }
.carga-foto.es-portada { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.carga-foto.arrastrando { opacity: 0.55; border-style: dashed; border-color: var(--verde); }
.ordenando, .ordenando .carga-foto { cursor: grabbing; }
.carga-foto-imagen { display: block; width: 100%; height: 100%; }
.carga-foto img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.carga-foto-sin { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: 12px; color: var(--texto-3); }
.carga-foto-numero { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--verde-oscuro); color: var(--blanco); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.carga-foto-portada { display: none; position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 11px; background: var(--coral); color: var(--blanco); font-size: 11px; font-weight: 700; }
.carga-foto.es-portada .carga-foto-portada { display: block; }
.carga-foto-chica { position: absolute; left: 6px; top: 32px; padding: 1px 6px; border-radius: 8px; background: var(--ambar-suave); color: var(--ambar); font-size: 11px; font-weight: 700; }
.carga-foto-estado { position: absolute; left: 6px; bottom: 40px; padding: 1px 6px; border-radius: 8px; background: var(--superficie); color: var(--texto-2); font-size: 11px; font-weight: 700; }
.carga-foto-estado.nueva { background: var(--verde-claro); color: var(--verde); }
.carga-foto-estado.error { background: var(--rojo-suave); color: var(--rojo); }
.carga-foto-ctl { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; background: linear-gradient(transparent, var(--velo-foto)); }
.carga-foto-ctl button { border: 0; background: none; color: var(--blanco); font-size: 18px; min-width: 36px; min-height: 36px; cursor: pointer; }
.carga-errores { grid-column: 1 / -1; margin: 4px 0 0; }

/* Documentos */
.carga-docs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.carga-doc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 14px; }
.carga-doc > span { min-width: 0; overflow-wrap: anywhere; }

/* La barra de abajo (fija), con el progreso y el boton que importa. */
.carga-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: var(--sombra-alta); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.carga-barra-interior { max-width: 660px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.carga-progreso { flex: 1; min-width: 0; }
.carga-progreso-texto { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carga-progreso-riel { height: 6px; border-radius: 3px; background: var(--borde); margin-top: 6px; overflow: hidden; }
.carga-progreso-riel i { display: block; height: 100%; width: 0; background: var(--verde); transition: width 0.25s; }
.carga-boton { height: 48px; padding: 0 20px; font-size: 15px; }

/* La hoja que sube desde abajo: el resumen antes de guardar, el 409, "Listo". */
.carga-hoja { position: fixed; inset: 0; z-index: 50; background: var(--velo-hoja); display: flex; align-items: flex-end; justify-content: center; }
.carga-hoja-caja { background: var(--superficie); width: 100%; max-width: 660px; border-radius: 18px 18px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 85vh; overflow: auto; box-shadow: var(--sombra-alta); }
.carga-hoja-caja h2 { font-size: 19px; margin-bottom: 8px; }
.carga-hoja-cuerpo { display: grid; gap: 8px; font-size: 14px; }
.carga-hoja-cuerpo ul { margin: 0; padding-left: 18px; }
.carga-hoja-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.carga-hoja-botones .boton { flex: 1 1 140px; height: 46px; }
.carga-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; background: var(--verde-noche); color: var(--blanco); padding: 10px 16px; border-radius: var(--radio); font-size: 14px; max-width: calc(100% - 32px); box-shadow: var(--sombra-alta); }

/* La carpeta */
.carga-subtitulo { font-size: 14px; font-weight: 650; color: var(--texto-2); margin: 16px 0 4px; }
.carga-subtitulo:first-child { margin-top: 0; }
.carga-historial-texto { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .carga-campos { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .carga-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carga-boton { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .carga-bloque > summary::after, .carga-progreso-riel i { transition: none; }
}

/* ======================================================================
   REDISEÑO TANDA A (spec 001, 3/10/2026): el "?" que se abre, la pagina
   unica de cada propiedad y Mensajes con forma de Gmail. Solo clases
   NUEVAS: la pantalla en ingles que vio Meta (mensajes.html) no cambia.
   ====================================================================== */
.hoja-ancha { max-width: 1400px; }

/* El "?" que se abre */
.ayuda-q { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 400; }
.ayuda-q > summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2);
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.ayuda-q > summary::-webkit-details-marker { display: none; }
.ayuda-q[open] > summary { background: var(--verde-claro); color: var(--verde); border-color: var(--verde); }
.ayuda-q-texto { position: absolute; z-index: 30; top: 28px; right: 0; width: min(320px, 80vw);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  box-shadow: 0 6px 20px rgba(18, 48, 22, .14); padding: 10px 12px; color: var(--texto-2);
  font-size: 13px; line-height: 1.45; text-align: left; white-space: normal; }
h1 .ayuda-q-texto, h2 .ayuda-q-texto, .ayuda-linea .ayuda-q-texto { left: 0; right: auto; }
.ayuda-linea { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

/* La pagina de UNA propiedad */
.prop-link { color: inherit; text-decoration: none; }
.prop-link:hover { color: var(--verde); text-decoration: underline; }
.prop-cabecera { margin-bottom: 8px; }
.prop-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.prop-pestanas a { padding: 10px 14px 9px; color: var(--texto-2); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.prop-pestanas a:hover { color: var(--verde); }
.prop-pestanas a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); }
.prop-pestanas svg { width: 14px; height: 14px; }
.prop-resumen .fila-meta { margin-bottom: 4px; }
.prop-bloque { margin: 12px 0 0; }
.redes-sub { margin-top: -6px; align-items: center; }

/* ---------------- Mensajes tipo Gmail ---------------- */
.gm { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.gm-costado > summary { display: none; }
.gm-costado nav { display: flex; flex-direction: column; }
.gm-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 0 18px 18px 0;
  color: var(--texto); text-decoration: none; font-size: 14px; min-height: 32px; }
.gm-item:hover { background: var(--verde-claro); }
.gm-item[aria-current="page"] { background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.gm-item > svg { width: 18px; height: 18px; flex: none; color: var(--texto-2); }
.gm-item .gm-n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.gm-item .gm-n.alerta { color: var(--rojo); }
.gm-item-chico { font-size: 13px; color: var(--texto-2); padding-left: 42px; }
.gm-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gm-grupo { margin: 14px 12px 4px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.gm-mas { margin-top: 2px; }
.gm-mas > summary { cursor: pointer; padding: 6px 12px; font-size: 13px; color: var(--texto-2); list-style: none; }
.gm-mas > summary::-webkit-details-marker { display: none; }
.gm-mas > summary::after { content: " ▾"; }
.gm-logo { width: 20px; height: 20px; flex: none; display: block; }

.gm-buscar { display: flex; align-items: center; gap: 10px; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 24px; padding: 6px 10px 6px 16px; margin-bottom: 10px; color: var(--texto-3); }
.gm-buscar:focus-within { background: var(--superficie); box-shadow: 0 1px 4px rgba(18, 48, 22, .15); }
.gm-buscar input[type="search"] { border: 0; background: none; flex: 1; font: inherit; outline: none; padding: 4px 0; min-width: 0; color: var(--texto); }
.gm-buscar > svg { width: 18px; height: 18px; flex: none; }

.gm-conex { margin-bottom: 10px; font-size: 13px; }
.gm-conex > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--texto-2); }
.gm-conex > summary::-webkit-details-marker { display: none; }
.gm-conex[open] > summary { margin-bottom: 8px; }
.gm-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 8px; background: var(--borde-fuerte); }
.gm-punto-ok { background: #2e9d57; }
.gm-punto-alerta { background: #e0a100; }
.gm-punto-error { background: var(--rojo); }

.gm-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; }
.gm-herr { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--borde); min-height: 48px; }
.gm-herr input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--verde); }
.gm-acciones { display: flex; gap: 6px; align-items: center; }
.gm-herr.js:not(.con-sel) .gm-acciones { display: none; }
.gm-herr .gm-cuenta { margin-left: auto; }
.gm-atar .menu-lista { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.gm-atar select { font: inherit; padding: 6px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); }

.gm-pestanas { display: flex; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.gm-pestanas a { flex: 1 1 0; max-width: 230px; padding: 12px 16px 9px; color: var(--texto-2); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.gm-pestanas a:hover { background: var(--superficie-2); }
.gm-pestanas a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); }
.gm-pill { background: var(--coral); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px; }
.gm-pill.alerta { background: var(--rojo); }
.gm-pill-gris { background: var(--borde); color: var(--texto-2); }
.gm-titulo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.gm-titulo h2 { margin: 0; font-size: 16px; }
.gm-caja .bandeja-filtros { padding: 8px 16px; border-bottom: 1px solid var(--borde); }
.gm-sub { padding: 14px 16px 6px; font-size: 12px; font-weight: 600; color: var(--texto-3); border-bottom: 1px solid var(--borde); background: var(--superficie-2); }

.gm-lista { list-style: none; margin: 0; padding: 0; }
.gm-fila { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.gm-fila.gm-nueva { background: var(--superficie); }
.gm-fila.gm-marcada { background: #fff6d6; }
.gm-fila:hover { box-shadow: inset 1px 0 0 var(--borde-fuerte), inset -1px 0 0 var(--borde-fuerte), 0 1px 3px rgba(0, 0, 0, .10); position: relative; z-index: 1; }
.gm-sel { margin: 13px 0 0 14px; width: 16px; height: 16px; accent-color: var(--verde); }
.gm-sel-no { display: block; }
.gm-det > summary { list-style: none; cursor: pointer; }
.gm-det > summary::-webkit-details-marker { display: none; }
.gm-resumen { display: grid; grid-template-columns: 22px 180px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 16px 0 2px; min-height: 42px; }
.gm-quien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-nueva .gm-quien, .gm-nueva .gm-fecha, .gm-nueva .gm-cuerpo { font-weight: 700; color: var(--texto); }
.gm-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); min-width: 0; }
.gm-texto .etiqueta { margin-right: 6px; font-size: 11px; vertical-align: 1px; }
.gm-fecha { font-size: 12px; color: var(--texto-2); white-space: nowrap; text-align: right; }
.gm-apagada .gm-quien, .gm-apagada .gm-texto { color: var(--texto-3); }
.gm-det[open] > summary { border-bottom: 1px dashed var(--borde); }
.gm-det[open] .gm-texto { visibility: hidden; }
.gm-abierto { padding: 10px 16px 14px 2px; background: var(--superficie); }
.gm-abierto .bandeja-texto { white-space: normal; }
.gm-abierto .fila-meta { margin: 6px 0; }
.gm-botones { margin-top: 8px; align-items: center; }
.gm-abierto .responder { margin-top: 10px; }
.gm-caja .vacio { margin: 16px; }

@media (max-width: 860px) {
  .gm { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gm-costado { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
  .gm-costado > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; }
  .gm-costado > summary::-webkit-details-marker { display: none; }
  .gm-costado > summary svg { width: 18px; height: 18px; }
  .gm-costado nav { padding-bottom: 8px; }
  .gm-caja { border-radius: 10px; }
  .gm-t { display: none; }
  .gm-pestanas a { flex: none; padding: 10px 12px 8px; font-size: 14px; }
  /* El renglon en dos lineas, como el Gmail del telefono */
  .gm-resumen { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 3px; padding: 10px 14px 10px 2px; }
  .gm-resumen .gm-logo { grid-row: 1; grid-column: 1; }
  .gm-quien { grid-row: 1; grid-column: 2; }
  .gm-fecha { grid-row: 1; grid-column: 3; }
  .gm-texto { grid-row: 2; grid-column: 1 / 4; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Spec 001: con "Propiedades" la barra tiene cuatro secciones y en el celular
   no entran arriba: van abajo, como la barra de una app (icono + nombre).
   Solo la barra nueva (nav-cuatro): la pantalla de Meta queda como estaba. */
@media (max-width: 760px) {
  .nav.nav-cuatro { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 0; overflow: visible; background: var(--verde-oscuro);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 6px rgba(0, 0, 0, .18); }
  .nav.nav-cuatro a { flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0 2px;
    font-size: 11px; position: relative; }
  .nav.nav-cuatro a svg { width: 20px; height: 20px; }
  .nav.nav-cuatro .contador { position: absolute; top: 2px; left: calc(50% + 6px); }
  body:has(.nav-cuatro) .hoja { padding-bottom: 96px; }
  .barra:has(.nav-cuatro) .marca-nombre { display: inline; }
  .barra:has(.nav-cuatro) .menu-usuario { margin-left: auto; }
  .barra:has(.nav-cuatro) .estado-barra { margin-left: auto; }
  .barra:has(.nav-cuatro) .estado-barra + .menu-usuario { margin-left: 0; }
  .gm-det[open] .gm-texto { display: none; }
}

/* Para lectores de pantalla: no se ve, pero se lee (spec 001). */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Guardar el orden" de la carpeta: .botones (display:flex) le ganaba al atributo hidden y se veia siempre (estaba asi desde antes; visto en las capturas de la spec 001). */
#carpeta-orden[hidden] { display: none; }

/* Spec 002 (3/10): /propiedades con pestañas por etapa y filtros. */
.etapas-pestanas .etapa-resumen[aria-current="page"] { border-color: var(--verde); background: var(--verde-claro);
  box-shadow: inset 0 -3px 0 var(--verde); }
.etapas-pestanas .etapa-resumen[aria-current="page"] .etapa-nombre { color: var(--verde); font-weight: 700; }
.prop-buscar { margin: 16px 0 10px; }
.prop-buscar .buscador { max-width: 460px; }
.prop-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.prop-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2); text-decoration: none; font-size: 13px; }
.prop-filtro .num { font-size: 12px; color: var(--texto-3); }
.prop-filtro:hover { border-color: var(--verde); color: var(--verde); }
.prop-filtro[aria-current="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.prop-filtro[aria-current="true"] .num { color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
  .prop-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .prop-filtro { flex: none; }
}
@media (max-width: 760px) {
  /* Las pestañas de etapa en una sola fila de cuatro (spec 002). */
  .etapas-panel:has(.etapas-pestanas) { margin-bottom: 12px; }
  .etapas-pestanas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .etapas-pestanas .etapa-resumen { padding: 8px 6px; text-align: center; }
  .etapas-pestanas .etapa-numero { font-size: 20px; }
  .etapas-pestanas .etapa-nombre { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .etapas-pestanas .etapa-alerta { font-size: 0; margin: 4px auto 0; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
}
.prop-buscar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prop-buscar .buscador { flex: 1 1 280px; }
.prop-buscar select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); }
@media (max-width: 760px) { .prop-buscar select { flex: 1 1 40%; } }
.prop-buscar select { width: auto; flex: 0 0 auto; max-width: 240px; }
@media (max-width: 760px) { .prop-buscar select { flex: 1 1 40%; max-width: none; } }

/* 0.24.0: lo de las etapas 2-4 en la bandeja tipo Gmail. */
.gm-ticket { font-size: 11px; color: var(--texto-3); font-weight: 400; margin-right: 4px; }
.gm-linea { margin: 6px 0; display: flex; gap: 8px; align-items: center; }
.gm-cat { margin-left: 0; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gm-herr .gm-cerrar { display: none; border: 1px solid var(--borde-rojo); background: #fff; color: var(--rojo); border-radius: 16px; margin-left: auto; }
.gm-herr.con-sel .gm-cerrar, .gm-herr:not(.js) .gm-cerrar { display: inline-flex; }
.gm-herr.con-sel .gm-cerrar + .gm-cuenta { margin-left: 8px; }

/* 0.25.0, tanda B: la estrella y las etiquetas propias. */
.gm-fila { grid-template-columns: 34px 26px minmax(0, 1fr); }
.gm-estrella-form { margin: 9px 0 0; display: block; }
.gm-estrella { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--borde-fuerte); padding: 2px; }
.gm-estrella:hover { color: #f4b400; }
.gm-estrella-si { color: #f4b400; }
.gm-propias { flex-wrap: wrap; }
.gm-chip-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.gm-chip-form select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); }
.gm-chip-x { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; font-size: 11px; color: inherit; opacity: .7; }
.gm-chip-x:hover { opacity: 1; }
.rotulo-0 { background: #e3f0ff; color: #1a56a0; }
.rotulo-1 { background: #f3e8ff; color: #6b3fa0; }
.rotulo-2 { background: #fff1d6; color: #8f5b00; }
.rotulo-3 { background: #e2f6ec; color: #17693c; }
.rotulo-4 { background: #ffe4e1; color: #a8321f; }
.rotulo-5 { background: #e8eef2; color: #3d5566; }
.gm-cat.rotulo-0, .gm-cat.rotulo-1, .gm-cat.rotulo-2, .gm-cat.rotulo-3, .gm-cat.rotulo-4, .gm-cat.rotulo-5 { border: 1px solid currentColor; }
.gm-grupo-con-boton { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.gm-agregar { position: relative; }
.gm-agregar > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--texto-2); padding: 0 4px; }
.gm-agregar > summary::-webkit-details-marker { display: none; }
.gm-agregar-form { position: absolute; z-index: 20; right: 0; top: 24px; display: flex; gap: 6px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 8px; box-shadow: 0 6px 20px rgba(18, 48, 22, .14); width: 280px; }
.gm-agregar-form input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px; }
.gm-borrar-form { display: flex; align-items: center; gap: 6px; padding: 2px 12px; font-size: 13px; }
@media (max-width: 860px) {
  .gm-fila { grid-template-columns: 30px 24px minmax(0, 1fr); }
}
.gm-chip-form select { height: 28px; padding: 0 6px; }
.gm-item .gm-n { white-space: nowrap; }

/* La barrita "Deshacer" (spec 004): el ultimo cambio de la ultima hora. */
.deshacer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 8px 10px 8px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); font-size: 13.5px; }
.deshacer[hidden] { display: none; }
.deshacer-texto { flex: 1; min-width: 180px; }

/* Inicio: los Borradores que nadie toca (spec 004, parte 2) */
.lista-fantasmas { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-fantasmas li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--borde); }
.lista-fantasmas .botones { margin-left: auto; }

/* Portada de Instagram en la vista previa (12/10/2026): la miniatura que va
   primera, la capa que armo el publicador encima y la frase escrita con la
   misma letra, en el mismo lugar (los porcentajes los da el publicador). */
@font-face { font-family: "Outfit"; src: url("/estatico/fuentes/outfit-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
.portada-ig { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .portada-ig { grid-template-columns: 1fr; } }
.portada-vista { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio-chico); border: 1px solid var(--borde); container-type: inline-size; background: #cfd6d2; max-width: 270px; }
.portada-vista.es-h { aspect-ratio: 4 / 3; max-width: 360px; }   /* el posteo horizontal (27/10/2026) */
.portada-vista img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portada-vista .portada-foto { object-fit: cover; object-position: center; }
.portada-vista .portada-frase { position: absolute; white-space: nowrap; line-height: 1; font-family: "Outfit", sans-serif; overflow: visible; }