:root {
    /*VARIABLES DE TEXTO*/
    --ff: "Urbanist", sans-serif;
    --h1: bold 1.5rem/1.4em var(--ff);
    --h2: bold 1.125rem/1.4em var(--ff);
    --p: 1rem/1.4em var(--ff);
    --p2: .875rem/1.4em var(--ff);
  
    /*COLORES GENERALES*/
    --cancelado: hsl(39 100% 61%);
    --solicitado: hsl(110 100% 61%);
    --aprobado: hsl(210 100% 61%);
    --encurso: hsl(290 100% 65%);
}

/*VARIABLES PARA COLORES SEGUN EL TEMA SEA OSCURO O CLARO*/
    :root[data-theme="light"] {
        --bg-dark: hsl(224, 0%, 90%);
        --bg: hsl(224, 0%, 95%);
        --bg-light: hsl(224, 0%, 100%);
        --text: hsl(224, 0%, 4%);
        --text-muted: hsl(224, 0%, 28%);
        --highlight: hsl(224, 100%, 98%);
        --border: hsl(224, 0%, 50%);
        --border-muted: hsl(224, 0%, 62%);
        --primary: hsl(356, 97%, 50%);
        --secondary: hsl(38, 83%, 55%); /* antes 41% luz, ahora más visible */
        --danger: hsl(9, 65%, 48%); /* más saturado y brillante */
        --warning: hsl(42, 100%, 50%); /* mucho mejor para alertas visibles */
        --success: hsl(147, 50%, 45%); /* más saturación y brillo */
        --info: hsl(356, 97%, 34%);
        --gray: hsl(0 0% 25%);
        --white: hsl(0 0% 100%);
    }

    :root[data-theme="dark"] {
        --bg-dark: hsl(224, 0%, 1%);
        --bg: hsl(224, 0%, 4%);
        --bg-light: hsl(224, 0%, 9%);
        --text: hsl(224, 0%, 95%);
        --text-muted: hsl(224, 0%, 69%);
        --highlight: hsl(224, 0%, 25%);
        --border: hsl(224, 0%, 28%);
        --border-muted: hsl(224, 0%, 18%);
        --primary: hsl(356, 97%, 34%);
        --secondary: hsl(30, 83%, 54%);
        --danger: hsl(9, 65%, 62%);
        --warning: hsl(42, 100%, 60%);
        --success: hsl(147, 50%, 60%);
        --info: hsl(356, 61%, 50%);
        --gray: hsl(0 0% 25%);
        --white: hsl(0 0% 100%);
    }

    :root[data-theme="dark"] {
        --status-solicitado: hsl(210, 80%, 45%); /* azul medio */
        --status-aprobado: hsl(147, 50%, 40%); /* verde */
        --status-en-curso: hsl(190, 70%, 40%); /* turquesa */
        --status-finalizado: hsl(38, 83%, 50%); /* dorado/ámbar */
        --status-cancelado: hsl(25, 85%, 50%); /* naranja */
        --status-rechazado: hsl(0, 70%, 45%); /* rojo */
        --status-archivado: hsl(0, 0%, 40%); /* gris medio */
    }

    :root[data-theme="light"] {
        --status-solicitado: hsl(210, 80%, 65%); /* azul más brillante */
        --status-aprobado: hsl(147, 50%, 60%); /* verde más claro */
        --status-en-curso: hsl(190, 70%, 60%); /* turquesa brillante */
        --status-finalizado: hsl(38, 83%, 60%); /* ámbar más claro */
        --status-cancelado: hsl(25, 85%, 60%); /* naranja más luminoso */
        --status-rechazado: hsl(0, 70%, 60%); /* rojo brillante */
        --status-archivado: hsl(0, 0%, 60%); /* gris claro */
    }