/* ==========================================================================
   FUENTES Y RESETEO BÁSICO
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #f9fafb, #eef2ff);
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar suave */
::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
    background: #cbd5f5;
    border-radius: 999px;
}

/* ==========================================================================
   LAYOUT GENERAL
   ========================================================================== */

.layout {
    display: flex;
    min-height: 100vh;
}

/* ==========================================================================
   SIDEBAR MINIMALISTA
   ========================================================================== */

.sidebar {
    width: 240px;
    min-height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 24px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
    z-index: 10;
}

.logo {
    text-align: center;
    margin-bottom: 18px;
}

.logo img {
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.12));
    animation: floatLogo 3s ease-in-out infinite;
}

@keyframes floatLogo {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

/* Items de menú grandes, centrados, muy limpios */

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #4b5563;
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.18s ease;
}

.sidebar nav a i {
    width: 20px;
    text-align: center;
    font-size: 1.05rem;
    color: #6b7280;
}

.sidebar nav a:hover {
    background: #eef2ff;
    color: #1f2937;
    transform: translateX(4px);
}

.sidebar nav a:hover i {
    color: #4f46e5;
}

/* Opción activa (si la usas con PHP) */
.sidebar nav a.active {
    background: #4f46e5;
    color: #ffffff;
}
.sidebar nav a.active i {
    color: #e0e7ff;
}

/* ==========================================================================
   CONTENIDO PRINCIPAL
   ========================================================================== */

.content {
    flex: 1;
    padding: 32px 40px 40px;
    color: #0f172a;
    margin-left: 240px;   /* hueco para el sidebar fijo */
    display: flex;
    flex-direction: column;
    align-items: center;  /* centramos horizontalmente */
}

/* Aplicamos ancho máximo solo a los hijos "normales",
   NO al overlay del modal (evitamos el corte) */
.content > *:not(.modal-overlay):not(.fab) {
    max-width: 1120px;
    width: 100%;
}

/* Títulos generales, centrados */

.content h1 {
    font-size: 2rem;
    font-weight: 600;
    color: #111827;
    text-align: center;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.subtitle {
    margin-top: 2px;
    margin-bottom: 24px;
    color: #6b7280;
    font-size: 0.95rem;
    text-align: center;
}

/* ==========================================================================
   TARJETAS DEL DASHBOARD (blancas y minimal)
   ========================================================================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.card {
    position: relative;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.card h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #111827;
}

.card p {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 10px;
}

.card p a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.card p a:hover {
    text-decoration: underline;
}

.card .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Tarjeta principal un poco más marcada */

.card.principal {
    border-color: #c7d2fe;
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.08);
    background: linear-gradient(135deg, #ffffff, #eef2ff);
}

.card.principal h2 {
    letter-spacing: 0.08em;
}

.dashboard-cards .card { height: 100%; }

.card-main {
    grid-column: span 2;
    border: 1px solid #c7d2fe;
    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.16);
}

/* Hover */

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    border-color: #d1d5db;
}

.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.card-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #818cf8;
    font-weight: 700;
}

.card-url a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.card-url a:hover { text-decoration: underline; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-primary {
    background: #e0e7ff;
    color: #312e81;
    border: 1px solid #c7d2fe;
}

.card-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 10px 0 6px;
}

.stat-chip {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.card-main .stat-chip {
    background: linear-gradient(135deg, #eef2ff, #fff);
    border-color: #c7d2fe;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.4rem;
    color: #111827;
}

.stat-chip small {
    display: block;
    color: #6b7280;
}

.card-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 6px;
}

.card-actions {
    margin-top: auto;
    padding-top: 10px;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    background: #4f46e5;
    color: #f9fafb;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.25);
}

.btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.btn.secondary {
    background: #ffffff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    box-shadow: none;
}

.btn.secondary:hover {
    background: #eef2ff;
}

.btn.large {
    margin-top: 8px;
    padding: 10px 22px;
    font-size: 0.92rem;
}

.btn.small {
    padding: 6px 11px;
    font-size: 0.8rem;
}

.actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.form-card {
    margin-top: 6px;
    padding: 22px 20px 24px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-card label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #111827;
}

.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-family: inherit;
    font-size: 0.9rem;
    color: #111827;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.18);
    background: #ffffff;
}

.form-card textarea {
    resize: vertical;
}

/* ==========================================================================
   FILTRES
   ========================================================================== */

.filters-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 18px;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.filter-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    height: 100%;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    display: inline-flex;
    align-items: center;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.filter-block select,
.filter-block input[type="text"],
.filter-block input[type="number"],
.filter-block select[multiple] {
    width: 100%;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-family: inherit;
    font-size: 0.9rem;
}

.filter-block select[multiple] {
    min-height: 120px;
}

.filter-block.range .range-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-block.range input[type="range"] {
    width: 100%;
    accent-color: #4f46e5;
}

.range-values {
    font-weight: 600;
    color: #4f46e5;
    font-size: 0.95rem;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

/* ==========================================================================
   TABLAS (Editar Cases)
   ========================================================================== */

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
}

.styled-table thead {
    background: #f3f4f6;
}

.styled-table th,
.styled-table td {
    padding: 10px 14px;
    font-size: 0.88rem;
    text-align: left;
    color: #374151;
}

.styled-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.styled-table tbody tr:hover {
    background: #eef2ff;
}

.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable i {
    margin-left: 6px;
    color: #9ca3af;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sortable[data-sort-dir="asc"] i {
    transform: rotate(180deg);
    color: #4f46e5;
}

.sortable[data-sort-dir="desc"] i {
    color: #4f46e5;
}

.actions-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-form {
    display: inline;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    border-color: #d1d5db;
}

.icon-btn.danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff1f2;
}

.icon-btn.success {
    color: #047857;
    border-color: #a7f3d0;
    background: #ecfdf3;
}

.icon-btn.primary {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

/* ==========================================================================
   MODAL (popup Edición Casa)
   ========================================================================== */

/* Overlay a pantalla completa, centrado */
.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.25);
    display: none;              /* se activa con .open */
    align-items: center;        /* centra vertical */
    justify-content: center;    /* centra horizontal */
    padding: 16px;
    box-sizing: border-box;
    z-index: 50;
}

.modal-overlay.open {
    display: flex;
}

/* Caja del popup */
.modal {
    width: 100%;
    max-width: 760px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    padding: 18px 20px 20px;
    animation: fadeInUp 0.25s ease-out;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    color: #6b7280;
}

.modal-close:hover {
    color: #111827;
}
.required-asterisk { color: #ef4444; font-weight: 600; margin-left: 4px; }
.gallery-manager { display: flex; flex-direction: column; gap: 12px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 12px; border: 1px dashed #e2e8f0; border-radius: 14px; background: #f8fafc; }
.gallery-item { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.gallery-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.gallery-remove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(15, 23, 42, 0.8); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.gallery-remove:hover { background: rgba(220, 38, 38, 0.9); }
.gallery-order { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 6px; background: rgba(15, 23, 42, 0.8); color: #fff; border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.gallery-order label { margin: 0; font-size: 12px; }
.gallery-order-input { width: 56px; border: none; border-radius: 999px; padding: 2px 6px; font-size: 12px; }
.gallery-empty { margin: 0; font-size: 0.9rem; color: #64748b; }

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    gap: 8px;
}

/* columnas de multi-checkbox */

.modal-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 4px;
}

.modal-panel {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 10px 10px 8px;
    background: #f9fafb;
}

.modal-panel h3 {
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #111827;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 170px;
    overflow: auto;
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 400;
    color: #374151;
}

.checkbox-list input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   EFECTOS DE ENTRADA
   ========================================================================== */

.fade-in {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 14px 16px;
        gap: 10px;
    }

    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .content {
        margin-left: 0;
        padding: 22px 16px 28px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .card-main {
        grid-column: span 1;
    }

    .modal {
        max-width: 95%;
    }
}

@media (max-width: 520px) {
    .sidebar nav a span {
        display: none;
    }

    .sidebar nav a i {
        margin-right: 0;
    }

    .modal-columns {
        grid-template-columns: 1fr;
    }

    .content h1 {
        font-size: 1.7rem;
    }
}

/* ==========================================================================
   AUTH
   ========================================================================== */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 10% 20%, #eef2ff, #f9fafb 40%, #e0e7ff);
}

.auth-card {
    background: #fff;
    padding: 32px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px solid #e5e7eb;
}
.auth-header h1 { margin: 10px 0 6px; }
.auth-header p { color: #6b7280; }
.auth-logo { max-width: 160px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.auth-form input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #e5e7eb; }
.auth-footer { margin-top: 16px; color: #9ca3af; font-size: 0.9rem; }

/* Alerts */
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; }
.alert.success { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
.alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecdd3; }
.alert.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Tables */
.table-wrapper { width: 100%; overflow-x: auto; }
.table-wrapper.scrollable {
    max-height: 70vh;
    overflow-y: auto;
}
.styled-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); }
.styled-table th, .styled-table td { padding: 12px 14px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.styled-table th { background: #f9fafb; font-weight: 600; color: #4b5563; }
.styled-table tr:last-child td { border-bottom: none; }
.styled-table tr.dragging { opacity: 0.5; }
.thumb { max-width: 64px; border-radius: 8px; }
.highlight { box-shadow: inset 0 0 0 2px #f59e0b; background: #fffbeb; }

/* Forms */
.form-card { display: flex; flex-direction: column; gap: 10px; background: #fff; padding: 16px; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 10px 18px rgba(15, 23, 42, 0.03); }
.form-card input, .form-card textarea, .form-card select { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid #e5e7eb; background: #f9fafb; }
.form-card textarea.rich { min-height: 220px; }
.two-columns { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.category-type-row {
    margin-bottom: 10px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.checkbox-list.horizontal { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.hint { font-size: 0.85rem; color: #9ca3af; }
.inline-form { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; }
.inline-form select { min-width: 180px; }
.selector-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.selector-item { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: #111827; }

/* RENDIMIENTO -------------------------------------------------------------
   La tabla de cases repite la lista COMPLETA de activitats y centres dentro
   de cada fila. Con 40 cases y 100 opciones son ~4.000 checkboxes, y el
   navegador calcula el layout de todas aunque no se vean.

   content-visibility:auto le dice al navegador que no calcule ni pinte el
   contenido de las cajas que estan fuera de pantalla. El HTML no cambia y el
   formulario funciona igual (los checkboxes siguen existiendo en el DOM y se
   envian con el POST): solo se salta el trabajo de render.

   contain-intrinsic-size reserva la altura para que la barra de scroll no
   pegue saltos mientras se rellena.

   Soportado en Chrome, Edge, Safari 18+ y Firefox 125+. En navegadores
   antiguos simplemente se ignora, sin efectos secundarios.
   ------------------------------------------------------------------------ */
.selector-box {
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
}

/* Lo mismo para las filas de la tabla, que son lo mas pesado de la pagina.
   OJO: no se aplica a filas ocultas por el buscador (display:none), que ya
   no cuestan nada. */
.styled-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
}
.selector-item input { width: 16px; height: 16px; }

/* FAB + Modals */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #4f46e5;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 12px 30px rgba(79,70,229,0.4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 50; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 18px; padding: 16px; width: min(900px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; }
.language-toggle { display: inline-flex; gap: 6px; background: #f3f4f6; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.modal .language-toggle {
    position: sticky;
    top: 0;
    z-index: 5;
    align-self: flex-start;
    background: #ffffff;
    padding: 6px;
    margin-bottom: 14px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.language-toggle button { border: none; background: transparent; padding: 6px 12px; border-radius: 999px; font-weight: 600; color: #6b7280; cursor: pointer; }
.language-toggle button.active { background: #4f46e5; color: #fff; }
.language-panel { display: none; }
.language-panel.active { display: block; }

.drag-handle { display: inline-flex; align-items: center; gap: 6px; cursor: grab; color: #6b7280; }
.drag-handle i { color: #94a3b8; }
.order-input { width: 70px; text-align: center; padding: 6px 8px; border-radius: 10px; border: 1px solid #e5e7eb; background: #f9fafb; }
.modal-body { padding-top: 12px; overflow-y: auto; }
.modal-body.scrollable { max-height: 65vh; }
.modal-footer { margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end; }
.modal-close { background: transparent; border: none; font-size: 22px; cursor: pointer; color: #6b7280; }

.cards-grid.single { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.form-card.compact { gap: 8px; }

.rich-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.rich-toolbar {
    display: flex;
    gap: 6px;
}

.rich-toolbar button {
    background: #eef2ff;
    border: 1px solid #e5e7eb;
    color: #4f46e5;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.rich-toolbar button:hover {
    background: #e0e7ff;
}

.rich-editor {
    min-height: 220px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

.rich-editor:focus {
    outline: 2px solid #c7d2fe;
}

.rich-wrapper textarea.rich {
    display: none;
}

/* Boton "Veure codi HTML" y su vista de codigo -------------------------- */
.rich-toolbar button.rich-code-toggle.active {
    background: #4f46e5;
    color: #fff;
}

.rich-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rich-code-view {
    display: block;
    width: 100%;
    min-height: 220px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #1e1e2e;
    color: #cdd6f4;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
}

.rich-code-view:focus {
    outline: 2px solid #c7d2fe;
}

/* Tablas pegadas por el usuario: que se vean con un minimo de formato tanto
   en el editor como en la web publica heredaria de su tema, pero aqui al
   menos las hacemos legibles dentro del panel. */
.rich-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}

.rich-editor table td,
.rich-editor table th {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
}

.program-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.program-section:last-of-type {
    border-bottom: none;
}

.grid-picker {
    position: absolute;
    top: 42px;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 220px;
    z-index: 5;
    display: none;
    gap: 10px;
}

.grid-picker.open {
    display: flex;
    flex-direction: column;
}

.grid-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.grid-picker-cell {
    height: 28px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.grid-picker-cell.active {
    background: #e0e7ff;
    border-color: #4f46e5;
}

.grid-picker-label {
    font-size: 0.9rem;
    color: #111827;
    text-align: right;
}

.rich-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.rich-grid td {
    border: 1px solid #111827;
    min-height: 42px;
    padding: 8px;
}
/* --- Indicador d'idiomes (CA / ES) al llistat de productes --- */
.lang-pill {
    display: inline-block;
    min-width: 30px;
    padding: 2px 8px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
    line-height: 1.6;
    border: 1px solid transparent;
    vertical-align: middle;
}
/* Idioma present i publicat */
.lang-pill.on {
    background: #e3f5e9;
    color: #1b7a45;
    border-color: #b6e4c7;
}
/* Idioma present però en esborrany */
.lang-pill.off {
    background: #fff3d6;
    color: #9a6b00;
    border-color: #f2dfa6;
}
/* Traducció inexistent */
.lang-pill.missing {
    background: #f3f4f6;
    color: #9aa1ac;
    border: 1px dashed #d3d7de;
}
/* Indicador de desat ------------------------------------------------------ */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner-gira .7s linear infinite;
    vertical-align: -2px;
}

@keyframes spinner-gira {
    to { transform: rotate(360deg); }
}

.desant-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(17, 24, 39, .45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.desant-caixa {
    background: #fff;
    border-radius: 10px;
    padding: 22px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    text-align: center;
    max-width: 330px;
}

.desant-caixa .spinner {
    width: 26px;
    height: 26px;
    border-width: 3px;
    border-color: #e5e7eb;
    border-top-color: #4f46e5;
}

.desant-caixa p { margin: 12px 0 0; color: #111827; }
.desant-caixa p.petit { margin-top: 6px; font-size: 12px; color: #6b7280; }

button.is-desant { opacity: .75; cursor: progress; }