/* Lo propio de Ponso encima de Materialize (public/vendor/materialize). Va después del CSS de la plantilla. */

/* Inter (licencia OFL, ver /fonts/OFL.txt), solo los caracteres latinos. La plantilla la pide por nombre. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter.woff2) format('woff2'); }

/* El violeta de la marca en lugar del índigo de la plantilla. Son las mismas variables que cambia su personalizador
   de colores; en modo oscuro va uno más claro para que se lea sobre el fondo. */
:root, [data-bs-theme=light] {
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-primary-border-subtle: rgba(124, 58, 237, .65);
}
[data-bs-theme=dark] {
  --bs-primary: #9f7aea;
  --bs-primary-rgb: 159, 122, 234;
  --bs-primary-border-subtle: rgba(159, 122, 234, .39);
}
:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --bs-primary-bg-subtle: color-mix(in sRGB, var(--bs-paper-bg) 84%, var(--bs-primary));
  --bs-primary-contrast: #fff;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: color-mix(in sRGB, #000 10%, var(--bs-primary));
  --bs-link-hover-color-rgb: var(--bs-primary-rgb);
}

/* Lo que la plantilla trae en su demo.css (que no se incluye entero: es casi todo para sus páginas de muestra). */
.menu .app-brand { height: 64px; }
.app-brand-text { font-size: 1.25rem; letter-spacing: .15px; }
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { padding-top: 64px !important; }
.content-wrapper .navbar { z-index: auto; }

/* Con el menú achicado, la barra de arriba, el contenido y el pie ocupan todo el ancho que queda libre.
   Sin esto, en pantallas grandes el tope de 1440px de la plantilla los deja del mismo ancho, solo centrados. */
.layout-menu-collapsed .layout-page .container-xxl { max-width: none; max-inline-size: none; }

/* La plantilla pone en mayúscula cada palabra de los botones ("Ver Todos"): en castellano no se usa. */
.btn, .nav-pills .nav-link { text-transform: none; }

/* El punto rojo de avisos va sobre la campana (sin esto, en el celular se ubica respecto de toda la barra). */
.dropdown-notifications > .nav-link { position: relative; }

/* Buscador de arriba (Ctrl+K). */
.search-dialog { margin-top: 5rem; }
#search-input { font-size: 1.0625rem; }
#search-input::-webkit-search-cancel-button { display: none; }
#search-results { max-height: 60vh; }
.search-head { color: var(--bs-secondary-color); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.search-item { color: inherit; }
.search-item.active { background: var(--bs-primary-bg-subtle); }
.search-item.active .text-heading { color: var(--bs-primary) !important; }
kbd { padding: .1rem .35rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); background: transparent; color: var(--bs-secondary-color); font-family: inherit; font-size: .6875rem; }

/* Miniaturas de posts y fotos de cuentas dentro de .avatar: siempre recortadas, nunca estiradas. */
.avatar img { object-fit: cover; }
.avatar .avatar-initial .icon-base { flex-shrink: 0; }

/* Texto que se corta con "…" dentro de una fila flexible. */
.min-w-0 { min-width: 0; }

/* Lo escondido con `hidden` queda escondido aunque tenga .d-flex u otra clase de display: en la plantilla
   esas clases van después y le ganan (pasaba con los días de la semana en "Cada tantos días"). */
[hidden] { display: none !important; }

/* Botones "Subir": el campo de archivo va escondido adentro pero se puede elegir con el teclado (Tab y Enter);
   el botón muestra cuándo tiene el foco. */
label.btn:has(> input[type="file"]:focus-visible) { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .4); }

/* Tarjetas de números que llevan a otra página. */
a.card { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); }

/* En tablas que no cortan renglón (.text-nowrap), la columna del post sí puede partir el texto. */
.table .cell-post { min-width: 14rem; white-space: normal; }

/* Separador de las filas de una lista dentro de una tarjeta. */
.list-rows > li + li { border-top: 1px solid var(--bs-border-color); }

/* Posts: miniatura con la cantidad de archivos o el ▶ de video. */
.post-thumb { position: relative; display: grid; place-items: center; width: 96px; height: 96px; flex-shrink: 0; overflow: hidden; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb.deleted img { opacity: .5; filter: grayscale(1); }
.thumb-badge { position: absolute; top: 6px; right: 6px; padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; line-height: 1.5; }
.thumb-badge.play { right: auto; left: 6px; display: grid; place-items: center; padding: 2px; }
@media (max-width: 400px) { .post-thumb { width: 72px; height: 72px; } }

/* Calendario: la grilla del mes, con los posts de cada día. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--bs-border-color); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.cal-head { padding: .5rem; background: var(--bs-paper-bg); color: var(--bs-secondary-color); font-size: .8125rem; font-weight: 500; text-align: center; text-transform: uppercase; }
.cal-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 7.5rem; padding: .375rem; background: var(--bs-paper-bg); }
.cal-day.out { background: var(--bs-gray-25); }
.cal-day.out .cal-top span { opacity: .45; }
.cal-top { display: flex; justify-content: space-between; align-items: center; color: var(--bs-heading-color); font-weight: 500; }
.cal-day.today .cal-top span { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bs-primary); color: var(--bs-primary-contrast); }
.cal-add { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: var(--bs-primary); opacity: 0; }
.cal-add:hover { background: var(--bs-primary-bg-subtle); }
.cal-day:hover .cal-add, .cal-add:focus { opacity: 1; }
.cal-post { display: flex; align-items: center; gap: 5px; padding: 2px 4px; overflow: hidden; border-radius: var(--bs-border-radius-sm); font-size: .75rem; font-weight: 500; }
.cal-post img { width: 20px; height: 20px; flex-shrink: 0; object-fit: cover; border-radius: 3px; }
/* Sin fotos, un ícono del mismo tamaño (en el celular no se ve el texto: sin esto quedaría una rayita). */
.cal-post > i { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 14px; }
.cal-post span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-post.deleted { opacity: .6; text-decoration: line-through; }
.cal-post[draggable="true"] { cursor: grab; }
.cal-post.dragging { opacity: .45; }
.cal-day.drop-on { outline: 2px dashed var(--bs-primary); outline-offset: -3px; background: var(--bs-primary-bg-subtle); }
@media (max-width: 767.98px) {
  .cal-day { min-height: 4.5rem; padding: 3px; }
  .cal-post span { display: none; }
  .cal-add { opacity: 1; }
}

/* Revisar: las fotos del post se deslizan, y el texto se ve como saldría. */
.review-media { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--bs-border-radius-lg); }
.review-media a { flex: 0 0 100%; scroll-snap-align: start; }
.review-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); }
.review-media.tall img { aspect-ratio: 9 / 16; }
.review-caption { max-height: 20rem; overflow-y: auto; padding: 1rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-25); color: var(--bs-heading-color); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Editor: los archivos elegidos (con su orden), la biblioteca para elegir y la vista previa. */
.sel { position: relative; width: 104px; height: 104px; overflow: hidden; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); }
.sel img { width: 100%; height: 100%; object-fit: cover; }
.sel-n { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bs-primary); color: var(--bs-primary-contrast); font-size: .6875rem; font-weight: 600; }
.sel-tools { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 14px 4px 3px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.sel-tools button { padding: 0 6px; border: 0; background: none; color: #fff; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.pick-item { position: relative; padding: 0; overflow: hidden; border: 0; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); cursor: pointer; }
.pick-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pick-item.on { outline: 3px solid var(--bs-primary); outline-offset: -3px; }
.when-input { max-width: 18rem; }
.compose-preview { position: sticky; top: 5.5rem; }
@media (max-width: 991.98px) { .compose-preview { position: static; max-width: 360px; margin: 0 auto; } }

/* Vista previa estilo Instagram: siempre en blanco, como se ve en la app. */
.phone { overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: 1.25rem; background: #fff; color: #111; box-shadow: var(--bs-box-shadow); }
.ig-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: .875rem; }
.ig-avatar { width: 30px; height: 30px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: #ede9fe; }
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: #f1f1f4; }
.ig-media > span { color: #8a8a94 !important; }
.ig-media.tall { aspect-ratio: 9 / 16; }
.ig-media img, .ig-media video { width: 100%; height: 100%; object-fit: cover; }
.ig-nav { position: absolute; top: 50%; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); font-size: 1.125rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.ig-nav.prev { left: 8px; }
.ig-nav.next { right: 8px; }
.ig-dots { display: flex; justify-content: center; gap: 4px; min-height: 14px; padding: 8px 0 0; }
.ig-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d4d4d8; }
.ig-dots span.on { background: #0095f6; }
.ig-caption { max-height: 260px; margin: 0; padding: 6px 12px 14px; overflow-y: auto; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Biblioteca: cuadrícula de fotos y videos. */
.lib-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Páginas públicas: portada, vitrina de posts reales y textos legales. */
.public-nav { min-height: 4rem; }
.hero .lead { max-width: 36rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.showcase-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); }
.showcase-grid a:hover img { outline: 2px solid var(--bs-primary); }
.prose { max-width: 50rem; }
.prose li { margin-bottom: .375rem; }

/* Configuración: el botón de guardar queda a mano al bajar. */
.submit-bar { position: sticky; bottom: 0; z-index: 2; padding: 1rem 0; background: linear-gradient(transparent, var(--bs-body-bg) 40%); }

/* Métricas: los gráficos (Chart.js necesita una caja con alto) y el mapa de mejores horarios. */
.chart-box { position: relative; height: 18rem; }
.chart-box-sm { height: 12rem; }
.heat { display: grid; grid-template-columns: 2.5rem repeat(8, minmax(0, 1fr)); gap: 4px; align-items: center; }
.heat small { color: var(--bs-secondary-color); font-size: .75rem; text-align: center; }
.heat i { height: 1.75rem; border-radius: var(--bs-border-radius-sm); background: rgba(var(--bs-primary-rgb), calc(.12 + var(--v) * .88)); }
.heat i.empty { background: var(--bs-gray-50); }
.text-capitalize-first::first-letter { text-transform: uppercase; }

/* Crear con IA: avance de cada pedido. */
.gen-progress { width: 7.5rem; height: 6px; }

/* Marcas: logo, colores del kit y las imágenes de cada grupo (logos sobre damero, para ver la transparencia). */
.brand-logo img { object-fit: contain; padding: 4px; background: var(--bs-gray-25); }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches i { width: 16px; height: 16px; border: 1px solid var(--bs-border-color); border-radius: 50%; }
.swatches.big i { width: 28px; height: 28px; }
.assets { display: flex; flex-wrap: wrap; gap: .5rem; }
.assets figure { width: 96px; margin: 0; text-align: center; }
.assets img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--bs-border-radius-lg); background: var(--bs-gray-50); }
.assets.logos img { padding: 6px; object-fit: contain; background: repeating-conic-gradient(#d4d4d8 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.assets .making { display: grid; place-items: center; height: 96px; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }

/* Guías paso a paso (public/tours.js, con driver.js): la ventanita con los colores de la plantilla, en claro y oscuro. */
.driver-popover.ponso-tour { font-family: inherit; background-color: var(--bs-paper-bg); color: var(--bs-body-color); border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-lg); padding: 1.125rem 1.25rem; max-width: min(22rem, calc(100vw - 2rem)); }
.driver-popover.ponso-tour .driver-popover-title { color: var(--bs-heading-color); font-size: 1.0625rem; font-weight: 500; padding-right: 1.5rem; }
.driver-popover.ponso-tour .driver-popover-description { font-size: .9375rem; }
.driver-popover.ponso-tour .driver-popover-close-btn { color: var(--bs-secondary-color); font-size: 1.375rem; top: .375rem; right: .375rem; }
.driver-popover.ponso-tour .driver-popover-close-btn:hover, .driver-popover.ponso-tour .driver-popover-close-btn:focus-visible { color: var(--bs-heading-color); }
.driver-popover.ponso-tour .driver-popover-footer { margin-top: 1.25rem; }
.driver-popover.ponso-tour .driver-popover-progress-text { color: var(--bs-secondary-color); font-size: .8125rem; }
.driver-popover.ponso-tour .driver-popover-footer-btn { color: var(--bs-primary); background-color: transparent; border: 1px solid var(--bs-primary); border-radius: var(--bs-border-radius); padding: .375rem .875rem; font: inherit; font-size: .875rem; font-weight: 500; text-shadow: none; }
.driver-popover.ponso-tour .driver-popover-footer-btn:hover { background-color: var(--bs-primary-bg-subtle); }
.driver-popover.ponso-tour .driver-popover-next-btn { color: var(--bs-primary-contrast); background-color: var(--bs-primary); }
.driver-popover.ponso-tour .driver-popover-next-btn:hover { background-color: var(--bs-primary); opacity: .9; }
.driver-popover.ponso-tour .driver-popover-footer-btn:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .4); outline-offset: 1px; }
.driver-popover.ponso-tour .driver-popover-navigation-btns button + button { margin-left: .5rem; }
.driver-popover.ponso-tour .driver-popover-arrow-side-left { border-left-color: var(--bs-paper-bg); }
.driver-popover.ponso-tour .driver-popover-arrow-side-right { border-right-color: var(--bs-paper-bg); }
.driver-popover.ponso-tour .driver-popover-arrow-side-top { border-top-color: var(--bs-paper-bg); }
.driver-popover.ponso-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--bs-paper-bg); }