/* Colores en variables: claro por defecto, oscuro si lo pide el sistema o el botón (data-tema en <html>). */
:root { --fondo: #f6f8fa; --tarj: #ffffff; --borde: #d0d7de; --texto: #1f2328; --tenue: #59636e; --baja: #cf222e; --sube: #1a7f37; --acento: #0969da; --boton-texto: #ffffff; --aviso: #9a6700; color-scheme: light; }
:root[data-tema="oscuro"] { --fondo: #0f1419; --tarj: #1a2129; --borde: #2c3640; --texto: #e6edf3; --tenue: #8b98a5; --baja: #ff7b72; --sube: #3fb950; --acento: #58a6ff; --boton-texto: #04101d; --aviso: #d29922; color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) { --fondo: #0f1419; --tarj: #1a2129; --borde: #2c3640; --texto: #e6edf3; --tenue: #8b98a5; --baja: #ff7b72; --sube: #3fb950; --acento: #58a6ff; --boton-texto: #04101d; --aviso: #d29922; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 720px; padding: 16px; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
.sub, .chico { color: var(--tenue); font-size: .85rem; }
.tarjeta { background: var(--tarj); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin-top: 12px; }
.tarjeta h2 { margin-top: 0; }
.pausado { border-color: var(--aviso); }
.fila { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
form { display: grid; gap: 10px; }
label { display: grid; gap: 4px; font-size: .9rem; color: var(--tenue); }
input, select, button { font: inherit; padding: 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); }
button { background: var(--acento); color: var(--boton-texto); border: 0; font-weight: 600; cursor: pointer; }
button.peligro { background: transparent; color: var(--baja); border: 1px solid var(--baja); }
#btn-cancelar, .acciones button:first-child { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.marca { background: var(--tarj); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; display: grid; gap: 4px; }
.marca.disparada { opacity: .7; border-style: dashed; }
.tipo.baja { color: var(--baja); } .tipo.sube { color: var(--sube); }
.acciones { justify-content: flex-start; margin-top: 4px; }
.vacio { color: var(--tenue); }
footer { margin: 24px 0 8px; }
header.fila { align-items: flex-start; flex-wrap: nowrap; }
button.tema { background: transparent; color: var(--texto); border: 1px solid var(--borde); padding: 6px 10px; font-size: 1.1rem; line-height: 1; flex: none; }
@media (min-width: 560px) { form { grid-template-columns: 1fr 1fr; } form .fila, form p { grid-column: 1 / -1; } }
#form-token input { flex: 1 1 180px; }
button:disabled, input:disabled, select:disabled { opacity: .45; cursor: not-allowed; }