/* ==========================================================================
   CDM / COMEDIMA - interaction.css
   Mejora de la experiencia del cursor + feedback de hover premium.
   NO cambia el diseño ni la distribución: solo normaliza el cursor y añade
   feedback suave (borde/sombra/elevación) usando transform y box-shadow
   (que no reflujan el layout).
   ==========================================================================

   CURSOR CORPORATIVO OPCIONAL
   ---------------------------
   Por defecto se usa el cursor estándar del sistema. Para activar el cursor
   SVG corporativo (flecha negra, contorno amarillo CDM, sombra) basta con
   cambiar UNA variable en :root:

       :root { --ui-cursor: var(--ui-cursor-cdm); }

   Para desactivarlo, dejarlo en `auto` (valor por defecto).
   (El "7 4" es el hotspot: la punta de la flecha.)
   ========================================================================== */

:root {
    --ui-cursor: auto;
    --ui-ease: cubic-bezier(.4, 0, .2, 1);
    /* Cursor corporativo listo (SVG embebido, sin depender de rutas).
       Activar con:  :root { --ui-cursor: var(--ui-cursor-cdm); }  */
    --ui-cursor-cdm: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNOCA1IEw4IDI2IEwxMy40IDIwLjYgTDE3IDI5IEwyMC42IDI3LjQgTDE3IDE5IEwyNCAxOC42IFoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjAuMzUiLz48cGF0aCBkPSJNNyA0IEw3IDI1IEwxMi40IDE5LjYgTDE2IDI4IEwxOS42IDI2LjQgTDE2IDE4IEwyMyAxNy42IFoiIGZpbGw9IiMwYTBhMGEiIHN0cm9rZT0iI2Y1YjgwMCIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') 7 4, auto;
}

/* Cursor base de la interfaz (evita el I-Beam sobre texto no editable). */
html { cursor: var(--ui-cursor); }
body { cursor: var(--ui-cursor); }

/* -------- pointer SOLO en elementos interactivos (botones, enlaces,
   tarjetas clicables e iconos interactivos) -------- */
a[href], button, label[for], summary, select,
[role="button"], [role="option"], [role="tab"], [role="menuitem"], [role="combobox"], [tabindex]:not([tabindex="-1"]),
.btn, .nav-item, .nav__link, .chip, .cds__trigger, .cds__option, .lang-menu__btn,
.icon-btn, .page-btn, .segmented__btn, .theme-switch, .theme-toggle, .lang-toggle,
.cart-btn, .user-menu__btn, .metric-card, .widget__link, .modal__close,
.qty-control__btn, .btn-add, .back-top, .hero__scroll, .search-box__clear,
.cart-item__remove, .img-upload__btn, [data-clickable], [onclick] {
    cursor: pointer;
}

/* ==========================================================================
   CAMPOS DE TEXTO: cursor que NO se pierde + iluminado al pasar el cursor
   --------------------------------------------------------------------------
   Antes, sobre los cuadros de texto/número/calendario el cursor cambiaba a la
   fina barra de texto (I-Beam) y "se perdía" visualmente. Ahora, mientras el
   puntero está sobre un campo editable se mantiene el MISMO cursor (mano) y el
   campo se ILUMINA como si estuviera seleccionado (borde amarillo + resplandor).
   Aplica en todo el sitio (admin y portal público).
   ========================================================================== */
:root { --ui-field-glow: 0 0 0 3px rgba(245, 184, 0, .20); }

/* Cursor consistente (mano) sobre campos editables + sus sub-partes (spinner
   numérico, icono de calendario, botón de limpiar búsqueda) para que no se pierda. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"] {
    cursor: pointer;
    transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease), background .2s var(--ui-ease);
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-calendar-picker-indicator,
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Iluminar el campo al pasar el cursor (como seleccionado). El :focus conserva
   su propio estilo; esto añade la señal en hover para que se note dónde estás. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([readonly]):not([disabled]):hover,
textarea:not([readonly]):not([disabled]):hover,
select:not([disabled]):hover,
.cds__trigger:hover {
    border-color: var(--yellow, #f5b800);
    box-shadow: var(--ui-field-glow);
}

/* -------- deshabilitado / no permitido / solo lectura -------- */
:disabled, [disabled], [aria-disabled="true"], .is-disabled, .page-btn:disabled { cursor: not-allowed; }
input[readonly], textarea[readonly] { cursor: default; }   /* visible, no I-Beam perdido */

/* ==========================================================================
   FEEDBACK DE HOVER PREMIUM (en lugar de depender del cursor)
   Elevación 2-3px + sombra exterior muy sutil + borde amarillo, 0.25s.
   Se aplica a controles clicables que NO tenían ya un hover de elevación
   (iconos de acción, paginación, botón de subir imagen). No toca botones ni
   tarjetas que ya tienen su propio hover, para no alterar el diseño.
   ========================================================================== */
.icon-btn, .page-btn, .img-upload__btn {
    transition: transform .25s var(--ui-ease),
                box-shadow .25s var(--ui-ease),
                border-color .25s var(--ui-ease),
                background .2s var(--ui-ease),
                color .2s var(--ui-ease);
}
.icon-btn:hover,
.page-btn:hover:not(:disabled),
.img-upload__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 10, 10, .14);
    border-color: var(--yellow, #f5b800);
}

/* Utilidad reutilizable: añade la clase .ui-lift a cualquier elemento clicable
   para darle el mismo feedback premium sin tocar su diseño estático. */
.ui-lift {
    transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .25s var(--ui-ease);
}
.ui-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 10, 10, .14);
    border-color: var(--yellow, #f5b800);
}

/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .icon-btn, .page-btn, .img-upload__btn, .ui-lift { transition: none; }
    .icon-btn:hover, .page-btn:hover, .img-upload__btn:hover, .ui-lift:hover { transform: none; }
}