/*
 * Este archivo solamente contiene variables globales,
 * elementos comunes, tanto estructurales (body, section, table, etc.)
 * como de uso (button, a, input, textarea, etc.)
 * Este archivo NO debe contener lógica de una ruta específica.
 */

:root {
    /* COLORES */
    --color-bg: #ffffff;
    --color-bg-secondary: #e9e9e9;
    --color-text: #000000;
    --color-secondary: #1f1f1f;

    --color-red: #ff503a;
    --color-light-red: #f8cac4;
    --color-lighter-red: #fadcd8;

    --color-green: #8cc23b;
    --color-light-green: oklch(from var(--color-green) l c h);

    --color-blue: #118bee;

    --color-link: var(--color-blue);

    /* Sombras, luces y bordes */
    --box-shadow: 2px 2px 10px;
    --color-shadow: gainsboro;
    --hover-brightness: 1.2;
    --border: 1px solid var(--color-bg-secondary);
    --border-radius: 2px;

    /* Fuente */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Tamaños de caja útiles (robados de mvp.css)*/
    --width-card-small: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}

/*
 * Elementos estructurales (body, main, etc.)
 * NOTA: nav está contenido en nav.css porque es muy grande.
 */

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);

    display: grid;
    gap: 1rem;
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
}

header,
main {
    display: grid;

    padding-inline: clamp(1ch, 5vw, 10ch);
}

section {
    display: grid;
    align-content: start;
    overflow-x: auto;
    gap: 1rem;
}


footer {
    background: var(--color-secondary);
    color: white;

    min-height: 2rem;
    font-size: 1rem;
    font-weight: bold;

    display: grid;
    justify-items: center;
    align-items: center;
}

/* TODO: form (quizá no es necesario) */
form {
}

/* Dialog (todo un temón) */
dialog {
    margin: auto;
    position: fixed;
    width: min(var(--width-card-wide), 100vw);

    header {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr auto;
    }
}


/*
 * Elementos comunes (botones, checkboxes, links, inputs)
 */

button {
    font-size: inherit;
    font-weight: bold;
    color: var(--color-bg);
    background-color: var(--color-green);
    border-color: var(--color-green);

    width: 100%;
    border-radius: 3px;
    padding: 1em;

    &:hover {
        cursor: pointer;
        filter: brightness(var(--hover-brightness));
    }

    &:active {
        filter: brightness(var(--active-brightness));
    }

    &:disabled {
        background: var(--color-bg-secondary);
        border-color: var(--color-bg-secondary);
        color: var(--color-text);
        cursor: not-allowed;
    }

    &:disabled:hover {
        filter: none;
    }

}

button.delete {
        background-color: var(--color-red);
        border-color: var(--color-red);
    }

button.secondary {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
    }

a {
    color: var(--color-link);
    font-weight: bold;
    text-decoration: underline;

    &:hover {
        filter: brightness(var(--hover-brightness));
    }

    &:active {
        filter: brightness(var(--hover-brightness));
    }
}

input,
select,
textarea {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
}

input[readonly],
textarea[readonly] {
    background-color: var(--color-bg-secondary);
}

label {
    font-weight: bold;
}

/* Tablas */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
}

th {
    text-align: left;
}

th,
td {
    padding: 0.5rem;
}

tfoot td {
    font-weight: bold;
}

td:has(button) {
    text-align: right;
}

th input,
td input {
    text-align: inherit;
}

th[data-type="numeric"],
td[data-type="numeric"] {
    text-align: right;
}

td button {
    padding: inherit;
    padding-inline: 1rem;
    width: auto;
}

th,
tfoot td {
    color: var(--color-bg);
    background: var(--color-green);
}

tr:nth-of-type(2n) {
    background: hsl(0 0% 0% / 0.05);
}

@media screen and (max-width: 700px) {
    tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--color-bg-secondary);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow) var(--color-shadow);
    }

    th,
    thead {
        display: none;
    }

    td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    td[data-cell]::before {
        content: attr(data-cell) ": ";
        font-weight: bold;
        text-transform: capitalize;

        input {
            width: auto;
        }
    }

    td:has(button) {
        text-align: left;
    }
}

@media screen and (min-width: 700px) {
    thead {
        position: sticky;
        top: 0;
    }

    tfoot {
        position: sticky;
        bottom: 0;
    }
}


/* Texto */

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: bold;
}

h3 {
    font-size: 1.2rem;
    font-weight: bold;
}

/* clases comunes (card, flash, fields, paginator, badge) */

.card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
}

.card-small {
    width: min(100%, var(--width-card-small));
}

.card-medium {
    width: min(100%, var(--width-card-medium));
}

.card-wide {
    width: min(100%, var(--width-card-wide));
}

.card-round {
    border-radius: 20px;
}

/* Utilizado para ediciones básicas (un título y un botón) */
.edit-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.cards-container {
    --card-size: min(100%, 250px);
    --repeat-mode: auto-fit;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--repeat-mode), minmax(var(--card-size), 1fr));

    &.auto-fill {
        --repeat-mode: auto-fill;
    }
}

.input-wrapper {
    display: grid;
    gap: 1px;
}

.input-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.flash {
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: 2px solid var(--color-green);
    color: white;
    background-color: var(--color-green);
    border-radius: 8px;

    .error {
        background-color: var(--color-red);
        border-color: var(--color-red);
    }
}

.field-error {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: white;
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.paginador {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;

    button {
        width: clamp(2ch, 20vw ,6rem);
        display: block;
        padding: 0;
        padding-block: 5px;
    }
}

.badge {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.5rem;

    color: var(--color-bg);
    background: var(--color-secondary);

    border-radius: 20px;
    padding-inline: 10px;

    font-size: 0.9rem;
    font-weight: bold;

    button {
        font-size: 0.7rem;
        background: inherit;
        color: inherit;
        border: none;
        padding: 3px;
    }

    button:hover {
        background: none;
    }
}

.badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Una grid sencilla con auto-rows con gaps */
.grid {
    display: grid;
    gap: 1rem;
}

.width-auto {
    width: auto;
}