/* ==========================================================================
   CFV Por Llegar (Preventa) - optional LIGHT theme.

   Linked LAST in _LayoutPerezZeledon.cshtml. Every themed rule is scoped under
   html[data-theme="light"], so the default dark theme renders exactly as
   before. The only unscoped rules target the new .theme-toggle button.

   In light, --cyan becomes deep teal (it is used mostly for TEXT: eyebrows,
   section titles, prices, links). The places that use it as a FILL
   (primary buttons, badges, cart dot, current page) are restored to the
   brand cyan with dark text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme toggle (both themes; new element only). Sits in .nav-actions and
   inherits the .icon-btn look (44x44 round, 20px stroke icon).
   -------------------------------------------------------------------------- */
.pll-page .theme-toggle {
    display: grid;
    place-items: center;
}

.pll-page .theme-toggle .theme-toggle__icon {
    grid-area: 1 / 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The visible icon is the mode the button switches TO:
   sun while dark (go light), moon while light (go dark). */
.pll-page .theme-toggle .theme-toggle__moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

html[data-theme="light"] .pll-page .theme-toggle .theme-toggle__sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

html[data-theme="light"] .pll-page .theme-toggle .theme-toggle__moon {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .pll-page .theme-toggle .theme-toggle__icon {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"] .pll-page {
    --bg: #f5f7f8;
    --bg-2: #eef2f4;
    --panel: #ffffff;
    --panel-2: #f3f6f7;
    --text: #0f1a1f;
    --muted: #53636a;
    --line: rgba(15, 26, 31, 0.12);
    --cyan: #007a7c;                   /* text/icons: 5.2:1 on white */
    --cyan-2: #008e90;                 /* focus ring, hover links */
    --cyan-soft: rgba(0, 142, 144, 0.10);
    --cyan-line: rgba(0, 142, 144, 0.42);
    --shadow: 0 22px 70px rgba(15, 26, 31, 0.12);
    /* Light-only helpers */
    --cyan-fill: #08e3ed;
    --cyan-fill-hover: #44f5fc;
    --on-cyan: #001416;
    --body-soft: #3e4c53;
    --danger: #c92a2a;
    --warn-text: #7a4300;
}

/* --------------------------------------------------------------------------
   2. Page background (dark gradient + white grid overlay)
   -------------------------------------------------------------------------- */
html[data-theme="light"] body.pll-page {
    background:
        radial-gradient(circle at 80% 4%, rgba(0, 142, 144, 0.07), transparent 28%),
        linear-gradient(180deg, #f8fafb 0%, #f3f6f7 42%, #eef2f4 100%);
    background-attachment: fixed;
}

html[data-theme="light"] body.pll-page::before {
    background-image:
        linear-gradient(rgba(15, 26, 31, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 26, 31, 0.05) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .btn {
    border-color: rgba(15, 26, 31, 0.22);
    color: var(--text);
}

html[data-theme="light"] .pll-page .btn:hover {
    border-color: var(--cyan-2);
    box-shadow: 0 14px 32px rgba(0, 142, 144, 0.14);
    color: var(--text);
}

html[data-theme="light"] .pll-page .btn-primary,
html[data-theme="light"] .pll-page .pll-cart-foot .btn.btn-primary {
    background: var(--cyan-fill);
    border-color: var(--cyan-fill);
    color: var(--on-cyan);
}

html[data-theme="light"] .pll-page .btn-primary:hover {
    background: var(--cyan-fill-hover);
    border-color: var(--cyan-fill-hover);
    color: var(--on-cyan);
}

html[data-theme="light"] .pll-page .product-card .btn {
    color: var(--cyan);
    border-color: var(--cyan-line);
}

html[data-theme="light"] .pll-page .product-card .btn:hover {
    background: var(--cyan-fill);
    border-color: var(--cyan-fill);
    color: var(--on-cyan);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
}

html[data-theme="light"] .pll-page .site-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 10px rgba(15, 26, 31, 0.06);
}

/* Logo art is light cyan on transparent: darken it so it reads on white */
html[data-theme="light"] .pll-page .brand img,
html[data-theme="light"] .pll-page .footer-brand img {
    filter: brightness(0.55);
}

html[data-theme="light"] .pll-page .menu a {
    color: var(--text);
}

html[data-theme="light"] .pll-page .menu a[aria-current="page"] {
    color: var(--cyan);
}

html[data-theme="light"] .pll-page .icon-btn {
    color: var(--text);
}

html[data-theme="light"] .pll-page .icon-btn:hover {
    background: rgba(15, 26, 31, 0.06);
}

html[data-theme="light"] .pll-page .cart-dot {
    background: var(--cyan-fill);
    color: var(--on-cyan);
}

html[data-theme="light"] .pll-page .whatsapp {
    color: #15803d;
}

html[data-theme="light"] .pll-page .nav-search {
    background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .pll-page .nav-search input {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
    color: var(--text);
}

html[data-theme="light"] .pll-page .nav-search input:focus {
    border-color: var(--cyan-2);
}

@media (max-width: 820px) {
    html[data-theme="light"] .pll-page .menu {
        background: #ffffff;
        box-shadow: 0 18px 40px rgba(15, 26, 31, 0.12);
    }
}

/* --------------------------------------------------------------------------
   5. Hero (dark backdrop art is hidden; products sit on the light page)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .hero::before {
    display: none;
}

html[data-theme="light"] .pll-page .hero-overlay {
    background: radial-gradient(ellipse at 58% 46%, rgba(0, 142, 144, 0.12) 0%, rgba(0, 142, 144, 0.04) 42%, transparent 72%);
}

html[data-theme="light"] .pll-page .hero-art::after {
    background: radial-gradient(ellipse at center, rgba(15, 26, 31, 0.14), rgba(15, 26, 31, 0.04) 40%, transparent 70%);
}

html[data-theme="light"] .pll-page .hero-product {
    filter: drop-shadow(0 22px 22px rgba(15, 26, 31, 0.22));
}

html[data-theme="light"] .pll-page .hero p {
    color: var(--body-soft);
}

html[data-theme="light"] .pll-page .trust {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   6. Product cards
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .product-card {
    background: var(--panel);
    border-color: rgba(0, 142, 144, 0.26);
    box-shadow: 0 2px 10px rgba(15, 26, 31, 0.05);
}

html[data-theme="light"] .pll-page .product-card:hover,
html[data-theme="light"] .pll-page .product-card:focus-within {
    border-color: var(--cyan-2);
    box-shadow: 0 24px 50px rgba(15, 26, 31, 0.12);
}

html[data-theme="light"] .pll-page .product-image {
    background: #f4f4f5;
    border-bottom-color: rgba(0, 142, 144, 0.14);
}

html[data-theme="light"] .pll-page .product-image--empty {
    background:
        radial-gradient(circle at 50% 38%, rgba(0, 142, 144, 0.08), transparent 58%),
        #eef2f4;
    color: var(--muted);
}

html[data-theme="light"] .pll-page .product-image--empty span {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .badge-ribbon {
    background: var(--cyan-fill);
    color: var(--on-cyan);
}

html[data-theme="light"] .pll-page .badge-ribbon--outline {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--cyan-line);
    color: var(--cyan);
}

html[data-theme="light"] .pll-page .meta {
    color: var(--muted);
}

/* Offer price: red that keeps 4.5:1 on white. */
html[data-theme="light"] .pll-page .price-new {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   7. Shipment aggregates, toolbar, empty state, pager
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .claimed {
    background:
        linear-gradient(90deg, rgba(0, 142, 144, 0.06), transparent 38%),
        #ffffff;
}

html[data-theme="light"] .pll-page .claimed small,
html[data-theme="light"] .pll-page .stat small {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .stat small:first-child {
    color: var(--cyan);
}

html[data-theme="light"] .pll-page .toolbar .field,
html[data-theme="light"] .pll-page .toolbar select {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
    color: var(--text);
}

html[data-theme="light"] .pll-page .toolbar input {
    color: var(--text);
}

html[data-theme="light"] .pll-page .toolbar select:focus,
html[data-theme="light"] .pll-page .toolbar .field:focus-within {
    border-color: var(--cyan-2);
}

html[data-theme="light"] .pll-page .empty {
    background: #ffffff;
}

html[data-theme="light"] .pll-page .pager a,
html[data-theme="light"] .pll-page .pager span {
    color: var(--text);
    background: #ffffff;
}

html[data-theme="light"] .pll-page .pager a:hover {
    border-color: var(--cyan-2);
    color: var(--cyan);
}

html[data-theme="light"] .pll-page .pager .current {
    background: var(--cyan-fill);
    border-color: var(--cyan-fill);
    color: var(--on-cyan);
}

/* --------------------------------------------------------------------------
   8. Process steps, categories, CTA
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .step .n {
    color: var(--text);
}

html[data-theme="light"] .pll-page .step p {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .category {
    border-color: rgba(0, 142, 144, 0.26);
    background: linear-gradient(180deg, #ffffff, #f1f4f6);
}

html[data-theme="light"] .pll-page .category img {
    filter: drop-shadow(0 16px 16px rgba(15, 26, 31, 0.18));
}

html[data-theme="light"] .pll-page .category::after {
    background: linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, 0.94) 82%);
}

html[data-theme="light"] .pll-page .category--active {
    border-color: var(--cyan-2);
}

html[data-theme="light"] .pll-page .category-copy span {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .cta {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 142, 144, 0.04) 60%, rgba(0, 142, 144, 0.09) 100%);
}

html[data-theme="light"] .pll-page .cta::after {
    -webkit-text-stroke: 1px rgba(0, 142, 144, 0.14);
}

html[data-theme="light"] .pll-page .cta p {
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .footer-brand p,
html[data-theme="light"] .pll-page .site-footer li {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .copyright {
    color: #5f6d74;
}

/* --------------------------------------------------------------------------
   10. Product detail
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .detail-media {
    border-color: rgba(0, 142, 144, 0.26);
    background: #f4f4f5;
}

html[data-theme="light"] .pll-page .detail-media--empty {
    color: var(--muted);
    background:
        radial-gradient(circle at 50% 38%, rgba(0, 142, 144, 0.08), transparent 58%),
        #eef2f4;
}

html[data-theme="light"] .pll-page .detail-desc {
    color: var(--body-soft);
}

html[data-theme="light"] .pll-page .tags .pill {
    color: var(--text);
}

html[data-theme="light"] .pll-page .detail-form input {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
    color: var(--text);
}

html[data-theme="light"] .pll-page .detail-form input:focus {
    border-color: var(--cyan-2);
}

/* Size buttons (site.css "Sizes as buttons"). */
html[data-theme="light"] .pll-page .pll-size__face {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
}

html[data-theme="light"] .pll-page .pll-size input:checked + .pll-size__face {
    border-color: var(--cyan-2);
    background: var(--cyan-soft);
    box-shadow: 0 0 0 2px rgba(0, 142, 144, 0.18);
}

html[data-theme="light"] .pll-page .pll-size input:disabled + .pll-size__face {
    border-color: rgba(201, 42, 42, 0.35);
    background: #fdecec;
    color: var(--danger);
}

html[data-theme="light"] .pll-page .pll-size input:disabled + .pll-size__face .pll-size__stock {
    color: var(--danger);
}

html[data-theme="light"] .pll-page .alert-avify {
    border-color: rgba(191, 132, 0, 0.5);
    background: rgba(255, 196, 0, 0.12);
    color: var(--warn-text);
}

/* --------------------------------------------------------------------------
   11. Diagnostic panel
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .debug-panel {
    background: rgba(0, 142, 144, 0.04);
}

html[data-theme="light"] .pll-page .debug-grid strong {
    color: var(--text);
}

html[data-theme="light"] .pll-page .debug-tag {
    color: var(--muted);
}

html[data-theme="light"] .pll-page .debug-panel pre {
    background: #f4f6f7;
    color: var(--body-soft);
}

/* --------------------------------------------------------------------------
   12. Reservations drawer
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-cart-overlay {
    background: rgba(15, 26, 31, 0.45);
}

html[data-theme="light"] .pll-cart-drawer {
    box-shadow: -22px 0 70px rgba(15, 26, 31, 0.18);
}

html[data-theme="light"] .pll-cart-thumb {
    background: #f4f4f5;
}

html[data-theme="light"] .pll-cart-qty {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
}

html[data-theme="light"] .pll-cart-remove:hover,
html[data-theme="light"] .pll-cart-clear:hover {
    color: var(--danger);
    border-color: rgba(201, 42, 42, 0.4);
}

/* --------------------------------------------------------------------------
   13. Reservation page
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .pll-reserve-thumb {
    background: #f4f4f5;
}

html[data-theme="light"] .pll-page .pll-reserve-qty input,
html[data-theme="light"] .pll-page .pll-field input,
html[data-theme="light"] .pll-page .pll-field textarea {
    background: #ffffff;
    border-color: rgba(15, 26, 31, 0.2);
}

html[data-theme="light"] .pll-page .pll-field input::placeholder,
html[data-theme="light"] .pll-page .pll-field textarea::placeholder {
    color: #6b7980;
}

html[data-theme="light"] .pll-page .pll-field input.input-validation-error,
html[data-theme="light"] .pll-page .pll-field textarea.input-validation-error {
    border-color: var(--danger);
}

html[data-theme="light"] .pll-page .pll-field-error {
    color: var(--danger);
}

html[data-theme="light"] .pll-page .pll-sinpe-amount small,
html[data-theme="light"] .pll-page .pll-sinpe-steps,
html[data-theme="light"] .pll-page .pll-result p {
    color: var(--body-soft);
}

html[data-theme="light"] .pll-page .pll-sinpe-warn {
    border-color: rgba(191, 110, 0, 0.45);
    background: rgba(255, 170, 60, 0.12);
    color: var(--warn-text);
}

html[data-theme="light"] .pll-page .pll-sinpe-warn strong {
    color: #5c3200;
}

html[data-theme="light"] .pll-page .pll-result--error {
    border-color: rgba(201, 42, 42, 0.45);
}

html[data-theme="light"] .pll-page .pll-result--error h2 {
    color: var(--danger);
}

html[data-theme="light"] .pll-page .pll-result-warn {
    color: var(--warn-text) !important;
}

html[data-theme="light"] .pll-page .pll-recall {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Filtros de la tienda (Categorias / Tallas / Combos, wwwroot/css/filtros-tienda.css).
   Only the --ft-* tokens change: cyan stays a FILL with dark ink, teal does the text,
   borders and focus, as everywhere else in this theme.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .pll-page .ft-bar,
html[data-theme="light"] .pll-page .ft-results {
    --ft-accent: var(--cyan-fill);
    --ft-accent-ink: var(--on-cyan);
    --ft-accent-text: var(--cyan);
    --ft-accent-strong: var(--cyan-2);
    --ft-accent-soft: var(--cyan-soft);
    --ft-accent-line: var(--cyan-line);
    --ft-ring: rgba(0, 142, 144, 0.18);
    --ft-glow: rgba(0, 142, 144, 0.2);
    --ft-bar-bg: rgba(255, 255, 255, 0.94);
    --ft-panel-bg: #f8fbfc;
    --ft-card-bg: #ffffff;
    --ft-control-bg: #ffffff;
    --ft-control-hover: #eef2f4;
    --ft-line: var(--line);
    --ft-line-strong: rgba(15, 26, 31, 0.2);
    --ft-line-hover: rgba(15, 26, 31, 0.32);
    --ft-text: var(--text);
    --ft-muted: var(--muted);
    --ft-bubble: rgba(15, 26, 31, 0.06);
    --ft-bubble-on-accent: rgba(0, 0, 0, 0.12);
    --ft-shadow-stuck: 0 8px 20px rgba(15, 26, 31, 0.1);
    --ft-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353636a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}