:root { color-scheme: light dark; --borde: #8884; }
* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; padding: 24px 16px; }
main { max-width: 26rem; margin: 0 auto; }
main.ancho { max-width: 44rem; }
h1 { font-size: 1.25rem; margin: 0 0 1.5rem; }
h2 { font-size: 1rem; margin: 2rem 0 .5rem; }
label { display: block; margin: 1rem 0 .25rem; font-size: .875rem; }
input { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid var(--borde);
        border-radius: 6px; background: transparent; color: inherit; }
input[name=codigo] { font-size: 1.5rem; letter-spacing: .4em; text-align: center; }
textarea { width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid var(--borde);
           border-radius: 6px; background: transparent; color: inherit; resize: vertical; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.acciones form { display: inline; }
.acciones button { margin-top: 0; }
h3 { font-size: .9rem; margin: 1.5rem 0 .25rem; }
.armadas { display: flex; flex-wrap: wrap; gap: .75rem; }
.armadas form { flex: 1 1 14rem; padding: .6rem .7rem; border: 1px solid var(--borde);
                border-radius: 6px; }
.armadas button { margin-top: 0; }
.armadas .texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem;
                  opacity: .8; margin-top: .5rem; }
td .texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; opacity: .8;
            margin-top: .25rem; }
button { margin-top: 1.5rem; padding: .6rem 1.2rem; font: inherit; cursor: pointer;
         border: 1px solid var(--borde); border-radius: 6px; background: transparent;
         color: inherit; }
.error { margin: 1rem 0; padding: .75rem; border-left: 3px solid #c0392b; background: #c0392b18; }
.aviso { margin: 1rem 0; padding: .75rem; border-left: 3px solid #8884; background: #8881; }
.secreto { font-family: ui-monospace, monospace; font-size: 1.05rem; word-spacing: .35em;
           padding: .75rem; border: 1px dashed var(--borde); border-radius: 6px;
           user-select: all; }
ul { padding-left: 1.1rem; }
li { margin: .35rem 0; }
.pie { margin-top: 3rem; font-size: .8rem; opacity: .7; }
.pie form { display: inline; }
.pie button { margin: 0; padding: .2rem .5rem; font-size: .8rem; }

.barra { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
         padding-bottom: .75rem; border-bottom: 1px solid var(--borde); }
.barra nav { display: flex; flex-wrap: wrap; gap: 1rem; }
a { color: inherit; }
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--borde);
         vertical-align: top; }
th { font-weight: 600; opacity: .75; font-size: .8rem; text-transform: uppercase;
     letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.pendiente td:first-child { border-left: 3px solid #e67e22; }
.bien { color: #1e8449; }
.mal { color: #c0392b; }
.tarjetas { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; }
.tarjeta { flex: 1 1 10rem; padding: .9rem 1rem; border: 1px solid var(--borde);
           border-radius: 8px; display: flex; flex-direction: column; gap: .2rem; }
.tarjeta .grande { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.tarjeta span:last-child { font-size: .8rem; opacity: .75; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.filtros input { flex: 1 1 14rem; }
.filtros select { flex: 0 1 14rem; padding: .6rem .5rem; font: inherit;
                  border: 1px solid var(--borde); border-radius: 6px;
                  background: transparent; color: inherit; }
.filtros button { margin: 0; }
.dos { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.dos > section { flex: 1 1 18rem; min-width: 0; }
.msg { margin: .5rem 0; padding: .5rem .7rem; border-radius: 8px; max-width: 90%;
       border: 1px solid var(--borde); }
.msg.entrante { margin-right: auto; }
.msg.saliente { margin-left: auto; background: #8881; }
.msg .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .cuando { font-size: .72rem; opacity: .6; margin-top: .25rem; }
.avisos { display: flex; gap: .6rem; align-items: center; font-size: .85rem; margin: .4rem 0 0; }
.avisos button { padding: .25rem .7rem; }