/* ==========================================================================
   Cartple · estilos compartidos por la web pública, el panel de tiendas, el de
   gestión y los logins/registros (layouts public, panel, admin y auth). Se carga ANTES de style.css o
   panel.css. Aquí va solo lo que tiene que verse igual en todas partes.
   ========================================================================== */

/* ==========================================================================
   Cursor personalizado (public/js/cursor.js): punto blanco con mix-blend-mode: difference
   Solo se activa con ratón: el script añade .cp-has-cursor a <html>; en táctil no existe.
   ========================================================================== */

.cp-has-cursor, .cp-has-cursor * { cursor: none !important; }
/* En campos de texto vuelve el cursor nativo: hace falta para colocar el punto de escritura. */
.cp-has-cursor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]), textarea, [contenteditable="true"]) { cursor: text !important; }

.cp-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    pointer-events: none;
    mix-blend-mode: difference;   /* blanco sobre blanco = negro; blanco sobre negro = blanco */
    opacity: 0;
    transition: opacity .2s var(--cp-ease, cubic-bezier(.2, .7, .2, 1));
    will-change: transform;
}
.cp-cursor.is-visible { opacity: 1; }
.cp-cursor.is-text { opacity: 0; }

.cp-cursor-dot {
    display: block;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;      /* centrado en la punta del ratón */
    border-radius: 50%;
    background: #FFFFFF;
    transform: scale(.25);        /* 10 px en reposo */
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cp-cursor.is-hover .cp-cursor-dot { transform: scale(1); }      /* 40 px sobre enlaces y botones */
.cp-cursor.is-pressed .cp-cursor-dot { transform: scale(.2); }
.cp-cursor.is-hover.is-pressed .cp-cursor-dot { transform: scale(.8); }

@media (prefers-reduced-motion: reduce) {
    .cp-cursor-dot { transition: none; }
}


/* ==========================================================================
   Desplegable propio (public/js/select.js), solo en pantallas con ratón.
   Sustituye la lista nativa del sistema (azul en macOS, gris en Windows) por una
   blanca y negra. Dos variantes:
     - .cp-select-button: botón transparente del buscador de la web (data-cp-select).
     - .cp-select-field:  campo .form-select del panel y los registros, dentro de .cp-select.
   ========================================================================== */
.cp-select-native,
select[data-cp-select][hidden] { display: none !important; }
.cp-select-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--cp-black, #000);
    text-align: left;
    cursor: pointer;
}
.cp-select-button:focus { outline: none; }
.cp-select-button:focus-visible .cp-select-value { text-decoration: underline; text-underline-offset: .3em; }
.cp-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-select-button::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .25s var(--cp-ease, cubic-bezier(.2, .7, .2, 1));
}

.cp-select-list {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 1060;
    min-width: 100%;
    width: max-content;
    max-width: min(22rem, 90vw);
    max-height: 20rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem;
    background: var(--cp-white, #fff);
    border: 1px solid var(--cp-hairline, rgba(0, 0, 0, .08));
    border-radius: 18px;
    box-shadow: var(--cp-shadow-lg, 0 4px 12px rgba(0, 0, 0, .06), 0 28px 64px rgba(0, 0, 0, .12));
    outline: none;
    animation: cp-select-in .18s var(--cp-ease, cubic-bezier(.2, .7, .2, 1));
}
@keyframes cp-select-in { from { opacity: 0; transform: translateY(-6px); } }

.cp-select-group {
    padding: .9rem .9rem .35rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cp-muted, #595959);
}
.cp-select-option {
    position: relative;
    padding: .55rem 2.25rem .55rem .9rem;
    border-radius: 10px;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--cp-black, #000);
    cursor: pointer;
}
[role="group"] .cp-select-option { padding-left: 1.4rem; }
.cp-select-option.is-active { background: var(--cp-surface, #F7F7F7); }
.cp-select-option[aria-selected="true"] { font-weight: 700; }
.cp-select-option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: .9rem;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") no-repeat center;
}
.cp-select-option[aria-disabled="true"] { color: var(--cp-muted, #595959); cursor: default; }

/* ---- Variante campo de formulario (panel, logins y registros) ---- */
.cp-select { position: relative; display: block; }
.cp-select--inline { display: inline-block; vertical-align: middle; }
/* Mismo aspecto que .form-select de Bootstrap (las clases se copian del select). */
.cp-select-field {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    text-align: left;
    cursor: pointer;
}
.cp-select--inline .cp-select-field { min-width: 9rem; }
.cp-select-field .cp-select-value { flex: 1 1 auto; }
.cp-select-field.is-placeholder .cp-select-value { color: var(--bs-secondary-color, #595959); }
.cp-select-field:disabled { cursor: default; }
.cp-select.is-open .cp-select-field {
    border-color: var(--panel-night, #0F172A);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}
.cp-select.is-open .cp-select-field.is-invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }
/* La flecha de Bootstrap (imagen de fondo) se sustituye por la fina de la web, que gira al abrir. */
.cp-select-field.form-select { background-image: none !important; padding-right: 2.5rem; position: relative; }
.cp-select-field::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .25s var(--cp-ease, cubic-bezier(.2, .7, .2, 1));
}
.cp-select.is-open .cp-select-field::after { transform: rotate(180deg); }
.cp-select-field.form-select-sm { padding-right: 2.1rem; }
.cp-select-field.form-select-sm::after { right: .8rem; }
.cp-select-field.form-select-sm + .cp-select-list .cp-select-option { padding-block: .45rem; font-size: .875rem; }
/* Con .is-invalid, Bootstrap añade su icono de fondo (lo quita el !important de arriba): basta el borde rojo + mensaje. */
.cp-select-field.form-select.is-invalid { padding-right: 2.5rem; }
/* La lista del panel no lleva el tipo de letra heredado del botón: se lo damos. */
.cp-select .cp-select-list { font-family: inherit; }
@media (prefers-reduced-motion: reduce) {
    .cp-select-list { animation: none; }
    .cp-select-field::after, .cp-select-button::after { transition: none; }
}


/* ==========================================================================
   Píldoras de filtro: el mismo trazo que las categorías de la portada
   (.cp-category-pill): borde fino, esquinas redondas y un punto de color opcional.
   La activa (aria-current="page") va en azul noche. En pantallas estrechas la fila
   se desliza en horizontal en lugar de partirse en varias líneas.

     <nav class="cp-pills" aria-label="..."><ul>
       <li><a class="cp-pill" href="..." aria-current="page">Todas</a></li>
       <li><a class="cp-pill cp-pill--warning" href="..."><span class="cp-pill-dot"></span>Pendiente</a></li>
     </ul></nav>
   ========================================================================== */
.cp-pills { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cp-pills::-webkit-scrollbar { display: none; }
.cp-pills ul { display: flex; gap: .5rem; margin: 0; padding: 2px; list-style: none; }   /* 2px: el foco no se corta */
.cp-pills li { flex: none; }
.cp-pill {
    --cp-pill-ink: var(--cp-black, #000);
    --cp-pill-line: var(--cp-hairline, rgba(0, 0, 0, .08));
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--cp-pill-line);
    border-radius: 50px;
    background: #FFFFFF;
    color: var(--cp-pill-ink);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s var(--cp-ease, cubic-bezier(.2, .7, .2, 1)), background-color .2s var(--cp-ease, cubic-bezier(.2, .7, .2, 1));
}
.cp-pill:hover, .cp-pill:focus-visible { border-color: var(--cp-pill-ink); color: var(--cp-pill-ink); }
.cp-pill[aria-current="page"] { background: var(--cp-night, #0F172A); border-color: var(--cp-night, #0F172A); color: #FFFFFF; }
.cp-pill-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cp-dot, currentColor); }
.cp-pill-count { font-size: .8125rem; opacity: .55; font-variant-numeric: tabular-nums; }
.cp-pill--success { --cp-dot: #15803D; }
.cp-pill--warning { --cp-dot: #B45309; }
.cp-pill--danger  { --cp-dot: #B91C1C; }
/* Sobre el azul noche, el punto lleva un aro blanco para que se siga viendo el color. */
.cp-pill[aria-current="page"] .cp-pill-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
/* Campo trampa para bots (<x-honeypot />): fuera de la pantalla, sin ocupar sitio. */
.cp-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }