/* Paginas publicas del panel (ingresar y contratar): mismo esquema que la landing app-sira.com.
   Colores, letra, el telefono de WhatsApp, el ticket del pedido y el sello salen de landing/estilos.css. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/static/fuentes/schibsted.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/static/fuentes/bricolage.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

.vitrina {
  --tinta: #12343B;
  --mar: #1F6F78;
  --papel: #F3F6F5;
  --blanco: #FFFFFF;
  --sello: #F2B632;
  --grafito: #56676A;
  --linea: #D6DFDD;
  --error: #B3261E;
  --letra: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;

  margin: 0; min-height: 100vh;
  background: var(--papel); color: var(--tinta);
  font-family: var(--letra); font-size: 16px; line-height: 1.5;
  font-optical-sizing: auto;
}
.vitrina *, .vitrina *::before, .vitrina *::after { box-sizing: border-box; }
.vitrina h1, .vitrina h2 { margin: 0; line-height: 1.08; font-family: var(--titulo); font-weight: 760; letter-spacing: -0.025em; text-wrap: balance; }
.vitrina p { margin: 0; text-wrap: pretty; }
.vitrina :focus-visible { outline: 3px solid var(--sello); outline-offset: 3px; border-radius: 6px; }
.vitrina .oculto { display: none !important; }

/* ---------- Marca ---------- */
.v-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; text-decoration: none; color: var(--tinta); }
.v-marca svg { width: 30px; height: 30px; }

/* ---------- Formularios ---------- */
.v-form { display: flex; flex-direction: column; gap: 18px; }
.v-campo { display: flex; flex-direction: column; gap: 6px; }
.v-campo label, .v-etiqueta { font-weight: 620; font-size: .95rem; }
.v-campo input, .v-campo textarea, .v-campo select {
  font: inherit; font-size: 1rem; color: var(--tinta); background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color .15s;
}
.v-campo textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.v-campo input:hover, .v-campo textarea:hover { border-color: #B8C7C4; }
.v-campo input:focus, .v-campo textarea:focus { outline: none; border-color: var(--mar); box-shadow: 0 0 0 3px rgba(31, 111, 120, .16); }
.v-ayuda { font-size: .85rem; color: var(--grafito); }
.v-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 520px) { .v-fila { grid-template-columns: 1fr; } }
.v-codigo { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.v-error { background: #FBE9E7; color: var(--error); padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.v-aviso { background: #DCEDEA; color: var(--tinta); padding: 10px 14px; border-radius: 10px; font-size: .92rem; }

/* Opciones en pastillas (trato, plan) */
.v-opciones { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.v-opciones legend { padding: 0; margin-bottom: 6px; }
.v-opcion { position: relative; }
.v-opcion input { position: absolute; opacity: 0; inset: 0; }
.v-opcion span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco); font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.v-opcion input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.v-opcion input:focus-visible + span { outline: 3px solid var(--sello); outline-offset: 2px; }

/* ---------- Botones ---------- */
.v-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 650; font-size: 1.02rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.v-boton:disabled { opacity: .55; cursor: default; }
.v-boton--sello { background: var(--sello); color: var(--tinta); }
.v-boton--sello:hover:not(:disabled) { background: #E3A71F; }
.v-boton--tinta { background: var(--tinta); color: var(--blanco); }
.v-boton--tinta:hover:not(:disabled) { background: var(--mar); }
.v-boton--linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.v-boton--linea:hover:not(:disabled) { background: var(--tinta); color: var(--blanco); }
.v-enlace { border: 0; background: none; padding: 2px 0; font: inherit; font-size: .95rem; color: var(--mar); font-weight: 620; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.v-enlace:disabled { opacity: .6; cursor: default; }
.v-enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* ---------- Telefono de WhatsApp (igual al de la landing) ---------- */
.telefono {
  width: min(340px, 100%); border-radius: 34px; overflow: hidden; background: #EFEAE2;
  border: 9px solid var(--tinta); box-shadow: 0 34px 70px -34px rgba(18, 52, 59, .6);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #111B21;
  display: flex; flex-direction: column;
}
.wa-cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 6px; background: #008069; color: #fff; }
.wa-cab__atras svg { width: 24px; height: 24px; }
.wa-cab__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #F8C9D4; color: #8C2F47; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.wa-cab__nombre { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: .98rem; line-height: 1.2; }
.wa-cab__nombre b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-cab__nombre small { font-weight: 400; font-size: .76rem; opacity: .85; }
.wa-chat {
  list-style: none; margin: 0; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(circle at 12px 12px, rgba(17, 27, 33, .045) 2px, transparent 2.5px) 0 0 / 28px 28px,
    radial-gradient(circle at 26px 22px, rgba(17, 27, 33, .035) 1.5px, transparent 2px) 0 0 / 34px 34px,
    #EFEAE2;
}
.wa-fecha { align-self: center; background: #FFFFFF; color: #54656F; font-size: .74rem; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); margin: 2px 0 6px; }
.wa-globo {
  position: relative; max-width: 84%; padding: 6px 8px 8px 9px; border-radius: 8px; font-size: .88rem; line-height: 1.35;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; white-space: pre-line;
}
.wa-globo--yo { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0; margin-top: 6px; }
.wa-globo--negocio { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 0; }
.wa-globo--negocio + .wa-globo--negocio { border-top-left-radius: 8px; }
.wa-globo--yo::before, .wa-globo--negocio:not(.wa-globo--negocio + .wa-globo--negocio)::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-globo--yo::before { right: -8px; background: #D9FDD3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-globo--negocio:not(.wa-globo--negocio + .wa-globo--negocio)::before { left: -8px; background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-hora { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 10px; font-size: .68rem; color: #667781; line-height: 1; white-space: nowrap; }
.visto { width: 16px; height: 11px; color: #53BDEB; }
.wa-link { color: #027EB5; text-decoration: underline; }
.wa-globo--foto { padding: 3px; }
.wa-hora--sobre { position: absolute; right: 9px; bottom: 9px; float: none; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.foto {
  display: block; width: 168px; aspect-ratio: 4 / 3; border-radius: 6px;
  background:
    radial-gradient(circle at 50% 26%, #F2B632 0 7px, transparent 8px),
    linear-gradient(transparent 33%, #5B3426 33% 47%, #F7E7D6 47% 52%, #5B3426 52% 70%, #F7E7D6 70% 75%, #4A2A1F 75% 86%, transparent 86%) 50% 0 / 58% 100% no-repeat,
    linear-gradient(transparent 86%, #C9D8D5 86% 90%, transparent 90%) 50% 0 / 78% 100% no-repeat,
    #F4E9DD;
}
/* "escribiendo…": tres puntos dentro de un globo */
.wa-escribiendo { display: inline-flex; gap: 4px; padding: 4px 2px; }
.wa-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; }
.wa-barra { display: flex; align-items: center; gap: 6px; padding: 6px 8px 10px; background: #EFEAE2; }
.wa-barra__campo { flex: 1; background: #fff; border-radius: 22px; padding: 10px 14px; color: #8696A0; font-size: .9rem; }
.wa-barra__mic { width: 42px; height: 42px; border-radius: 50%; background: #00A884; color: #fff; display: grid; place-items: center; }
.wa-barra__mic svg { width: 22px; height: 22px; }

/* ---------- Ticket del pedido y sello (igual que la landing) ---------- */
.comprobante {
  position: relative; width: 240px; padding: 18px 15px 14px;
  background: var(--blanco); color: var(--tinta); border-radius: 4px 4px 14px 14px;
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .8rem;
  box-shadow: 0 24px 48px -20px rgba(18, 52, 59, .45);
  transform: rotate(2deg);
}
.comprobante::before {
  content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle 6px at 10px 0, transparent 98%, var(--blanco)) -10px 6px / 20px 12px repeat-x;
}
.comprobante__titulo { font-family: var(--titulo); font-weight: 720; font-size: 1rem; margin-bottom: 10px; }
.comprobante dl { margin: 0; display: grid; gap: 5px; }
.comprobante dl div { display: flex; gap: 8px; align-items: baseline; border-bottom: 1px dashed var(--linea); padding-bottom: 5px; }
.comprobante dt { color: var(--grafito); white-space: nowrap; }
.comprobante dd { margin: 0 0 0 auto; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.sello {
  position: absolute; left: -26px; bottom: -22px;
  padding: 7px 12px; border: 3px solid var(--sello); border-radius: 10px;
  background: var(--tinta); color: var(--sello); white-space: nowrap;
  font-family: var(--titulo); font-weight: 800; font-size: .92rem; letter-spacing: -0.01em;
  transform: rotate(-8deg);
}

/* Movimiento: el mismo de la landing. Los globos llegan uno por uno y el sello cae al final. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: aparecer .4s ease-out both; }
  .sella { animation: sellar .32s cubic-bezier(.2, .9, .3, 1.3) both; }
  .wa-escribiendo i { animation: punto 1.1s ease-in-out infinite; }
  .wa-escribiendo i:nth-child(2) { animation-delay: .15s; }
  .wa-escribiendo i:nth-child(3) { animation-delay: .3s; }
}
@keyframes aparecer { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes sellar { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }
@keyframes punto { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

/* ---------- Ingresar ---------- */
.v-ingresar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v-ingresar__lado { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 48px) clamp(16px, 5vw, 72px); }
.v-ingresar__caja { width: 100%; max-width: 400px; margin: auto 0; padding: 32px 0; }
.v-ingresar__caja h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.6rem); letter-spacing: -0.028em; }
.v-ingresar__caja .v-intro { margin: 12px 0 28px; color: var(--grafito); font-size: 1.05rem; }
.v-ingresar__pie { color: var(--grafito); font-size: .92rem; }
.v-ingresar__pie a { color: var(--mar); font-weight: 620; }
.v-ingresar__escena { background: var(--tinta); display: grid; place-items: center; padding: 48px 24px; position: relative; overflow: hidden; }
.v-ingresar__escena .escena { position: relative; display: grid; justify-items: center; }
.v-ingresar__escena .telefono { margin-right: 70px; }
.v-ingresar__escena .comprobante { position: absolute; right: -30px; bottom: -30px; }
.v-ingresar__escena .telefono { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); border-color: #0B2227; }
@media (max-width: 900px) {
  .v-ingresar { grid-template-columns: 1fr; }
  .v-ingresar__escena { display: none; }
}

/* ---------- Contratar ---------- */
.v-compra { width: min(1180px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; padding: 22px 0 64px; }
.v-compra__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 4vw, 44px); }
.v-compra__barra .v-ayuda a { color: var(--mar); font-weight: 620; }
.v-compra__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 6vw, 88px); align-items: start; }
.v-compra__form { max-width: 560px; }
.v-compra__form h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -0.028em; }
.v-compra__form .v-intro { margin: 12px 0 28px; color: var(--grafito); font-size: 1.08rem; max-width: 44ch; }
.v-compra__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }

/* Pasos: secuencia real, numerada */
.v-pasos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: paso; }
.v-pasos li { counter-increment: paso; padding-top: 10px; border-top: 3px solid var(--linea); font-size: .82rem; font-weight: 600; color: var(--grafito); transition: border-color .3s, color .3s; }
.v-pasos li::before { content: counter(paso) '  '; color: inherit; font-weight: 780; }
.v-pasos li.hecho { border-color: var(--mar); color: var(--mar); }
.v-pasos li.actual { border-color: var(--tinta); color: var(--tinta); }
@media (max-width: 560px) { .v-pasos li span { display: none; } .v-pasos li.actual span { display: inline; } .v-pasos { grid-template-columns: repeat(5, auto); } .v-pasos li.actual { grid-column: span 1; } }

/* Vista previa: el telefono acompana mientras se llena */
.v-vista { position: sticky; top: 24px; display: grid; justify-items: center; gap: 0; }
.v-vista__nota { margin-top: 14px; transition: margin-top .3s; font-size: .88rem; color: var(--grafito); text-align: center; max-width: 30ch; }
.v-vista .telefono { height: 560px; }
.v-vista .wa-chat { flex: 1; overflow-y: auto; scrollbar-width: none; }
.v-vista .wa-chat::-webkit-scrollbar { display: none; }
.v-vista .comprobante { margin-top: -54px; margin-left: 150px; z-index: 1; }
/* Con el ticket a la vista, la nota baja para que el sello no la tape */
.v-vista .comprobante:not(.oculto) + .v-vista__nota { margin-top: 44px; }
@media (max-width: 900px) {
  .v-compra__fila { grid-template-columns: 1fr; }
  .v-vista { position: static; order: -1; }
  .v-vista .telefono { height: 320px; }
  .v-vista .comprobante { margin-left: 90px; }
}

/* Resumen del pago */
.v-resumen { background: var(--blanco); border: 1px solid var(--linea); border-radius: 22px; padding: 22px 22px 18px; }
.v-resumen dl { margin: 0; display: grid; gap: 8px; }
.v-resumen dl div { display: flex; justify-content: space-between; gap: 12px; }
.v-resumen dt { color: var(--grafito); }
.v-resumen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-resumen .v-total { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 4px; font-size: 1.15rem; }
.v-resumen .v-total dt { color: var(--tinta); font-weight: 650; }
.v-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v-plan { position: relative; }
.v-plan input { position: absolute; opacity: 0; inset: 0; }
.v-plan span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 14px 12px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--blanco); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.v-plan b { font-size: 1.05rem; }
.v-plan em { font-style: normal; font-family: var(--titulo); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.v-plan small { color: var(--grafito); font-size: .82rem; }
.v-plan input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.v-plan input:checked + span em { color: var(--sello); }
.v-plan input:checked + span small { color: #B7CFCB; }
.v-plan input:focus-visible + span { outline: 3px solid var(--sello); outline-offset: 2px; }
@media (max-width: 520px) { .v-planes { grid-template-columns: 1fr; } }
.v-lista-incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--grafito); font-size: .95rem; }
.v-lista-incluye li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--sello); margin-right: 10px; translate: 0 -2px; }
.v-garantias { margin-top: 12px; font-size: .88rem; color: var(--grafito); }

/* Aceptar terminos */
.v-acepto { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.v-acepto input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinta); cursor: pointer; }
.v-acepto a { color: var(--mar); font-weight: 620; }
.v-enlaces .v-ayuda a { color: var(--mar); font-weight: 620; }

/* Mi plan */
.v-subtitulo { font-size: 1.3rem; letter-spacing: -0.015em; margin: 6px 0 0; }
.v-bloque { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--linea); }
.v-pendiente { border-color: var(--sello); border-width: 2px; }
.v-pendiente__titulo { margin-bottom: 4px; }
.v-pendiente .v-ayuda { margin-bottom: 12px; }
.v-cupo { height: 8px; border-radius: 999px; background: var(--papel); overflow: hidden; margin-top: 12px; }
.v-cupo span { display: block; height: 100%; border-radius: inherit; background: var(--mar); transition: width .4s ease-out; }
.v-boton--chico { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.v-cambios { display: grid; gap: 10px; width: 100%; }
.v-cambio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; }
.v-cambio__accion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.v-tabla th { text-align: left; font-weight: 620; color: var(--grafito); padding: 6px 8px 8px 0; border-bottom: 1px solid var(--linea); }
.v-tabla td { padding: 10px 8px 10px 0; border-bottom: 1px dashed var(--linea); }
.v-tabla td:last-child, .v-tabla th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

/* Periodos de pago */
.v-periodos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v-periodo { position: relative; }
.v-periodo input { position: absolute; opacity: 0; inset: 0; }
.v-periodo span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 12px 10px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.v-periodo b { font-size: .98rem; }
.v-periodo em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-periodo small { color: var(--mar); font-size: .78rem; font-weight: 600; }
.v-periodo input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.v-periodo input:checked + span small { color: var(--sello); }
.v-periodo input:focus-visible + span { outline: 3px solid var(--sello); outline-offset: 2px; }
@media (max-width: 620px) { .v-periodos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }