/* ---------- Modelo: solicitudes de cambio, ventana de rechazo y perfil ---------- */

.mo-solicitud-zona:empty { display: none; }
.mo-solicitud-zona { display: grid; gap: 8px; }

/* Cambios pedidos («Pedir cambio») y la respuesta de la agencia: en la tarjeta y en el detalle de la ficha */
.mo-sols { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mo-sol { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radio-s);
  background: var(--surface-1); font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; }
.mo-sol p { margin: 0; display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.mo-sol p > span { min-width: 0; }
.mo-sol .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.mo-sol-quien { font-weight: 650; }
.mo-sol-cuando { font-size: 12px; color: var(--text-secondary); }
.mo-sol-texto { display: block; }
.mo-sol-pedido .mo-sol-texto { color: var(--text-secondary); }
.mo-sol-respuesta { padding-top: 6px; border-top: 1px dashed var(--border); }
.mo-sol-espera { border-left-color: var(--warning); }
.mo-sol-espera .mo-sol-respuesta .ico, .mo-sol-espera .mo-sol-respuesta strong { color: var(--warning-text); }
.mo-sol-ok { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--card)); }
.mo-sol-ok .mo-sol-respuesta .ico, .mo-sol-ok .mo-sol-respuesta strong { color: var(--good-text); }
.mo-sol-no { border-left-color: var(--critical); }
.mo-sol-no .mo-sol-respuesta .ico, .mo-sol-no .mo-sol-respuesta strong { color: var(--bad-text); }
.mo-sol-cerrada { border-left-color: var(--muted); }
.mo-sols-antes > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 2px 0; }
.mo-sols-antes > summary:hover { color: var(--text-primary); }
.mo-sols-antes[open] > summary { margin-bottom: 8px; }
.fd-sols { display: grid; gap: 8px; margin: 12px 0; }

.mo-cambio { padding: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radio-s); }
.mo-cambio .campo { margin-bottom: 8px; }
.mo-botones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Ventana de confirmación (<dialog>) */
.mo-dialogo { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--text-primary);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); }
.mo-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.mo-dialogo-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.mo-dialogo h2 { font-size: 17px; }
.mo-dialogo .campo { margin-bottom: 0; }
.mo-dialogo .mo-botones .boton { flex: 1 1 auto; }

/* Mi perfil */
.mo-perfil { display: grid; gap: 12px; max-width: 760px; }
.mo-subtitulo { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 12px; }
.mo-perfil .formulario-cabeza .mo-subtitulo { margin-bottom: 4px; }
.mo-subtitulo .ico { color: var(--muted); }
@media (max-width: 480px) { .mo-perfil .datos { grid-template-columns: 1fr; } }

/* Mis números: piezas propias (el resto, clases pn-* del panel en estilo.css) */
.nm { display: grid; gap: 12px; }
.nm-area { fill: var(--c); opacity: .12; stroke: none; }
.nm-linea { stroke-width: 2.5; }
.nm-semanas { display: grid; gap: 6px; }
.nm-fila-titulo { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.nm-reels { --c: var(--s1); }
.nm-ganados { --c: var(--good); }
.nm-negativa { --c: var(--critical); }
.nm-cuenta-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Crear su propia idea */
.mo-nueva { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.mo-dialogo select, .mo-dialogo input { width: 100%; }

/* Mis números · tarjetas de cada cuenta */
.nm-cuentas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.nm-cuenta { border: 1px solid var(--border); border-radius: var(--radio-s); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nm-cuenta-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm-cuenta-cabeza .nm-cuenta-nombre { font-weight: 700; overflow-wrap: anywhere; flex: 1 1 auto; }
.nm-salud { font-size: 12px; font-weight: 600; margin: 0; }
.nm-salud-ok { color: var(--good-text); }
.nm-salud-aviso { color: var(--warning-text); }
.nm-salud-error { color: var(--bad-text); }
.nm-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.nm-dato { display: flex; flex-direction: column; font-size: 12px; }
.nm-dato span { color: var(--text-secondary); }
.nm-dato b { font-size: 15px; }

/* Mi perfil · foto */
.mo-foto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mo-foto-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--border); }
.mo-foto-inicial { display: grid; place-items: center; font-size: 36px; font-weight: 700; background: var(--accent-suave); color: var(--accent); }
.mo-foto-cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }

/* Tarjeta de idea con aspecto de publicación de Instagram */
.ficha.ig { padding: 0; gap: 0; max-width: 520px; width: 100%; margin-inline: auto; }
.ficha.ig::before { display: none; }
.ig-cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; }
.ig-aro { flex: none; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.ig-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  border: 2px solid var(--card); background: var(--accent-suave); color: var(--accent); font-weight: 700; font-size: 16px; }
.ig-quien { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.ig-quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-quien span { font-size: 12px; }
.ig-marcas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ficha.ig .mo-aviso { margin: 0 14px 10px; }
.ig-pantalla { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; padding: 18px 20px; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #833ab4 0%, #e1306c 55%, #fcb045 100%); }
/* Degradado según la vertical (mismo color que su etiqueta, vt-1…vt-8) */
.ig-vt-1 { background: linear-gradient(120deg, #2563eb, #06b6d4); }
.ig-vt-2 { background: linear-gradient(120deg, #db2777, #f97316); }
.ig-vt-3 { background: linear-gradient(120deg, #047857, #65a30d); }
.ig-vt-4 { background: linear-gradient(120deg, #7c3aed, #ec4899); }
.ig-vt-5 { background: linear-gradient(120deg, #c2410c, #ca8a04); }
.ig-vt-6 { background: linear-gradient(120deg, #0f766e, #3b82f6); }
.ig-vt-7 { background: linear-gradient(120deg, #be123c, #a855f7); }
.ig-vt-8 { background: linear-gradient(120deg, #4f46e5, #0891b2); }
.ig-pantalla-hook { margin: 0; font-size: clamp(17px, 4.5vw, 21px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.ig-ref { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px; background: #fff; color: #111;
  font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ig-ref:hover, .ig-ref:focus-visible { transform: scale(1.03); }
.ig-ref-play .ico { width: 24px; height: 24px; color: #e1306c; }
.ig-sin-ref { font-size: 13px; opacity: .8; }
/* Fila de acciones: siempre en una sola línea, columnas iguales, icono encima del texto (como Instagram) */
.ig-acciones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 10px 10px 0; }
.ig-accion { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0;
  padding: 8px 4px; border: 0; border-radius: var(--radio-s); background: transparent; color: var(--text-primary);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.ig-accion > span:not(.fc-contador) { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.ig-accion .ico { width: 24px; height: 24px; flex: none; }
.ig-accion:hover, .ig-accion:focus-visible { background: var(--accent-suave); }
.ig-accion.ig-principal { background: var(--accent); color: var(--on-accent); }
.ig-accion.ig-principal:hover { filter: brightness(1.08); background: var(--accent); }
.ig-accion[disabled] { opacity: .6; cursor: wait; }
.ig-accion .fc-contador { position: absolute; top: 2px; right: calc(50% - 26px); margin: 0; }
.ig-texto { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 4px; }
.ig-texto > p { margin: 0; overflow-wrap: anywhere; }
.ficha.ig .mo-solicitud-zona, .ficha.ig .avance, .ficha.ig > .mensaje, .ficha.ig .mo-cambio { margin: 8px 14px 0; }
.ficha.ig > .mensaje:last-of-type { margin-bottom: 12px; }
.ficha.ig .mo-cambio { margin-bottom: 14px; }
.ficha.ig input[type=file] { display: none; }

/* «Para hoy»: la idea más urgente, arriba del todo, con su botón grande de subir */
.mo-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; max-width: 760px; margin: 0 0 14px;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.mo-hoy:empty { display: none; }
.mo-hoy:focus { outline: none; }
.mo-hoy-repetir { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); background: color-mix(in srgb, var(--critical) 6%, var(--card)); }
.mo-hoy-atrasada { border-color: color-mix(in srgb, var(--warning) 60%, var(--border)); background: color-mix(in srgb, var(--warning) 8%, var(--card)); }
.mo-hoy-fin { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); background: color-mix(in srgb, var(--good) 7%, var(--card)); flex-direction: column; align-items: flex-start; gap: 4px; }
.mo-hoy-texto { flex: 1 1 280px; min-width: 0; display: grid; gap: 4px; }
.mo-hoy-etiqueta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.mo-hoy-repetir .mo-hoy-etiqueta { color: var(--bad-text); }
.mo-hoy-atrasada .mo-hoy-etiqueta { color: var(--warning-text); }
.mo-hoy-fin .mo-hoy-etiqueta { color: var(--good-text); }
.mo-hoy-etiqueta .ico { width: 16px; height: 16px; }
.mo-hoy-titulo { font-size: 18px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.mo-hoy-num { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.mo-hoy-por { font-size: 14px; color: var(--text-secondary); overflow-wrap: anywhere; }
.mo-hoy-por strong { color: var(--bad-text); }
.mo-hoy-botones { flex: 0 1 240px; display: grid; gap: 4px; justify-items: center; min-width: min(100%, 200px); }
.mo-hoy-subir { min-height: 52px; font-size: 16px; font-weight: 700; }
.mo-hoy-subir .ico { width: 20px; height: 20px; }
.mo-hoy .avance, .mo-hoy > .mensaje { flex: 1 1 100%; }
@media (max-width: 560px) { .mo-hoy-botones { flex-basis: 100%; } }
/* «Ver la idea» lleva a su tarjeta: que no quede debajo de la barra de arriba del móvil (sticky) */
.ficha.ig { scroll-margin-top: 76px; }
.ficha.ig:focus:not(:focus-visible) { outline: none; }

/* «Ya grabado»: línea de progreso de cada vídeo (Subido → Editando → Listo → Publicado) */
.mo-pasos { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; }
.mo-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
/* Raya que une cada paso con el anterior (por detrás del punto) */
.mo-paso + .mo-paso::before { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--border-fuerte); z-index: 0; }
.mo-paso-hecho + .mo-paso::before { background: var(--accent); }
.mo-paso-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--border-fuerte); color: var(--on-accent); }
.mo-paso-punto .ico { width: 13px; height: 13px; stroke-width: 3; }
.mo-paso-hecho .mo-paso-punto { background: var(--accent); border-color: var(--accent); }
.mo-paso-actual .mo-paso-punto { border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.mo-paso-actual .mo-paso-punto::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mo-paso-fin .mo-paso-punto { background: var(--good); border-color: var(--good); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
.mo-paso-fin .mo-paso-punto::after { display: none; }
.mo-paso-nombre { font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.mo-paso-hecho .mo-paso-nombre { color: var(--text-secondary); }
.mo-paso-actual .mo-paso-nombre { color: var(--text-primary); font-weight: 700; }
.mo-paso-fin .mo-paso-nombre { color: var(--good-text); }
.mo-paso-texto { font-size: 14px; margin: 6px 0 2px; overflow-wrap: anywhere; }
.mo-paso-bien { color: var(--good-text); font-weight: 600; }
.mo-paso-aviso { color: var(--warning-text); font-weight: 600; }
.mo-paso-extra { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }