/* ==========================================================
   RediSalud · Núcleo visual
   Iteración 5
   ========================================================== */

:root {
    --font-base: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-title: "Literata", Georgia, serif;

    /* Radios */
    --rdi-rad-xs: .25rem;
    --rdi-rad-sm: .42rem;
    --rdi-rad-md: .7rem;
    --rdi-rad-lg: 1rem;
    --rdi-rad-pill: 999px;

    /* Paleta */
    --papel-50: #FFFFFF;
    --papel-1: #F7F6F6;
    --papel-200: #EAE8E8;
    --papel-700: #B8B5B5;

    --lapiz-50: #FBF8EC;
    --lapiz-200: #F0E5BF;
    --lapiz-1: #E6D194;
    --lapiz-700: #A98E43;

    --resalte-50: #FFF4E5;
    --resalte-200: #F8D49C;
    --resalte-1: #F0AD4E;
    --resalte-700: #B87618;

    --carton-50: #F8F2E9;
    --carton-200: #D9C19F;
    --carton-1: #BC955C;
    --carton-a50: rgba(188,149,92,.50);
    --carton-700: #82643A;

    /* Verde temático: pizarra */
    --pizarra-50: #EEF2EB;
    --pizarra-200: #AEBDA7;
    --pizarra-1: #355723;
    --pizarra-700: #213916;

    --marca-50: #E6F7ED;
    --marca-200: #8AD1A8;
    --marca-1: #009F42;
    --marca-a50: rgba(0,159,66,.50);
    --marca-700: #006C2D;

    --pluma-50: #EDF5FC;
    --pluma-200: #A9CBE8;
    --pluma-1: #428BCA;
    --pluma-700: #2B6190;

    --tinta-50: #EDF1F3;
    --tinta-200: #9DADB5;
    --tinta-1: #2D4B5A;
    --tinta-700: #1D313B;

    --calca-50: #EDF5FF;
    --calca-200: #A8CCFC;
    --calca-1: #388CFA;
    --calca-700: #2461B4;

    --carbon-50: #ECEDEF;
    --carbon-200: #A6A8AB;
    --carbon-1: #212529;
    --carbon-700: #111315;

    --indice-50: #EFEFF5;
    --indice-200: #AAAABD;
    --indice-1: #32325D;
    --indice-700: #20203F;

    --sello-50: #F9EAEC;
    --sello-200: #DEA7AD;
    --sello-1: #B41C2B;
    --sello-700: #7B121D;

    --lacra-50: #F5E9ED;
    --lacra-200: #CAA5B2;
    --lacra-1: #7C1B39;
    --lacra-a50: rgba(124,27,57,.50);
    --lacra-700: #531126;

    /* Rojo principal del tema */
    --rubrica-50: #F4E8ED;
    --rubrica-200: #C49EAD;
    --rubrica-1: #611232;
    --rubrica-a50: rgba(97,18,50,.50);
    --rubrica-700: #3D0B20;

    --grafito-50: #F2F2F2;
    --grafito-200: #D4D4D4;
    --grafito-1: #7A7D80;
    --grafito-700: #4A4D50;

    /* Lúdico: reservado */
    --nivel-1: #388CFA;
    --logro-1: #F0AD4E;
    --reto-1: #7C1B39;

    /* Acciones */
    --accion-add: #009F42;
    --accion-add-hover: #006C2D;
    --accion-sav: #355723;
    --accion-sav-hover: #213916;
    --accion-edi: #F0AD4E;
    --accion-edi-hover: #B87618;
    --accion-del: #B41C2B;
    --accion-del-hover: #7B121D;

    --accion-cls: rgba(45,75,90,.10);
    --accion-cls-hover: rgba(45,75,90,.20);
    --accion-cls-fg: #2D4B5A;

    --accion-can: rgba(33,37,41,.08);
    --accion-can-hover: rgba(33,37,41,.16);
    --accion-can-fg: #4A4D50;

    --accion-bus: #428BCA;
    --accion-bus-hover: #2B6190;
    --accion-rfs: #388CFA;
    --accion-rfs-hover: #2461B4;
    --accion-pdf: #7C1B39;
    --accion-pdf-hover: #531126;
    --accion-xls: #277847;
    --accion-xls-hover: #185432;
    --accion-upd: #008B63;
    --accion-upd-hover: #006047;
    --accion-dwn: #326B98;
    --accion-dwn-hover: #224C6E;
    --accion-see: #BC955C;
    --accion-see-hover: #82643A;
    --accion-cpy: #32325D;
    --accion-cpy-hover: #20203F;
    --accion-prt: #2D4B5A;
    --accion-prt-hover: #1D313B;
    --accion-lnk: #6B4C75;
    --accion-lnk-hover: #493450;
    --accion-act: #4F6E2F;
    --accion-act-hover: #354A20;
    --accion-ina: #656A6F;
    --accion-ina-hover: #44484B;

    /* Estructura */
    --rdi-bg: var(--papel-200);
    --rdi-surface: var(--papel-50);
    --rdi-text: var(--carbon-1);
    --rdi-muted: var(--grafito-700);
    --rdi-line: color-mix(in srgb, var(--tinta-1) 17%, transparent);
    --rdi-focus: var(--tinta-1);

    --rdi-content-max: 760px;
    --rdi-header-top-h: 38px;
    --rdi-header-brand-h: 84px;

    /* Tema por defecto */
    --rdi-theme-accent: var(--rubrica-1);
    --rdi-theme-accent-soft: var(--rubrica-50);
    --rdi-theme-accent-mid: var(--rubrica-200);
    --rdi-theme-accent-dark: var(--rubrica-700);

    --rdi-header-top: var(--rubrica-1);
    --rdi-header-brand: var(--carton-1);
    --rdi-header-text: var(--papel-50);

    --rdi-menu-zone-bg: color-mix(in srgb, var(--rubrica-1) 4%, var(--papel-200));
    --rdi-menu-panel-bg: color-mix(in srgb, var(--rubrica-1) 5%, var(--papel-50));
    --rdi-menu-hover: var(--rubrica-50);
}

.rdi-theme-rubrica {
    --rdi-theme-accent: var(--rubrica-1);
    --rdi-theme-accent-soft: var(--rubrica-50);
    --rdi-theme-accent-mid: var(--rubrica-200);
    --rdi-theme-accent-dark: var(--rubrica-700);

    --rdi-header-top: var(--rubrica-1);
    --rdi-header-brand: var(--carton-1);

    --rdi-menu-zone-bg: color-mix(in srgb, var(--rubrica-1) 4%, var(--papel-200));
    --rdi-menu-panel-bg: color-mix(in srgb, var(--rubrica-1) 5%, var(--papel-50));
    --rdi-menu-hover: var(--rubrica-50);
}

.rdi-theme-pizarra {
    --rdi-theme-accent: var(--pizarra-1);
    --rdi-theme-accent-soft: var(--pizarra-50);
    --rdi-theme-accent-mid: var(--pizarra-200);
    --rdi-theme-accent-dark: var(--pizarra-700);

    --rdi-header-top: var(--pizarra-1);
    --rdi-header-brand: var(--carton-1);

    --rdi-menu-zone-bg: color-mix(in srgb, var(--pizarra-1) 5%, var(--papel-200));
    --rdi-menu-panel-bg: color-mix(in srgb, var(--pizarra-1) 6%, var(--papel-50));
    --rdi-menu-hover: var(--pizarra-50);
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
    margin: 0;
    color: var(--rdi-text);
    background: var(--rdi-bg);
    font-family: var(--font-base);
}

button,
input,
select,
textarea { font: inherit; }

button { cursor: pointer; }

img { max-width: 100%; }

p { margin: 0; }

.tx-muted { color: var(--rdi-muted); }
.tx-400 { font-weight: 400; }

.mt-4 { margin-top: 1rem; }

.grid { display: grid; }
.gap-4 { gap: 1rem; }

@media (min-width: 680px) {
    .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .md-col-span-2 { grid-column: span 2 / span 2; }
    .md-col-span-3 { grid-column: span 3 / span 3; }
}