/* ============================================================================
   Panel del taller (index.html) — estilos propios de la página.
   Depende de assets/theme.css.
   ========================================================================== */

/* ------------------------------------------------------------ login */
.auth-wrap{max-width:400px; margin:56px auto 0;}
.auth-wrap .card{padding:28px 26px;}
.auth-title{font-family:var(--font-head); font-size:32px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; line-height:1.05;}
.auth-subtitle{margin:0 0 20px; font-size:13.5px; color:var(--text-muted); line-height:1.5;}
.auth-wrap input{background:var(--surface-2); border:none; border-bottom:2px solid var(--border-strong); border-radius:0; padding:12px 4px;}
.auth-wrap input:focus{border-bottom-color:var(--brand); box-shadow:none;}
.auth-wrap .btn{width:100%;}
.auth-wrap .btn + .btn{margin-top:10px;}
#btn-auth-submit{margin-top:22px;}
.auth-sep{
  display:flex; align-items:center; gap:12px;
  margin:16px 0 6px; font-size:11px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--text-dim);
}
.auth-sep::before, .auth-sep::after{content:""; height:1px; flex:1; background:var(--border);}
.auth-toggle{text-align:center; margin-top:16px; font-size:13px; color:var(--text-muted);}
.auth-toggle a{cursor:pointer;}

/* ------------------------------------------------------------ layout panel */
.panel-top{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start;}
.panel-top > *{flex:1 1 280px; min-width:min(100%, 280px);}

/* ------------------------------------------------------------ formulario (nuevo / detalle) */
.form-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.form-header .kicker{margin:0;}

.foto-picker{
  display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:10px;
  background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-xs);
  width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.foto-picker:hover{border-color:var(--brand); background:var(--surface-2);}
.foto-picker__preview{
  width:88px; height:88px; flex-shrink:0; border-radius:var(--radius-xs);
  background:var(--surface-2); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.foto-picker__preview svg{width:32px; height:32px;}
.foto-picker__preview img{width:100%; height:100%; object-fit:cover; display:block;}

.preview{background:var(--surface); border-radius:var(--radius-xs); padding:12px 14px; margin-bottom:14px;}
.preview__head{margin-bottom:8px;}
.preview__bar{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:8px;}
.preview__fill{height:100%; border-radius:999px; width:0; transition:width .4s var(--ease);}
.preview__detalle{margin:0; font-size:12px; color:var(--text-muted);}

/* ------------------------------------------------------------ lista de vehículos */
.lista-vehiculos{list-style:none; margin:0 0 14px; padding:0; max-height:440px; overflow-y:auto;}
.lista-vehiculos li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 10px 11px 14px; margin-bottom:2px;
  border-bottom:1px solid var(--border);
  border-left:6px solid transparent;
}
.lista-vehiculos li:last-child{border-bottom:none;}
/* barra de acento a la izquierda según el estado del vehículo (sin tocar el JS) */
.lista-vehiculos li:has(.pill--bad){border-left-color:var(--rust);}
.lista-vehiculos li:has(.pill--warn){border-left-color:var(--amber);}
.lista-vehiculos li:has(.pill--ok){border-left-color:var(--green);}
.lista-vehiculos li:has(.pill--muted){border-left-color:var(--border-strong);}
.lista-vehiculos__vacio{color:var(--text-muted); font-size:13px;}

.lista-vehiculos .info{
  display:flex; flex-direction:row; align-items:center; gap:10px; flex:1; min-width:0;
  cursor:pointer; padding:4px 8px; margin:-4px -8px; border-radius:var(--radius-xs);
  transition:background .15s var(--ease);
}
.lista-vehiculos .info:hover{background:var(--surface-2);}
.lista-vehiculos__foto{
  width:64px; height:64px; flex-shrink:0; border-radius:var(--radius-xs);
  background:var(--surface-2); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.lista-vehiculos__foto svg{width:28px; height:28px;}
.lista-vehiculos__foto img{width:100%; height:100%; object-fit:cover; display:block;}
.lista-vehiculos__datos{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.lista-vehiculos .patente{font-family:var(--font-head); font-weight:600; font-size:15px; letter-spacing:.5px;}
.lista-vehiculos .modelo{color:var(--text-muted); font-size:12.5px;}
.lista-vehiculos .pill{align-self:flex-start; margin-top:2px;}

#resumen-vencimientos{font-size:12px; color:var(--text-muted); margin:0 0 12px;}

/* ------------------------------------------------------------ acciones + QR */
.panel-acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}

.qr-block{
  margin-top:22px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px;
}
#qrcode{background:#fff; padding:10px; border-radius:var(--radius-xs); line-height:0; flex-shrink:0;}
.qr-copy{flex:1; min-width:220px;}
.qr-copy p{margin:0 0 6px; font-size:13px; color:var(--text-muted); max-width:360px; line-height:1.5;}
.qr-copy .qr-url{font-size:12px; color:var(--brand); word-break:break-all;}
.qr-copy .btn-row{margin-top:12px;}

/* ------------------------------------------------------------ config taller */
.taller-resumen{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.taller-resumen__nombre{font-weight:600; font-size:15px; margin-bottom:3px;}

@media (max-width:640px){
  .auth-wrap{margin-top:32px;}
  .qr-block{justify-content:center;}
}