/* ============================================================================
   Restyle VISUAL de marca para las 3 secciones de BIBLIOTECA del dashboard que
   comparten estructura: "Mis disenos" (#tab-designs), "Mis plantillas"
   (#tab-templates) y "Mis fondos" (#tab-backgrounds). Las tres llevan la clase
   comun .lx-lib (en dashboard/index.php) y esta hoja las estiliza a la vez.
   Opcion A (Rafa 2026-09-08): PURAMENTE ESTETICO. NO toca el bundle: se conservan
   Publicar/Eliminar/Compartir/Importar/seleccion multiple/Limpiar borradores.
   'Mis disenos' anade botones Compartir (.btn-share-design) e Importar
   (.import-design-btn, funcion de JC: solo se estiliza, no su logica).
   Nota: !important en puntos concretos para vencer reglas de alta especificidad
   (#dashboard-section button{font-size:14px!important}, #dashboard-section
   .list-category ... .content-image, .design-size-title).
   ============================================================================ */
.lx-lib { font-family: 'Montserrat', system-ui, sans-serif; color: #0D1031; }
.lx-lib *:focus-visible { outline: 2px solid #AE419C; outline-offset: 2px; }

/* --- Cabecera: MISMO patron que los apartados del perfil (.lxd-hero + .lxd-cab
   de lx-datos.css). Titulo 15px/500 como el perfil. --- */
.lx-lib.py-4 { padding-top: 12px !important; }
.lx-lib .lx-lib-cab { margin-top: 14px; padding-bottom: 8px; }
/* Titulo pegado a la linea cian (nudge abajo, como en 'Mi equipo' del perfil) */
.lx-lib .lxd-cab h1 { margin: 0; font-size: 15px; font-weight: 500; color: #0D1031; position: relative; top: 3px; }
/* Grupo izquierdo de la cabecera: titulo + selector de origen (colaboradores) */
.lx-lib .lx-lib-cab-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Selector de origen (Mis fondos / colaboradores) a tono de los controles */
#dashboard-section .lx-lib #backgrounds-source-selector,
#dashboard-section .lx-lib .lx-lib-source {
    height: 32px !important; padding: 0 30px 0 12px !important; border-radius: 6px !important;
    border: 1px solid #DAD8E0 !important; background-color: #fff !important; color: #0D1031 !important;
    font-family: 'Montserrat', system-ui, sans-serif !important; font-size: 12.5px !important;
    font-weight: 500 !important; line-height: 1 !important;
}
#dashboard-section .lx-lib #backgrounds-source-selector:focus,
#dashboard-section .lx-lib .lx-lib-source:focus { border-color: #AE419C !important; box-shadow: none !important; }

/* Minimo aire entre la cabecera y la primera fila */
.lx-lib .list-category { margin-top: 2px; }
.lx-lib .design-categories-list > .design-category:first-child { margin-top: 0; }
.lx-lib .design-categories-list > .design-category:first-child > h3 { margin-top: 0; }

/* Botones de control (Seleccionar archivos / Eliminar seleccionados / Cancelar) */
/* Botones de la cabecera de biblioteca UNIFICADOS: mismo aspecto (blanco, borde,
   radio) y peso 300 para TODOS (Importar/Seleccionar/selector/etc.). Peticion Rafa. */
/* Prefijo #dashboard-section (id) para VENCER a #dashboard-section button
   {font-size:14px!important}, que si no dejaba los <button> a 14px y el <select>
   a 12.5px (tamanos distintos). Con el prefijo todos quedan identicos a 12.5px. */
#dashboard-section .lx-lib [id^="bulk-delete-"][id$="-controls"] .btn,
#dashboard-section .lx-lib .import-design-btn {
    height: 32px !important; padding: 0 15px !important; border-radius: 6px !important;
    border: 1px solid #DAD8E0 !important; background: #fff !important; color: #0D1031 !important;
    font-family: 'Montserrat', system-ui, sans-serif !important; font-size: 12.5px !important;
    font-weight: 500 !important; line-height: 1 !important; transition: border-color .16s, color .16s, background .16s;
}
#dashboard-section .lx-lib [id^="bulk-delete-"][id$="-controls"] .btn:hover,
#dashboard-section .lx-lib .import-design-btn:hover { border-color: #AE419C !important; color: #AE419C !important; background: #fff !important; }
.lx-lib [id^="bulk-selection-count"] { font-size: 12.5px; font-weight: 500; color: #0D1031; }

/* --- Titulos de seccion: identificador de producto como la maqueta (cuadrado
   azul noche + etiqueta MAYUS + linea separadora full-width) --- */
.lx-lib .design-category > h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: #0D1031; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #E3E2E8;
}
.lx-lib .design-category > h3::before {
    content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: #0D1031;
}
.lx-lib .design-size-title { font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #8a8996 !important; margin-top: .25rem; }

/* --- Tarjeta: columna con acciones SIEMPRE al fondo (alineadas entre tarjetas;
   .design-row las estira a igual altura, reservando el hueco del badge). --- */
.lx-lib .item-category { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E2E8; border-radius: 10px; padding: 10px; transition: border-color .16s, box-shadow .16s; }
.lx-lib .item-category .d-flex:has(> .btn-delete-template),
.lx-lib .item-category .d-flex:has(> .btn-delete-background),
.lx-lib .item-category .d-flex:has(> .btn-delete-design) { margin-top: auto; padding-top: 6px; }
.lx-lib .item-category:hover { border-color: #6ECAE4; box-shadow: 0 4px 14px rgba(13, 16, 49, .07); }
.lx-lib .item-category a { text-decoration: none; }
/* Miniatura (vence el radius/borde de index.css) */
.lx-lib .list-category .item-category a .content-image { border-radius: 8px !important; border: 1px solid #EDECF0 !important; overflow: hidden; background: #F6F5F7; }
.lx-lib .design-name { font-size: 13px; font-weight: 500; color: #0D1031; }

/* Badge "Publicado" a tono de marca */
.lx-lib .badge-published { background: #EAF7EE !important; color: #2E7D4F !important; border-radius: 6px; font-weight: 500; padding: 3px 8px; }
.lx-lib .badge-published--admin { cursor: pointer; }

/* --- Acciones (Publicar "P" / Eliminar): SIEMPRE visibles --- */
.lx-lib .item-category .btn-delete-template,
.lx-lib .item-category .btn-publish-template,
.lx-lib .item-category .btn-delete-background,
.lx-lib .item-category .btn-delete-design,
.lx-lib .item-category .btn-publish-design,
.lx-lib .item-category .btn-share-design {
    border: 1px solid #DAD8E0; border-radius: 6px; background: #fff; color: #0D1031;
    opacity: 1; transition: border-color .16s, color .16s;
}
.lx-lib .item-category .btn-delete-template:hover,
.lx-lib .item-category .btn-delete-background:hover,
.lx-lib .item-category .btn-delete-design:hover { border-color: #B3261E; color: #B3261E; }
.lx-lib .item-category .btn-publish-template:hover,
.lx-lib .item-category .btn-publish-design:hover { border-color: #AE419C; color: #AE419C; }
/* Compartir: AL PULSAR/hover el borde se ilumina en MAGENTA OSCURO (#953586). Se
   cubren TODOS los estados (hover/focus/focus-visible/active) con !important para
   VENCER a index.css:101 (.btn:focus/:active/:focus-visible{border-color:#0d1031
   !important}) que si no lo dejaba azul noche. */
.lx-lib .item-category .btn-share-design:hover,
.lx-lib .item-category .btn-share-design:focus,
.lx-lib .item-category .btn-share-design:focus-visible,
.lx-lib .item-category .btn-share-design:active { border-color: #953586 !important; color: #953586 !important; background: #fff !important; }
/* Compartido: fondo magenta y BORDE magenta (el bundle ponia borde blanco inline). */
.lx-lib .item-category .btn-share-design.is-shared,
.lx-lib .item-category .btn-share-design.is-shared:hover,
.lx-lib .item-category .btn-share-design.is-shared:focus,
.lx-lib .item-category .btn-share-design.is-shared:active { background: #AE419C !important; color: #fff !important; border-color: #953586 !important; }

/* Seleccion: acento magenta de marca */
.lx-lib .item-category.design-selected { border-color: #AE419C; }

/* --- Icono de papelera (Eliminar): nuevo trazo (lucide) via CSS mask, SIN tocar
   el bundle. Se oculta el SVG que inyecta dashboard.js y se pinta el nuevo con
   mask + background-color:currentColor -> hereda el color del boton (rojo hover). --- */
.lx-lib .item-category .btn-delete-template,
.lx-lib .item-category .btn-delete-background,
.lx-lib .item-category .btn-delete-design { display: inline-flex; align-items: center; justify-content: center; }
.lx-lib .item-category .btn-delete-template > span,
.lx-lib .item-category .btn-delete-background > span,
.lx-lib .item-category .btn-delete-design > span { display: none; }
.lx-lib .item-category .btn-delete-template::before,
.lx-lib .item-category .btn-delete-background::before,
.lx-lib .item-category .btn-delete-design::before {
    content: ""; width: 1.2em; height: 1.2em; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Modal "Compartir diseno" (#libroox-share-modal, lo crea el bundle con estilos
   INLINE): pasar sus etiquetas ("Invitar por correo", "Con acceso") al estilo de
   LABEL de marca Libroox (MAYUS gris + letter-spacing), como en 'Anadir usuario' de
   Mi equipo. Se hace por CSS !important porque el modal es inline (no recompilamos el
   bundle). El selector casa el estilo inline CARD_LABEL (font-weight:600); si algun
   dia se recompila con el source ya corregido, deja de casar (inocuo). --- */
#libroox-share-modal [style*="font-weight:600"] {
    font-size: 11px !important; font-weight: 500 !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; color: #8a8996 !important;
}

/* --- Contencion de layout (fallo responsive en portatil: en Mis DISENOS el
   contenido ancho desbordaba y empujaba la columna bajo el sidebar fijo). Forzamos
   min-width:0 + max-width:100% en toda la cadena para que el contenido NUNCA exceda
   la columna y las tarjetas envuelvan. Inocuo para plantillas/fondos (ya envuelven). */
#dashboard-section .lx-lib,
#dashboard-section .lx-lib .list-category,
#dashboard-section .lx-lib .design-categories-list,
#dashboard-section .lx-lib .design-category,
#dashboard-section .lx-lib .design-size-group,
#dashboard-section .lx-lib .design-row { min-width: 0 !important; max-width: 100% !important; }