:root{
  --cacao:#24150F;--tostado:#3A251B;--nib:#5B3A29;--oro:#D4A64A;--oro2:#F0D48A;
  --leche:#F3E6D3;--rojo:#E0664F;--verde:#8DBF7A;--gris:#B9A797;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cacao);color:var(--leche);font-family:Manrope,system-ui,sans-serif}
body{max-width:620px;margin:0 auto;min-height:100vh;padding-bottom:40px}
a{color:var(--oro2);text-decoration:none}
h1,h2,h3{font-family:Fraunces,serif}

.cab{padding:22px 18px 16px;background:radial-gradient(120% 90% at 0% 0%,#4a2e20 0%,var(--cacao) 70%)}
.marca{font:600 11px ui-monospace,monospace;letter-spacing:.18em;color:var(--oro);text-transform:uppercase}
.cab h1{font:700 28px/1.1 Fraunces,serif;margin:8px 0 6px}
.cab h1 em{font-style:normal;color:var(--oro)}
.sub{color:var(--gris);font-size:13px}
.sub a{margin-left:2px}

.pulso{display:flex;gap:8px;margin-top:16px}
.pulso div{flex:1;background:var(--tostado);border-radius:14px;padding:10px 12px}
.pulso b{display:block;font:700 24px Fraunces,serif}
.pulso span{font-size:11px;color:var(--gris)}
.pulso .r b{color:var(--rojo)} .pulso .o b{color:var(--oro)} .pulso .v b{color:var(--verde)}

.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 18px;-webkit-overflow-scrolling:touch}
.chip{flex:none;border:1px solid var(--nib);background:none;color:var(--leche);
  font:600 13px Manrope;padding:7px 13px;border-radius:99px;cursor:pointer}
.chip.on{background:var(--oro);color:var(--cacao);border-color:var(--oro)}

main#lista,main.tablero{padding:6px 18px 0}
.grupo{margin-top:16px}
.grupo h2{font:600 12px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px}
.grupo.colapsable h2{cursor:pointer}
.grupo.colapsable h2::after{content:" ▸";font-size:10px}
.grupo.colapsable.abierto h2::after{content:" ▾"}
.grupo.colapsable .tarjetas{display:none}
.grupo.colapsable.abierto .tarjetas{display:block}

.t{display:block;background:var(--tostado);border-radius:16px;padding:14px 14px 12px;
  margin-bottom:10px;border-left:4px solid var(--oro)}
.t.atr{border-left-color:var(--rojo)}
.t.ok{border-left-color:var(--verde);opacity:.65}
.t h3{font:600 16px/1.3 Manrope,sans-serif;color:var(--leche);margin-bottom:4px}
.t p{font-size:13px;color:var(--gris);line-height:1.4}
.meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;flex-wrap:wrap}
.quien{background:var(--nib);border-radius:99px;padding:3px 10px;font-weight:600}
.fecha{margin-left:auto;font:600 12px ui-monospace,monospace}
.t.atr .fecha{color:var(--rojo)}
.distintivo{display:inline-block;margin-top:8px;font-size:11px;color:var(--oro2);
  border:1px dashed var(--nib);border-radius:99px;padding:2px 9px}
.prioridad{font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-radius:99px;
  padding:3px 9px;background:var(--nib)}
.prioridad-alta{color:var(--rojo)}
.prioridad-media{color:var(--oro)}
.prioridad-baja{color:var(--verde)}

.tablero{display:flex;gap:12px;overflow-x:auto;padding-bottom:20px}
.columna{flex:0 0 78%;max-width:280px;background:#1c0f0a;border-radius:16px;padding:12px}
.columna h2{font:600 12px ui-monospace,monospace;letter-spacing:.1em;color:var(--gris);
  text-transform:uppercase;margin-bottom:10px}

.login{padding:60px 24px;text-align:center}
.login h1{font-size:26px;margin:14px 0 10px}
.login h1 em{color:var(--oro);font-style:normal}
.login p{color:var(--gris);font-size:14px;line-height:1.5}
.login .error{color:var(--rojo);margin-top:14px}

.bloque{margin:18px 18px 0;padding:16px;background:var(--tostado);border-radius:16px}
.bloque h2{font:600 13px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oro2);margin-bottom:10px}
.bloque p{font-size:14px;line-height:1.5;color:var(--leche)}
.bloque.alerta{background:#3a1d16;border:1px dashed var(--rojo)}
.area{color:var(--gris);font-size:13px;margin-top:6px}
.fecha-grande{font:600 14px ui-monospace,monospace;color:var(--oro2);margin-top:8px}

.pasos{list-style:none}
.pasos li{padding:8px 0;border-bottom:1px solid var(--nib)}
.pasos li:last-child{border-bottom:none}
.pasos label{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.pasos input[type=checkbox]{width:20px;height:20px;margin-top:1px;accent-color:var(--oro)}

.acciones{display:flex;flex-direction:column;gap:10px}
.boton{display:inline-block;width:100%;border:none;border-radius:12px;padding:13px 16px;
  font:700 14px Manrope,sans-serif;cursor:pointer;text-align:center}
.boton-oro{background:var(--oro);color:var(--cacao)}
.boton-verde{background:var(--verde);color:var(--cacao)}
.boton-rojo{background:var(--rojo);color:var(--leche)}
.form-devolver{display:flex;flex-direction:column;gap:8px}
.aviso-leve{color:var(--gris);font-size:13px}

textarea,input[type=text],input[type=date],select,input[type=file]{
  width:100%;background:#1c0f0a;border:1px solid var(--nib);border-radius:10px;
  color:var(--leche);padding:10px 12px;font:14px Manrope,sans-serif;margin-top:4px}
textarea{min-height:70px;resize:vertical}

.comentarios{list-style:none;margin-bottom:14px}
.comentarios li{padding:10px 0;border-bottom:1px solid var(--nib)}
.comentarios .autor{font-weight:700;font-size:13px}
.comentarios .cuando{color:var(--gris);font-weight:400;font-size:12px;margin-left:6px}
.comentarios p{margin-top:3px}
.adjunto{display:inline-block;margin-top:6px;font-size:13px;color:var(--oro2)}
.form-comentario{display:flex;flex-direction:column;gap:8px}

.historial{list-style:none;font-size:13px;color:var(--gris)}
.historial li{padding:6px 0;border-bottom:1px solid var(--nib)}
.historial .cuando{font-family:ui-monospace,monospace;color:var(--oro2);margin-right:6px}

.form-editar{margin:18px;display:flex;flex-direction:column;gap:14px}
.form-editar label{display:flex;flex-direction:column;font-size:13px;color:var(--gris);gap:2px}

.pie{text-align:center;padding:24px 18px;font-size:12px;color:var(--gris)}

@media (min-width:700px){
  body{max-width:680px}
  .tablero{overflow-x:visible}
}