/* =====================================================================================
   EasyTraza · estil "Obrador"
   Un sol fitxer per a tota la web: colors, lletra i formes. Es carrega després de Bootstrap
   i en canvia les variables, així totes les pantalles segueixen els mateixos patrons.
   Per fer una versió amb altres colors (per exemple, per a un altre sector), només cal
   canviar els valors de :root.
   ===================================================================================== */

/* Lletra Nunito (OFL, allotjada al mateix servidor: no es connecta a Google) */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("../fonts/nunito-800.woff2") format("woff2"); }

:root {
    /* Paleta Obrador */
    --et-fons: #FBF7F0;          /* crema */
    --et-carta: #FFFFFF;
    --et-vora: #EFE5D6;
    --et-capcalera: #F7EFE3;     /* capçaleres de taula */
    --et-marro: #3B2A1E;         /* menú i títols */
    --et-text: #2E241C;
    --et-suau: #7A6654;          /* textos secundaris */
    --et-blat: #9A6114;          /* color principal (botons) */
    --et-blat-fosc: #8A5510;
    --et-blat-mes-fosc: #7A4B0E;
    --et-daurat: #E3A24A;        /* detalls (logo, avisos) */
    --et-daurat-suau: #FCEFD8;
    --et-verd: #276B43;          /* correcte */
    --et-verd-suau: #E2F2E8;
    --et-vermell: #B3412E;       /* error / esborrar */
    --et-vermell-suau: #F8E1DC;
    --et-blau: #2F6B7A;          /* informació */
    --et-blau-suau: #E0EEF1;
    --et-radi: 14px;
    --et-radi-petit: 10px;
    --et-ombra: 0 2px 10px rgba(59, 42, 30, .07);

    /* Bootstrap fa servir aquestes variables a tot arreu */
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: var(--et-fons);
    --bs-body-color: var(--et-text);
    --bs-secondary-color: var(--et-suau);
    --bs-border-color: var(--et-vora);
    --bs-border-radius: var(--et-radi-petit);
    --bs-border-radius-lg: var(--et-radi);
    --bs-link-color: var(--et-blat-fosc);
    --bs-link-color-rgb: 138, 85, 16;
    --bs-link-hover-color: var(--et-blat-mes-fosc);
    --bs-link-hover-color-rgb: 122, 75, 14;
    --bs-primary: var(--et-blat);
    --bs-primary-rgb: 154, 97, 20;
    --bs-secondary: var(--et-suau);
    --bs-secondary-rgb: 122, 102, 84;
    --bs-success: var(--et-verd);
    --bs-success-rgb: 39, 107, 67;
    --bs-warning: var(--et-daurat);
    --bs-warning-rgb: 227, 162, 74;
    --bs-danger: var(--et-vermell);
    --bs-danger-rgb: 179, 65, 46;
    --bs-info: var(--et-blau);
    --bs-info-rgb: 47, 107, 122;
    --bs-dark: var(--et-marro);
    --bs-dark-rgb: 59, 42, 30;
    --bs-light: #F7EFE3;
    --bs-light-rgb: 247, 239, 227;
    /* Avisos (alert-*) */
    --bs-primary-text-emphasis: #6B420C;   --bs-primary-bg-subtle: var(--et-daurat-suau);  --bs-primary-border-subtle: #EBCF9F;
    --bs-success-text-emphasis: #1E5434;   --bs-success-bg-subtle: var(--et-verd-suau);    --bs-success-border-subtle: #B9DCC6;
    --bs-warning-text-emphasis: #7A4A05;   --bs-warning-bg-subtle: var(--et-daurat-suau);  --bs-warning-border-subtle: #EBCF9F;
    --bs-danger-text-emphasis: #8A2F20;    --bs-danger-bg-subtle: var(--et-vermell-suau);  --bs-danger-border-subtle: #EBB8AE;
    --bs-info-text-emphasis: #234F5A;      --bs-info-bg-subtle: var(--et-blau-suau);       --bs-info-border-subtle: #B5D3DA;
    --bs-secondary-text-emphasis: #5A4A3C; --bs-secondary-bg-subtle: #F3ECE2;             --bs-secondary-border-subtle: #E2D6C6;
    --bs-light-text-emphasis: #5A4A3C;     --bs-light-bg-subtle: #FBF7F0;                  --bs-light-border-subtle: var(--et-vora);
    --bs-dark-text-emphasis: var(--et-marro);
    --bs-focus-ring-color: rgba(200, 134, 42, .28);
}

/* Algunes pantalles tenen un fons propi al <style>: el tema mana */
html body { background-color: var(--et-fons) !important; color: var(--et-text); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--et-marro); font-weight: 800; letter-spacing: -.01em; }
h5, h6, .h5, .h6 { color: var(--et-marro); font-weight: 700; }
main h1, main h2 { font-size: 1.75rem; }
.text-muted { color: var(--et-suau) !important; }
.border-bottom { border-bottom-color: var(--et-vora) !important; }
hr { border-color: var(--et-vora); opacity: 1; }

/* ---------- Menú lateral ---------- */
.sidebar {
    background-color: var(--et-marro) !important;
    min-height: 100vh;
    padding: 0 .75rem 1rem;
}
.sidebar .et-logo { display: block; padding: 1.1rem .75rem 1rem; font-size: 1.35rem; font-weight: 800;
    color: #fff; text-decoration: none; letter-spacing: -.01em; }
.sidebar .et-logo span { color: var(--et-daurat); }
.sidebar .nav-link { color: #F3E7D7; border-radius: var(--et-radi-petit); padding: .55rem .8rem; margin-bottom: 2px;
    font-weight: 600; transition: background-color .15s; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus { background-color: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background-color: var(--et-blat); color: #fff; font-weight: 700; }
.sidebar .text-muted { color: #CDB9A3 !important; }
.sidebar .border-top { border-top-color: rgba(255, 255, 255, .12) !important; }
@media (max-width: 767.98px) { .sidebar { min-height: auto; } }

/* Barra superior (panell de superadmin) */
.navbar.bg-dark, .bg-dark { background-color: var(--et-marro) !important; }

/* ---------- Targetes ---------- */
.card { border: 1px solid var(--et-vora); border-radius: var(--et-radi); box-shadow: var(--et-ombra); }
.card-header { background-color: var(--et-capcalera); border-bottom-color: var(--et-vora); color: var(--et-marro); }
.card-header:first-child { border-radius: calc(var(--et-radi) - 1px) calc(var(--et-radi) - 1px) 0 0; }
/* Bootstrap 5.3.0 posa aquests colors fixos (amb !important): es tornen a definir amb la paleta */
.text-bg-primary { color: #fff !important; background-color: var(--et-blat) !important; }
.text-bg-success { color: #fff !important; background-color: var(--et-verd) !important; }
.text-bg-warning { color: var(--et-marro) !important; background-color: var(--et-daurat) !important; }
.text-bg-danger { color: #fff !important; background-color: var(--et-vermell) !important; }
.text-bg-info { color: #fff !important; background-color: var(--et-blau) !important; }
.text-bg-secondary { color: #fff !important; background-color: #8C7864 !important; }
.text-bg-dark { color: #fff !important; background-color: var(--et-marro) !important; }
.bg-primary { background-color: var(--et-blat) !important; }
.bg-success { background-color: var(--et-verd) !important; }
.bg-danger { background-color: var(--et-vermell) !important; }
.bg-info { background-color: var(--et-blau) !important; }
.text-primary { color: var(--et-blat-fosc) !important; }
.text-success { color: var(--et-verd) !important; }
.text-danger { color: var(--et-vermell) !important; }
.card.text-bg-primary, .card.text-bg-success, .card.text-bg-warning, .card.text-bg-info, .card.text-bg-danger { border: 0; }
.card.text-bg-primary .card-text, .card.text-bg-success .card-text, .card.text-bg-warning .card-text { font-size: 2rem; font-weight: 800; }
.card .card-title { font-weight: 700; }
.text-bg-primary .card-title, .text-bg-success .card-title, .text-bg-info .card-title, .text-bg-danger .card-title { color: #fff; }
.text-bg-warning, .text-bg-warning .card-title { color: #3B2A1E !important; }

/* ---------- Botons ---------- */
.btn { font-weight: 700; border-radius: var(--et-radi-petit); }
.btn-primary { --bs-btn-bg: var(--et-blat); --bs-btn-border-color: var(--et-blat); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--et-blat-fosc); --bs-btn-hover-border-color: var(--et-blat-fosc); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--et-blat-mes-fosc); --bs-btn-active-border-color: var(--et-blat-mes-fosc); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--et-blat); --bs-btn-disabled-border-color: var(--et-blat); --bs-btn-focus-shadow-rgb: 200, 134, 42; }
.btn-outline-primary { --bs-btn-color: var(--et-blat-fosc); --bs-btn-border-color: var(--et-blat-fosc);
    --bs-btn-hover-bg: var(--et-blat); --bs-btn-hover-border-color: var(--et-blat); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--et-blat-fosc); --bs-btn-active-border-color: var(--et-blat-fosc); --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 200, 134, 42; }
.btn-success { --bs-btn-bg: var(--et-verd); --bs-btn-border-color: var(--et-verd); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1F5A37; --bs-btn-hover-border-color: #1F5A37; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1A4C2F; --bs-btn-active-border-color: #1A4C2F; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--et-verd); --bs-btn-disabled-border-color: var(--et-verd); --bs-btn-focus-shadow-rgb: 39, 107, 67; }
.btn-outline-success { --bs-btn-color: var(--et-verd); --bs-btn-border-color: var(--et-verd);
    --bs-btn-hover-bg: var(--et-verd); --bs-btn-hover-border-color: var(--et-verd); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1F5A37; --bs-btn-active-border-color: #1F5A37; --bs-btn-active-color: #fff; }
.btn-danger { --bs-btn-bg: var(--et-vermell); --bs-btn-border-color: var(--et-vermell); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #983524; --bs-btn-hover-border-color: #983524; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #842D1F; --bs-btn-active-border-color: #842D1F; --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 179, 65, 46; }
.btn-outline-danger { --bs-btn-color: var(--et-vermell); --bs-btn-border-color: var(--et-vermell);
    --bs-btn-hover-bg: var(--et-vermell); --bs-btn-hover-border-color: var(--et-vermell); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #983524; --bs-btn-active-border-color: #983524; --bs-btn-active-color: #fff; }
.btn-warning { --bs-btn-bg: var(--et-daurat); --bs-btn-border-color: var(--et-daurat); --bs-btn-color: #3B2A1E;
    --bs-btn-hover-bg: #D9923A; --bs-btn-hover-border-color: #D9923A; --bs-btn-hover-color: #3B2A1E;
    --bs-btn-active-bg: #CC8530; --bs-btn-active-border-color: #CC8530; --bs-btn-active-color: #3B2A1E; }
.btn-info { --bs-btn-bg: var(--et-blau); --bs-btn-border-color: var(--et-blau); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #255663; --bs-btn-hover-border-color: #255663; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1F4954; --bs-btn-active-border-color: #1F4954; --bs-btn-active-color: #fff; }
.btn-secondary { --bs-btn-bg: #8C7864; --bs-btn-border-color: #8C7864; --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--et-suau); --bs-btn-hover-border-color: var(--et-suau); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #66544A; --bs-btn-active-border-color: #66544A; --bs-btn-active-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--et-suau); --bs-btn-border-color: #CDBBA6;
    --bs-btn-hover-bg: #F3ECE2; --bs-btn-hover-border-color: #CDBBA6; --bs-btn-hover-color: var(--et-marro);
    --bs-btn-active-bg: #EAE0D2; --bs-btn-active-border-color: #CDBBA6; --bs-btn-active-color: var(--et-marro); }
.btn-dark { --bs-btn-bg: var(--et-marro); --bs-btn-border-color: var(--et-marro); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2C1F16; --bs-btn-hover-border-color: #2C1F16; --bs-btn-hover-color: #fff; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--et-marro);
    --bs-btn-hover-bg: #F7EFE3; --bs-btn-hover-border-color: #F7EFE3; --bs-btn-hover-color: var(--et-marro); }
.btn-link { --bs-btn-color: var(--et-blat-fosc); --bs-btn-hover-color: var(--et-blat-mes-fosc); }

/* ---------- Taules ---------- */
.table { --bs-table-bg: var(--et-carta); --bs-table-striped-bg: #FCF8F2; --bs-table-hover-bg: #F8F0E3;
    --bs-table-border-color: var(--et-vora); --bs-table-color: var(--et-text); --bs-table-striped-color: var(--et-text);
    --bs-table-hover-color: var(--et-text); vertical-align: middle; }
.table > thead th, .table > thead td, .table-dark > :not(caption) > * > *, .table > thead.table-dark th {
    --bs-table-bg: var(--et-capcalera); background-color: var(--et-capcalera); color: var(--et-suau);
    font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--et-vora); }
main > .table, main > form > .table, .table-responsive > .table {
    border: 1px solid var(--et-vora); border-radius: var(--et-radi); overflow: hidden; box-shadow: var(--et-ombra);
    border-collapse: separate; border-spacing: 0; }

/* ---------- Etiquetes (badges) ---------- */
.badge { font-weight: 700; border-radius: 999px; padding: .38em .75em; }
.badge.bg-success, .badge.text-bg-success { background-color: var(--et-verd-suau) !important; color: var(--et-verd) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--et-vermell-suau) !important; color: #8A2F20 !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--et-daurat-suau) !important; color: #7A4A05 !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: #F0E8DD !important; color: #5A4A3C !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--et-daurat-suau) !important; color: #6B420C !important; }
.badge.bg-info, .badge.text-bg-info { background-color: var(--et-blau-suau) !important; color: #234F5A !important; }

/* ---------- Avisos ---------- */
.alert { border-radius: var(--et-radi); border-width: 1px; }
.alert-heading { color: inherit; }

/* ---------- Formularis ---------- */
.form-label { font-weight: 700; color: var(--et-marro); }
.form-control, .form-select { border-color: #E2D6C6; border-radius: var(--et-radi-petit); background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: #C8862A; box-shadow: 0 0 0 .2rem rgba(200, 134, 42, .22); }
.form-check-input:checked { background-color: var(--et-blat); border-color: var(--et-blat); }
.form-check-input:focus { border-color: #C8862A; box-shadow: 0 0 0 .2rem rgba(200, 134, 42, .22); }
.input-group-text { background-color: var(--et-capcalera); border-color: #E2D6C6; color: var(--et-suau); }

/* ---------- Finestres (modals), paginació, pestanyes ---------- */
.modal-content { border: 0; border-radius: var(--et-radi); box-shadow: 0 10px 40px rgba(59, 42, 30, .2); }
.modal-header { border-bottom-color: var(--et-vora); }
.modal-footer { border-top-color: var(--et-vora); }
.pagination { --bs-pagination-color: var(--et-blat-fosc); --bs-pagination-active-bg: var(--et-blat);
    --bs-pagination-active-border-color: var(--et-blat); --bs-pagination-hover-color: var(--et-blat-mes-fosc);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(200, 134, 42, .22); }
.nav-tabs .nav-link.active { color: var(--et-marro); font-weight: 700; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--et-blat); }

/* ---------- Pantalles d'accés (login, recuperar contrasenya, superadmin) ---------- */
.login-card .card, .caixa .card { border: 0; box-shadow: 0 10px 40px rgba(59, 42, 30, .12); }
.et-marca { font-weight: 800; color: var(--et-marro); letter-spacing: -.01em; }
.et-marca span { color: var(--et-blat); }

/* Imatges (fotos d'albarans, avatars) */
.img-thumbnail { border-color: var(--et-vora); border-radius: var(--et-radi-petit); }