:root {
    --fondo: #0b1220;
    --papel: #131c2e;
    --tinta: #e6edf7;
    --apagado: #93a3bd;
    --borde: #22304b;
    --verde: #16a34a;
    --ambar: #d97706;
    --rojo: #dc2626;
    --azul: #2563eb;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.barra {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 2;
}

.marca { font-weight: 700; letter-spacing: .02em; }
.nav { display: flex; gap: 1rem; margin-left: auto; }
a { color: var(--tinta); text-decoration: none; }
.nav a { color: var(--apagado); }
.nav a:hover, .nav a:focus { color: var(--tinta); }

.vista { padding: 1rem; max-width: 60rem; margin: 0 auto; }
.oculta { display: none; }

.franja {
    margin: 0;
    padding: .5rem 1rem;
    background: var(--ambar);
    color: #1b1200;
    font-weight: 600;
}

.encabezado { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
h1 { font-size: 1.35rem; margin: .5rem 0; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.apunte { color: var(--apagado); font-size: .875rem; margin: .25rem 0; }
/* La fecha y sus dos flechas van juntas y no se parten: separarlas en dos
   lineas al estrecharse dejaria la flecha de "siguiente" lejos de la fecha a
   la que se refiere. */
.nav-fecha { display: flex; align-items: center; gap: .375rem; flex-wrap: nowrap; }
.flecha { padding: .5rem .625rem; line-height: 1; }

.resumen { color: var(--apagado); font-size: .875rem; }

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

.tarjeta {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: .75rem;
}

.tarjeta-titulo { font-size: 1rem; margin: 0 0 .35rem; }
.numeros { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; }

.bolo {
    min-width: 2rem;
    padding: .2rem .4rem;
    text-align: center;
    background: #0a1020;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.estado {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #06121f;
}

.estado-confirmado { background: var(--verde); }
.estado-sin_confirmar { background: var(--ambar); }
.estado-en_disputa { background: var(--rojo); color: #fff; }
.estado-manual { background: var(--azul); color: #fff; }

.formulario { display: grid; gap: .5rem; max-width: 24rem; }
label { color: var(--apagado); font-size: .875rem; }

input, select, button {
    font: inherit;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid var(--borde);
    background: #0a1020;
    color: var(--tinta);
}

button { background: var(--verde); color: #04140a; font-weight: 700; border: 0; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.peligro { background: var(--rojo); color: #fff; }
.boton { display: inline-block; padding: .5rem .75rem; background: var(--verde); color: #04140a; border-radius: .5rem; font-weight: 700; }

.aviso { padding: .5rem .75rem; border-radius: .5rem; background: var(--papel); border: 1px solid var(--borde); }
.aviso-malo { border-color: var(--rojo); }

.logo {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: .5rem;
    overflow: hidden;
    background: #0a1020;
    border: 1px solid var(--borde);
}

.logo-iniciales {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--apagado);
}

.logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.consenso { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.discrepancia { color: var(--ambar); font-size: .875rem; margin: .25rem 0; width: 100%; }
.dia { padding: .75rem 0; border-top: 1px solid var(--borde); }
.obs-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
.obs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.obs-retirada { opacity: .55; text-decoration: line-through; }
.obs-retirada .nota { text-decoration: none; }
.fuente { min-width: 7rem; color: var(--apagado); font-size: .875rem; }
.nota { width: 100%; margin: .25rem 0 0; padding-left: .5rem; border-left: 2px solid var(--borde); }

.ficha {
    padding: .75rem;
    margin: .5rem 0;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: .75rem;
}

.acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
/* Etiqueta encima del campo. Los botones de la misma fila se alinean con los
   campos y no con las etiquetas: sin align-items se estirarian a la altura de
   las dos cosas juntas. */
.campos { align-items: flex-end; }
.campo { display: grid; gap: .125rem; }
.campo input { font-size: 1rem; }

.estado-activa { background: var(--verde); }
.estado-apagada { background: var(--rojo); color: #fff; }
.alias-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .75rem; }
.alias { display: grid; gap: .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--borde); }

.confirmacion { display: flex; align-items: center; gap: .5rem; color: var(--tinta); }
.confirmacion input { width: auto; }