/* Ajustes propios de esta instancia, encima de la plantilla visual Tabler.
   Tabler ya resuelve layout, tipografia, tabla, formularios y botones -
   esto es deliberadamente chico: la superficie a mantener a mano es la
   mínima posible. */

/* Import antes que este archivo en app.js: el orden de imports es el
   orden de aparicion en el CSS final, así que esto sí puede pisar reglas
   de Tabler si hiciera falta. */

/* Paleta de marca (Playa/xPlaya), pisando las variables de Tabler. Tabler
   define su tema entero como custom properties CSS (--tblr-<color> +
   --tblr-<color>-rgb) - redefinirlas acá, que carga después del CSS de
   Tabler (ver comentario de import de más abajo), alcanza para recolorear
   toda la plantilla sin tocar el vendored ni un build de Sass. Las
   variantes -lt (tintes claros de badges, por ejemplo bg-blue-lt) se
   recalculan solas a partir de estas con color-mix() en navegadores
   modernos - no hace falta redefinirlas a mano.

   primary/blue: acento principal (botones, links, foco de inputs).
   warning/yellow: el otro acento de marca.
   dark: fondo de superficies oscuras (sidebar, data-bs-theme=dark).
   Sin cambios en success/danger/info - se dejan los de Tabler por defecto. */
:root {
    --tblr-primary: #F86020;
    --tblr-primary-rgb: 248, 96, 32;
    --tblr-blue: #F86020;
    --tblr-blue-rgb: 248, 96, 32;

    --tblr-warning: #F0C830;
    --tblr-warning-rgb: 240, 200, 48;
    --tblr-yellow: #F0C830;
    --tblr-yellow-rgb: 240, 200, 48;

    --tblr-dark: #12202E;
    --tblr-dark-rgb: 18, 32, 46;
}

/* Tabler no tiene una variante de "card" pensada para ser un <a> entero
   (dashboard, accesos directos a cada entidad) - sin esto se ve como
   texto con subrayado en vez de una tarjeta clickeable. */
.card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.card-link:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Ícono del toggle de tema claro/oscuro: luna en modo claro (invita a
   pasar a oscuro), sol en modo oscuro (invita a volver a claro). Lee el
   atributo que escriben el script inline de base.html.twig y el listener
   de app.js sobre <html>, no sobre <body>. */
html[data-bs-theme="dark"] .theme-icon-to-dark,
html:not([data-bs-theme="dark"]) .theme-icon-to-light {
    display: none;
}

/* Editor de layout de detalle/formulario (admin/schema/entity_layout.html.twig,
   GridStack sobre assets/vendor/gridstack): cada celda es un
   .grid-stack-item de GridStack, con este contenido adentro. Ancho/alto
   los resuelve GridStack mismo (grid de 12 columnas) - esto es solo la
   presentación interna de cada celda. */
.layout-grid-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: var(--tblr-border-radius, 4px);
}

.layout-grid-item-separator {
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
    justify-content: center;
    color: var(--tblr-secondary, #6c7a91);
}

.layout-grid-item-remove {
    flex: 0 0 auto;
}

.layout-available-field {
    cursor: grab;
}

/* Regla numerada (1-12) arriba de la grilla del editor - guía visual contra
   el ancho variable de las celdas, pedida tras probar el editor en vivo
   ("se siente muy líquido sin una referencia fija"). CSS Grid de 12
   columnas con el mismo gap (2 × margin=4px de GridStack.init en app.js)
   para que cada número quede sobre su columna real; puramente decorativa,
   GridStack sigue siendo la única fuente de verdad de x/y/w. */
.layout-grid-ruler {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 8px;
    margin-bottom: 0.5rem;
}

.layout-grid-ruler-cell {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tblr-secondary, #6c7a91);
    padding-block: 0.25rem;
    border-bottom: 2px solid var(--tblr-border-color, #dce1e7);
}