/* Paleta Anubis (design tokens). Definida aquí porque genericos.css se
   carga en todas las páginas del proyecto; el resto de los .css la
   consume vía var(--token) en lugar de repetir códigos de color. */
:root {
    --bg: #2b2724;
    --bg-sidebar: #211e1c;
    --bg-card: #332e2a;
    --bg-hover: #37312d;
    --border: #4a433d;

    --text-primary: #eeebe7;
    --text-secondary: #b3aaa2;
    --text-muted: #8a8078;
    --text-muted-2: #6f665f;

    --accent: #e0a63c;
    --accent-variant: #a66a2f;

    --success: #3fb673;
    --info: #6fa8d8;
    --danger: #c0522f;
    --danger-variant: #c9683f;
}

body {
    display: flex;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg);
    font-family: sans-serif;
}

h1{
    margin-bottom: 20px;
}

fieldset {
    border: 2px solid var(--border);
    padding: 20px;
    margin: 20px auto;
    width: 100%;
    align-items: center;

}

/*INPUTS*/

input,
textarea {
    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-primary);
    outline: none;

}

input:focus,
textarea:focus {
    border-color: var(--accent);
}

/* textarea no hereda tipografía por defecto como input, y sin esto se ve con
   la fuente monoespaciada del navegador en vez de la del resto del formulario. */
textarea {
    font-family: inherit;
    font-size: inherit;
    min-height: 80px;
    resize: vertical;
}

/* El autofill del navegador (nombre, teléfono, dirección, etc. son campos
   que Chrome reconoce y autocompleta) pinta su propio fondo mediante el
   UA stylesheet, que "background"/"color" normales no pueden pisar. El
   truco es forzar un box-shadow inset del tamaño del campo con nuestro
   color de fondo, y fijar el color de texto con -webkit-text-fill-color. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

tr:has(input[type="radio"]:checked) td {
    background-color: var(--bg-hover);
    border-left: 4px solid var(--accent);
}

/*SElECTS*/

select {

    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-primary);
    outline: none;
}

/* LABELS */

label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* BOTONES */

button {
    padding: 12px 24px; /* Padding horizontal para que se vea bien cuando no es 100% de ancho */
    background-color: var(--accent);
    border: none;
    border-radius: 5px;
    color: var(--bg-sidebar);
    font-weight: bold;
    cursor: pointer;
    /* Transiciones específicas: evitan que otras propiedades cambien accidentalmente */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover {
    background-color: var(--accent-variant); /* Variante más oscura del ámbar */
}

button:active{
    transform: scale(0.97); /* Da un efecto táctil de hundimiento muy agradable */
}

.btn-bloque {
    width: 100%;
    margin-top: 10px;
}