/* =====================================================================
   PANEL DEL TALLER · estilos (usa también ../estilos.css)
   Pensado para usarlo en el móvil con las manos ocupadas: botones grandes.
   ===================================================================== */

.panel { display: grid; gap: 2rem; padding-block: 2rem 4rem; }
.etiqueta-panel { margin-left: .4rem; padding: .15rem .5rem; border-radius: 4px; background: var(--amarillo); color: var(--grafito); font-size: .7rem; letter-spacing: .1em; }
.tarjeta { padding: 1.5rem; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; }
.entrar { max-width: 28rem; margin: 3rem auto 0; width: 100%; }
.entrar h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.btn--peque { min-height: 2.5rem; padding: .55rem .9rem; font-size: .8125rem; box-shadow: none; }

.formulario-panel { display: grid; gap: 1rem; }
.formulario-panel .btn { justify-self: start; }
.campo input, .campo select, .campo textarea { font: inherit; }
.alta { margin-top: 1rem; }
.aviso { margin: 1rem 0 0; min-height: 1.4em; font-weight: 600; color: var(--verde); }
.aviso--error { color: var(--rojo); }
.aviso b { padding: .1rem .5rem; border-radius: 4px; background: var(--amarillo); color: var(--grafito); letter-spacing: .15em; font-size: 1.1em; }

.lista-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.lista-cabeza h2 { margin: 0; font-size: clamp(1.4rem, 5vw, 2rem); }
#cuantos { color: var(--amarillo); }

.coches { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.coche-panel { display: grid; gap: .9rem; padding: 1.25rem; background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--amarillo); border-radius: 8px; }
.coche-panel--listo { border-left-color: var(--verde); }
.coche-panel__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.coche-panel__placa { padding: .2rem .6rem; border-radius: 4px; background: #fff; color: #0d0d0d; font-weight: 800; letter-spacing: .08em; }
.coche-panel__modelo { margin: 0; font-stretch: 125%; font-weight: 800; text-transform: uppercase; }
.coche-panel__codigo { margin: 0 0 0 auto; font-size: .8125rem; color: var(--suave); }
.coche-panel__codigo b { color: var(--amarillo); letter-spacing: .15em; font-size: 1rem; }
.coche-panel__hora { margin: 0; font-size: .8125rem; color: var(--suave); }
/* Botones de paso: uno por cada paso, el actual en amarillo */
.pasos-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.pasos-botones button {
  padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--grafito);
  color: var(--suave); font: 700 .8125rem/1 var(--fuente); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.pasos-botones button:hover { border-color: var(--amarillo); color: var(--texto); }
.pasos-botones button[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: var(--grafito); }
.coche-panel textarea { min-height: 4.5rem; resize: vertical; }
.coche-panel__acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn--borrar { border-color: var(--rojo); color: var(--rojo); box-shadow: none; }
.btn--borrar:hover { background: var(--rojo); color: var(--grafito); }
.btn--borrar.confirmar { background: var(--rojo); color: var(--grafito); }
.vacio { padding: 2rem; text-align: center; color: var(--suave); border: 2px dashed var(--linea); border-radius: 8px; }

@media (min-width: 48rem) {
  .alta { grid-template-columns: 1fr 1fr; align-items: end; }
  .alta__nota { grid-column: 1 / -1; }
  .coches { grid-template-columns: 1fr 1fr; }
}