/* Central MaxClientes — estilos del panel */

:root {
  --barra: #1d2330;
  --barra-texto: #c9d1e0;
  --barra-activo: #2d3648;
  --fondo: #f4f5f7;
  --tarjeta: #ffffff;
  --borde: #dde1e8;
  --texto: #1f2733;
  --texto-suave: #5d6878;
  --acento: #2563eb;
  --acento-hover: #1d4ed8;
  --peligro: #c62828;
  --ok: #2e7d32;

  /* Estados de web (consistentes en todo el panel) */
  --estado-rentada: #2e7d32;
  --estado-rentada-fondo: #e6f4e7;
  --estado-en_prueba: #1e63c4;
  --estado-en_prueba-fondo: #e4eefb;
  --estado-por_rentar: #d9730d;
  --estado-por_rentar-fondo: #fdf0e1;
  --estado-trabajando_seo: #5f6b7a;
  --estado-trabajando_seo-fondo: #eceef1;
  --estado-en_construccion: #0e7490;
  --estado-en_construccion-fondo: #e0f2f7;
  --estado-esperando_trafico: #7a5af5;
  --estado-esperando_trafico-fondo: #efebfe;

  --radio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06);
  --fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
}

a { color: var(--acento); }
h1 { font-size: 1.45rem; margin: 0 0 1rem; font-weight: 600; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; font-weight: 600; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-suave); }
.oculto { display: none !important; }

/* ── Estructura con barra lateral ── */

.app { display: flex; min-height: 100vh; }

.barra {
  width: 220px;
  flex-shrink: 0;
  background: var(--barra);
  color: var(--barra-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.barra-marca {
  padding: 1.1rem 1.2rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: 0.01em;
}
.barra-marca small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--barra-texto); opacity: 0.7; }

.barra nav { flex: 1; padding: 0.25rem 0.6rem; overflow-y: auto; }

.barra nav a,
.barra nav span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--barra-texto);
  text-decoration: none;
  margin-bottom: 2px;
}
.barra nav a:hover { background: var(--barra-activo); color: #fff; }
.barra nav a.activo { background: var(--barra-activo); color: #fff; font-weight: 500; }
.barra nav span.deshabilitado { opacity: 0.45; cursor: default; }
.barra nav .pronto { font-size: 0.68rem; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }

.barra-usuario { padding: 0.9rem 1.2rem; border-top: 1px solid #2c3445; font-size: 0.85rem; }
.barra-usuario strong { color: #fff; display: block; font-weight: 500; }
.barra-usuario button {
  background: none;
  border: 0;
  color: var(--barra-texto);
  padding: 0.2rem 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  margin-right: 0.8rem;
}

.contenido { flex: 1; min-width: 0; padding: 1.5rem 2rem 3rem; }

.barra-movil { display: none; }

@media (max-width: 800px) {
  .barra {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 250px;
  }
  .barra.abierta { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35); }
  .barra-movil {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--barra);
    color: #fff;
    padding: 0.6rem 1rem;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .barra-movil button { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; padding: 0.2rem; cursor: pointer; }
  .app { display: block; }
  .contenido { padding: 1rem 1rem 3rem; }
}

/* ── Tarjetas, tablas y formularios ── */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.contadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.contador { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 1rem; border-left: 4px solid var(--borde); }
.contador .valor { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; display: block; }
.contador .etiqueta { color: var(--texto-suave); font-size: 0.85rem; }

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { font-weight: 500; color: var(--texto-suave); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: 0; }

label { display: block; font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0.25rem; }
input[type='text'], input[type='password'], input[type='search'], select, textarea {
  font: inherit;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; margin-bottom: 0.9rem; }

.boton {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.boton:hover { background: var(--acento-hover); }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton.secundario { background: #fff; color: var(--texto); border-color: var(--borde); }
.boton.secundario:hover { background: var(--fondo); }
.boton.chico { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

.mensaje-error { color: var(--peligro); font-size: 0.9rem; min-height: 1.2em; margin: 0.4rem 0 0; }

/* ── Estados ── */

.estado {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.estado-rentada { color: var(--estado-rentada); background: var(--estado-rentada-fondo); }
.estado-en_prueba { color: var(--estado-en_prueba); background: var(--estado-en_prueba-fondo); }
.estado-por_rentar { color: var(--estado-por_rentar); background: var(--estado-por_rentar-fondo); }
.estado-trabajando_seo { color: var(--estado-trabajando_seo); background: var(--estado-trabajando_seo-fondo); }
.estado-en_construccion { color: var(--estado-en_construccion); background: var(--estado-en_construccion-fondo); }
.estado-esperando_trafico { color: var(--estado-esperando_trafico); background: var(--estado-esperando_trafico-fondo); }
.contador.estado-rentada { border-left-color: var(--estado-rentada); background: var(--tarjeta); }
.contador.estado-en_prueba { border-left-color: var(--estado-en_prueba); background: var(--tarjeta); }
.contador.estado-por_rentar { border-left-color: var(--estado-por_rentar); background: var(--tarjeta); }
.contador.estado-trabajando_seo { border-left-color: var(--estado-trabajando_seo); background: var(--tarjeta); }
.contador.estado-en_construccion { border-left-color: var(--estado-en_construccion); background: var(--tarjeta); }
.contador.estado-esperando_trafico { border-left-color: var(--estado-esperando_trafico); background: var(--tarjeta); }

/* ── Pestañas ── */

.pestanas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1.2rem; overflow-x: auto; }
.pestanas button {
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  color: var(--texto-suave);
  white-space: nowrap;
}
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--acento); font-weight: 500; }
.insignia { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: 999px; background: var(--estado-por_rentar); color: #fff; font-size: 0.75rem; text-align: center; font-family: var(--mono); }

/* ── Diálogos y avisos ── */

dialog {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.3rem;
  width: min(420px, calc(100vw - 2rem));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
dialog::backdrop { background: rgba(15, 20, 30, 0.45); }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.avisos { position: fixed; bottom: 1rem; right: 1rem; left: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; z-index: 100; pointer-events: none; }
.aviso { background: #1f2733; color: #fff; padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.9rem; max-width: 420px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.aviso.error { background: var(--peligro); }

/* ── Login ── */

.pantalla-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--barra); }
.caja-login { background: #fff; border-radius: 10px; padding: 2rem 1.8rem; width: min(380px, 100%); }
.caja-login h1 { margin-bottom: 0.2rem; }
.caja-login .campo { margin-bottom: 0.9rem; }
.caja-login .boton { width: 100%; margin-top: 0.4rem; padding: 0.65rem; }

/* ── Listas de revisión ── */

.lista-revisar { list-style: none; padding: 0; margin: 0; }
.lista-revisar li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--borde); }
.lista-revisar li:last-child { border-bottom: 0; }
.lista-revisar li.resuelto .texto { color: var(--texto-suave); text-decoration: line-through; }
.lista-revisar input[type='checkbox'] { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.lista-revisar .dominios { font-family: var(--mono); font-size: 0.8rem; color: var(--texto-suave); margin-top: 0.2rem; word-break: break-all; }

@media (max-width: 600px) {
  .tabla-movil thead { display: none; }
  .tabla-movil tr { display: block; border-bottom: 1px solid var(--borde); padding: 0.5rem 0; }
  .tabla-movil td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.25rem 0; }
  .tabla-movil td::before { content: attr(data-etiqueta); color: var(--texto-suave); font-size: 0.85rem; }
}

/* ── Estados de entrada (también para la maquetación) ── */

:root {
  --entrada-pendiente: #8a6d00;
  --entrada-pendiente-fondo: #fff4c7;
  --entrada-publicada: #2e7d32;
  --entrada-publicada-fondo: #e6f4e7;
  --entrada-en_home: #0f766e;
  --entrada-en_home-fondo: #dff5f2;
  --entrada-optimizar: #b45309;
  --entrada-optimizar-fondo: #fde9d7;
  --entrada-falta_multimedia: #7a5af5;
  --entrada-falta_multimedia-fondo: #efebfe;
  --entrada-no_aplica: #8b95a3;
  --entrada-no_aplica-fondo: #f0f1f3;
}
.entrada-pendiente { color: var(--entrada-pendiente); background: var(--entrada-pendiente-fondo); }
.entrada-publicada { color: var(--entrada-publicada); background: var(--entrada-publicada-fondo); }
.entrada-en_home { color: var(--entrada-en_home); background: var(--entrada-en_home-fondo); }
.entrada-optimizar { color: var(--entrada-optimizar); background: var(--entrada-optimizar-fondo); }
.entrada-falta_multimedia { color: var(--entrada-falta_multimedia); background: var(--entrada-falta_multimedia-fondo); }
.entrada-no_aplica { color: var(--entrada-no_aplica); background: var(--entrada-no_aplica-fondo); }

select.selector-estado {
  width: auto;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

/* ── Encabezado de página con acción ── */

.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado h1 { margin: 0; }

/* ── Contadores clicables ── */

button.contador { font: inherit; text-align: left; cursor: pointer; color: inherit; }
button.contador:hover { border-color: #b9c0cc; }
button.contador.seleccionado { outline: 2px solid var(--acento); outline-offset: -1px; }

/* ── Filtros ── */

.filtros { display: grid; grid-template-columns: 1.2fr 1fr 2fr 0.9fr; gap: 0.6rem; margin-bottom: 1rem; }
@media (max-width: 800px) { .filtros { grid-template-columns: 1fr 1fr; } .filtros .filtro-busqueda { grid-column: 1 / -1; order: -1; } }

/* ── Barra de avance ── */

.avance { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.avance-barra { flex: 1; height: 6px; background: #e6e9ee; border-radius: 3px; overflow: hidden; min-width: 50px; }
.avance-barra > span { display: block; height: 100%; background: var(--estado-rentada); }
.avance-texto { font-family: var(--mono); font-size: 0.8rem; color: var(--texto-suave); white-space: nowrap; }

.renovacion { font-size: 0.8rem; white-space: nowrap; color: var(--estado-por_rentar); font-weight: 500; }
.renovacion.urgente { color: var(--peligro); }

.tabla-inventario td.dominio a { font-family: var(--mono); font-size: 0.85rem; text-decoration: none; }
.tabla-inventario td.dominio a:hover { text-decoration: underline; }
.tabla-inventario .sector { display: block; font-size: 0.75rem; color: var(--texto-suave); }

/* ── Ficha de web ── */

.ficha-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ficha-cabecera h1 { font-family: var(--mono); font-size: 1.3rem; margin: 0 0 0.2rem; word-break: break-all; }
.ficha-cabecera .subtitulo { color: var(--texto-suave); margin: 0 0 0.6rem; }
.ficha-cabecera .controles { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ficha-cabecera .controles select { width: auto; }

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
@media (max-width: 1000px) { .rejilla { grid-template-columns: minmax(0, 1fr); } }

.tarjeta-titulo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.tarjeta-titulo h2 { margin: 0; }

.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; font-size: 0.92rem; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 500px) { .datos { grid-template-columns: minmax(0, 1fr); gap: 0; } .datos dd { margin-bottom: 0.5rem; } }

.boton.whatsapp { background: #1f9d55; border-color: #1f9d55; }
.boton.whatsapp:hover { background: #17834a; }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); }
.boton.enlace { background: none; border: 0; color: var(--acento); padding: 0; font-weight: 400; text-decoration: underline; }

.aviso-inline { background: var(--estado-por_rentar-fondo); color: #7a3e00; border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.88rem; margin-bottom: 0.75rem; }
.nota-pequena { font-size: 0.82rem; color: var(--texto-suave); }

.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 0.4rem 0; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
.lista-simple li:last-child { border-bottom: 0; }

.tabla-entradas td.url { font-family: var(--mono); font-size: 0.78rem; overflow-wrap: anywhere; max-width: 320px; }
.tabla-entradas td.nota { font-size: 0.85rem; color: var(--texto-suave); max-width: 260px; }
.tabla-entradas tr.no-aplica td.nombre { color: var(--texto-suave); text-decoration: line-through; }
.tabla-entradas .plantilla { font-size: 0.7rem; color: var(--texto-suave); border: 1px solid var(--borde); border-radius: 4px; padding: 0 4px; margin-left: 0.3rem; }

.bitacora { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.bitacora li { padding: 0.55rem 0; border-bottom: 1px solid var(--borde); font-size: 0.9rem; }
.bitacora li:last-child { border-bottom: 0; }
.bitacora .meta { font-size: 0.78rem; color: var(--texto-suave); }
.bitacora .sistema .texto { color: var(--texto-suave); }

.dialogo-formulario { width: min(520px, calc(100vw - 2rem)); }
.campos-dialogo { display: grid; gap: 0.75rem; max-height: 65vh; overflow-y: auto; padding: 2px; }
.campos-dialogo small { display: block; margin-top: 0.2rem; font-size: 0.78rem; }
textarea { resize: vertical; }

.tabla-rutas input { font-size: 0.82rem; font-family: var(--mono); }
.tabla-rutas .ya-existe { color: var(--texto-suave); font-size: 0.8rem; }

/* Entradas en celular: tarjeta compacta (nombre / estado + editar / URL y nota solo si hay). */
@media (max-width: 600px) {
  .tabla-entradas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.5rem; align-items: center; padding: 0.7rem 0; }
  .tabla-entradas td { display: block; padding: 0; }
  .tabla-entradas td::before { content: none; }
  .tabla-entradas td.nombre { grid-column: 1 / -1; font-weight: 500; }
  .tabla-entradas td.url, .tabla-entradas td.nota { grid-column: 1 / -1; max-width: none; }
  .tabla-entradas td.vacio { display: none; }
  .tabla-entradas td.acciones { grid-row: 2; grid-column: 2; }
}

/* Inventario en celular: tarjeta compacta por web. */
@media (max-width: 600px) {
  .tabla-inventario tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: center; padding: 0.75rem 0; }
  .tabla-inventario td { display: block; padding: 0; }
  .tabla-inventario td::before { content: none; }
  .tabla-inventario td.vacio { display: none; }
  .tabla-inventario td.ciudad { grid-row: 1; grid-column: 1; }
  .tabla-inventario td.estado-web { grid-row: 1; grid-column: 2; text-align: right; }
  .tabla-inventario td.dominio { grid-column: 1 / -1; }
  .tabla-inventario td.entradas { grid-column: 1; }
  .tabla-inventario td.cliente { grid-column: 2; text-align: right; font-size: 0.88rem; }
  .tabla-inventario td.grupo,
  .tabla-inventario td.clics { font-size: 0.8rem; color: var(--texto-suave); font-family: var(--fuente); }
  .tabla-inventario td.grupo::before,
  .tabla-inventario td.clics::before { content: attr(data-etiqueta) ' '; }
  .tabla-inventario td.renov { grid-column: 1 / -1; }
  .tabla-inventario .avance { max-width: 220px; }
}

/* ── Ojito de contraseñas ── */

.campo-password { position: relative; }
.campo-password input { padding-right: 2.75rem; }
.boton-ojito {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--texto-suave);
  cursor: pointer;
}
.boton-ojito:hover { color: var(--texto); background: var(--fondo); }
.boton-ojito:focus-visible { outline: 2px solid var(--acento); }

/* ── Perfiles de Google ── */

.filtros-perfiles { grid-template-columns: 2fr 1fr; }
.tabla-perfiles th.grupo-rendimiento { text-align: center; border-bottom: 1px solid var(--borde); }
.tabla-perfiles tr.sub th { font-size: 0.72rem; text-transform: none; letter-spacing: 0; }
.tabla-perfiles td.rendimiento { text-align: center; font-size: 0.85rem; }
.tabla-perfiles td.cuenta { font-size: 0.8rem; }
.tabla-perfiles td.nota { font-size: 0.85rem; color: var(--texto-suave); max-width: 240px; }
.tabla-perfiles td a.boton { white-space: nowrap; }

@media (max-width: 600px) {
  .tabla-perfiles tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: center; padding: 0.75rem 0; }
  .tabla-perfiles td { display: block; padding: 0; grid-column: 1 / -1; }
  .tabla-perfiles td::before { content: none; }
  .tabla-perfiles td.vacio { display: none; }
  .tabla-perfiles td.ficha { grid-column: 1; }
  .tabla-perfiles td.acciones { grid-row: 1; grid-column: 2; }
  .tabla-perfiles td.rendimiento { text-align: left; font-size: 0.8rem; color: var(--texto-suave); }
  .tabla-perfiles td.rendimiento::before { content: attr(data-etiqueta) ': '; }
}
.tabla-perfiles td.ficha { min-width: 180px; }
.tabla-perfiles td.rendimiento { white-space: nowrap; }
.tabla-perfiles th, .tabla-perfiles td { padding-left: 0.45rem; padding-right: 0.45rem; }
.tabla-perfiles td.web a { font-size: 0.78rem; overflow-wrap: anywhere; }
.tabla-perfiles td.web { max-width: 200px; }
.tabla-perfiles td.cuenta { font-size: 0.78rem; }
.tabla-perfiles td.nota { max-width: 180px; }
.tabla-perfiles td.ficha { min-width: 140px; max-width: 200px; }
.tabla-perfiles td.web { min-width: 190px; max-width: 230px; }

/* ── Clientes ── */

.clientes-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.clientes-lista { position: sticky; top: 1rem; }
.clientes-lista .pestanas { margin-bottom: 0.6rem; }
.clientes-lista .pestanas button { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
.clientes-lista input[type='search'] { margin-bottom: 0.6rem; }
.lista-clientes { list-style: none; padding: 0; margin: 0; max-height: calc(100vh - 220px); overflow-y: auto; }
.lista-clientes a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--texto);
  border: 1px solid transparent;
}
.lista-clientes a:hover { background: var(--tarjeta); border-color: var(--borde); }
.lista-clientes a.seleccionado { background: var(--tarjeta); border-color: var(--acento); }
.lista-clientes .lugar { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.lista-clientes .pendientes { float: right; font-size: 0.75rem; }

.cabecera-cliente { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.cabecera-cliente h1 { margin: 0 0 0.2rem; }
.cabecera-cliente .acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.renta { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 1rem; margin-bottom: 0.75rem; }
.renta:last-child { margin-bottom: 0; }
.renta-titulo { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.35rem; }
.renta-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.etapa { display: inline-block; font-size: 0.78rem; font-weight: 500; padding: 0.12rem 0.55rem; border-radius: 999px; }
.etapa-prueba { color: var(--estado-en_prueba); background: var(--estado-en_prueba-fondo); }
.etapa-suscripcion { color: var(--estado-rentada); background: var(--estado-rentada-fondo); }
.etapa-terminada { color: var(--estado-trabajando_seo); background: var(--estado-trabajando_seo-fondo); }
.avance-prueba { height: 6px; background: #e6e9ee; border-radius: 3px; overflow: hidden; max-width: 260px; margin: 0.35rem 0; }
.avance-prueba > span { display: block; height: 100%; background: var(--estado-en_prueba); }

.grupo-campos { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.6rem 0.8rem 0.8rem; margin: 0; display: grid; gap: 0.6rem; }
.grupo-campos legend { font-size: 0.85rem; font-weight: 500; padding: 0 0.3rem; }
.campos-en-linea { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.opciones-cierre { display: grid; gap: 0.4rem; margin-bottom: 0.8rem; }
.opciones-cierre label { display: flex; gap: 0.5rem; align-items: center; color: var(--texto); font-size: 0.95rem; border: 1px solid var(--borde); border-radius: 6px; padding: 0.55rem 0.75rem; cursor: pointer; }
.opciones-cierre label:has(input:checked) { border-color: var(--acento); background: #eef4ff; }
input[type='date'], input[type='number'], input[type='tel'], input[type='email'] {
  font: inherit; width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--texto);
}

@media (max-width: 900px) {
  .clientes-layout { grid-template-columns: minmax(0, 1fr); }
  .clientes-lista { position: static; }
  .lista-clientes { max-height: none; }
  .clientes-layout.con-detalle .clientes-lista { display: none; }
  .clientes-layout:not(.con-detalle) .clientes-detalle { display: none; }
}
.solo-movil { display: none; }
@media (max-width: 900px) { .solo-movil { display: block; } }
.lista-simple .num { white-space: nowrap; }

/* ── Mi día ── */

.acciones-mi-dia { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.acciones-mi-dia label { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.acciones-mi-dia select { width: auto; }

.resumen-dia {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  background: var(--fondo);
}
.resumen-dia a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  font-size: 0.9rem;
}
.resumen-dia a strong { font-family: var(--mono); font-size: 1.15rem; }
.resumen-dia .rojo { border-left: 4px solid var(--peligro); }
.resumen-dia .naranja { border-left: 4px solid var(--estado-por_rentar); }
.resumen-dia .amarillo { border-left: 4px solid #d4a72c; }

.seccion-dia { margin-bottom: 1.4rem; scroll-margin-top: 70px; }
.seccion-dia > h2, .seccion-dia > details > summary { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); margin: 0 0 0.6rem; }
.seccion-dia > details > summary { cursor: pointer; padding: 0.4rem 0; list-style-position: inside; }

.grupo-dia { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 0.8rem; overflow: hidden; }
.grupo-dia.rojo { border-left: 4px solid var(--peligro); }
.grupo-dia.naranja { border-left: 4px solid var(--estado-por_rentar); }
.grupo-dia.amarillo { border-left: 4px solid #d4a72c; }
.grupo-cabecera { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--borde); background: #fafbfc; }
.grupo-cabecera .cliente { font-weight: 600; font-size: 1rem; }
.grupo-cabecera .lugar { color: var(--texto-suave); font-size: 0.85rem; }
.grupo-cabecera .enlaces { display: flex; gap: 0.8rem; font-size: 0.85rem; }

.tarea-dia { padding: 0.75rem 1rem; border-bottom: 1px solid var(--borde); }
.tarea-dia:last-child { border-bottom: 0; }
.tarea-dia .titulo { font-weight: 500; }
.tarea-dia .meta { font-size: 0.8rem; color: var(--texto-suave); margin-top: 0.1rem; }
.tarea-dia .meta .atrasada { color: var(--peligro); font-weight: 500; }
.tarea-dia .descripcion { font-size: 0.85rem; color: var(--texto-suave); margin-top: 0.25rem; }
.tarea-dia .mensaje-previo { font-size: 0.85rem; background: #f3f6f9; border-radius: 6px; padding: 0.45rem 0.6rem; margin-top: 0.4rem; white-space: pre-wrap; }
.tarea-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.55rem; align-items: center; }
.tarea-acciones .boton { min-height: 40px; display: inline-flex; align-items: center; }
.tarea-acciones input { width: auto; flex: 1 1 140px; min-height: 40px; }
.tarea-acciones .pregunta { font-size: 0.9rem; }

.dia-vacio { text-align: center; padding: 2.5rem 1rem; }
.dia-vacio .grande { font-size: 2rem; }

.aviso-deshacer { display: flex; gap: 0.8rem; align-items: center; pointer-events: auto; }
.aviso-deshacer button { background: none; border: 0; color: #9cc2ff; font: inherit; font-weight: 600; cursor: pointer; padding: 0.2rem; }

.opcion-pagina { display: flex; gap: 0.5rem; align-items: flex-start; border: 1px solid var(--borde); border-radius: 6px; padding: 0.55rem 0.7rem; color: var(--texto); }
.vista-comprobante { max-width: 100%; max-height: 180px; border-radius: 6px; margin-top: 0.4rem; }

@media (max-width: 800px) {
  .resumen-dia { top: 52px; }
  .mi-dia .encabezado { margin-bottom: 0.5rem; }
  .tarea-acciones .boton { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .grupo-cabecera, .tarea-dia { padding-left: 0.85rem; padding-right: 0.85rem; }
}
.tarea-simple { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; }
.boton-hecha { min-height: 44px; min-width: 88px; white-space: nowrap; }

/* ── Cómo hacerlo / manual ── */

.video-incrustado { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin-top: 0.6rem; border-radius: 8px; overflow: hidden; background: #000; }
.video-incrustado iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.como-hacer { margin-top: 0.6rem; padding: 0.7rem 0.85rem; background: #f3f7ff; border: 1px solid #d6e2fb; border-radius: 8px; font-size: 0.92rem; }
.como-hacer-texto { line-height: 1.5; }
.boton-como { background: none; border: 1px solid #c6d5f5; color: var(--acento); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; min-height: 36px; }
.boton-como[aria-expanded='true'] { background: #e8f0ff; }

/* ── Tablero de plantillas de tareas ── */

.pestanas-etapa { margin-bottom: 0.8rem; }
.tablero { display: flex; gap: 0.8rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.8rem; }
.columna-tablero { flex: 0 0 270px; background: #eceff4; border-radius: var(--radio); padding: 0.6rem; }
.columna-tablero.fija { background: #f1eefb; }
.columna-tablero header { display: flex; justify-content: space-between; align-items: baseline; padding: 0.15rem 0.2rem 0.5rem; font-size: 0.9rem; }
.tarjetas-columna { min-height: 48px; border-radius: 6px; transition: background 0.1s; }
.tarjetas-columna.zona-activa { background: #dfe7f6; }
.tarjeta-plantilla { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 6px; padding: 0.55rem 0.6rem; margin-bottom: 0.5rem; box-shadow: var(--sombra); }
.tarjeta-plantilla[draggable='true'] { cursor: grab; }
.tarjeta-plantilla.arrastrando { opacity: 0.45; }
.tarjeta-plantilla.inactiva { opacity: 0.6; border-style: dashed; }
.titulo-plantilla { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--texto); cursor: pointer; }
.titulo-plantilla:hover { color: var(--acento); text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.chip { font-size: 0.7rem; background: #eef1f5; color: var(--texto-suave); border-radius: 999px; padding: 0.08rem 0.45rem; }
.chip-guia { background: #e5efff; color: var(--acento); }
.chip-inactiva { background: #fde8e8; color: var(--peligro); }
.agregar-tarea { width: 100%; }
.columna-agregar { flex: 0 0 140px; min-height: 80px; border: 2px dashed var(--borde); border-radius: var(--radio); background: none; color: var(--texto-suave); font: inherit; cursor: pointer; }
.columna-agregar:hover { border-color: var(--acento); color: var(--acento); }
.controles-movil { display: none; gap: 0.35rem; margin-top: 0.45rem; }
.lista-recurrentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }

@media (max-width: 800px), (hover: none) {
  .controles-movil { display: flex; }
  .controles-movil .boton { min-height: 40px; }
  .controles-movil [data-mover] { flex: 1; }
}
@media (max-width: 800px) {
  .tablero { flex-direction: column; overflow-x: visible; }
  .columna-tablero, .columna-agregar { flex: 1 1 auto; width: 100%; }
  .tarjeta-plantilla[draggable='true'] { cursor: default; }
}

/* ── Manual de trabajo ── */

.filtros-manual { grid-template-columns: 2fr 1fr; }
.guia { border-bottom: 1px solid var(--borde); }
.guia:last-child { border-bottom: 0; }
.guia summary { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.65rem 0.2rem; cursor: pointer; min-height: 44px; }
.guia summary .chips { margin: 0; }
.guia-titulo { font-weight: 500; }
.guia.sin-contenido .guia-titulo { color: var(--texto-suave); }
.guia-cuerpo { padding: 0 0.2rem 0.9rem; }
.chip-visto { background: var(--estado-rentada-fondo); color: var(--estado-rentada); }
@media (max-width: 800px) { .filtros-manual { grid-template-columns: 1fr; } }

/* Encabezados ordenables y dato del Excel */
th button[data-orden] { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
th button[data-orden]:hover { color: var(--texto); }
th button[data-orden].ordenado { color: var(--texto); }
th button[data-orden]::after { content: attr(data-flecha); margin-left: 0.25rem; font-size: 0.7rem; }
.dato-excel { color: #9aa3b0; }
.dato-excel small { font-size: 0.65rem; border: 1px solid #c9ced6; border-radius: 3px; padding: 0 3px; margin-left: 2px; font-family: var(--fuente); }
@media (max-width: 600px) {
  .tabla-inventario td.clics-google { font-size: 0.8rem; color: var(--texto-suave); font-family: var(--fuente); }
  .tabla-inventario td.clics-google::before { content: 'Google '; }
}

/* ── Gráfica de costo por resultado ── */

.grafica-envoltura { position: relative; }
.grafica-costo svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica-costo .rejilla { stroke: #e6e9ee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafica-costo .eje { font-size: 11px; fill: var(--texto-suave); font-family: var(--mono); }
.grafica-costo .linea-umbral { stroke: #8b95a3; stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.grafica-costo .linea-costo { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.grafica-costo .marca-dentro { fill: var(--acento); stroke: var(--tarjeta); stroke-width: 2; }
.grafica-costo .marca-fuera { fill: var(--peligro); stroke: var(--tarjeta); stroke-width: 2; }
.grafica-costo .area-toque { fill: transparent; cursor: pointer; }
.grafica-costo .punto-costo:focus { outline: none; }
.grafica-costo .punto-costo:focus .area-toque { stroke: var(--acento); stroke-width: 1; }
.tooltip-grafica { position: absolute; z-index: 5; background: #1f2733; color: #fff; font-size: 0.8rem; padding: 0.35rem 0.55rem; border-radius: 6px; pointer-events: none; max-width: 260px; }
.estado-cobro { font-size: 0.75rem; font-weight: 500; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.estado-cobro.pagado { color: var(--estado-rentada); background: var(--estado-rentada-fondo); }
.estado-cobro.pendiente { color: var(--estado-por_rentar); background: var(--estado-por_rentar-fondo); }
.estado-cobro.vencido { color: var(--peligro); background: #fde8e8; }
.alerta-roja { background: #fde8e8; color: #8a1c1c; border-radius: 6px; padding: 0.55rem 0.75rem; font-size: 0.9rem; margin-bottom: 0.75rem; }
.grafica-costo svg { width: 100%; height: auto; }
.grafica-costo .etiqueta-umbral { font-size: 11px; fill: var(--texto-suave); }
.grafica-costo .etiqueta-umbral { paint-order: stroke; stroke: var(--tarjeta); stroke-width: 4px; stroke-linejoin: round; }
.clientes-layout.sin-lista { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

/* ── Páginas de Facebook y recargas ── */

.filtros-paginas { grid-template-columns: 2fr 1fr 1fr; }
.lista-paginas li { flex-wrap: wrap; padding: 0.65rem 0; }
.acciones-pagina { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.total-mes { font-family: var(--mono); font-size: 1.4rem; }
@media (max-width: 800px) { .filtros-paginas { grid-template-columns: 1fr 1fr; } }