:root {
  --tinta:        #17181c;
  --tinta-suave:  #5c6069;
  --linea:        #e2e4e8;
  --fondo:        #f6f7f9;
  --blanco:       #ffffff;
  --acento:       #1d4e7c;  /* azul de acción (antes naranja #c8471f), ver tokens.css */
  --acento-hover: #17405f;
  --error-fondo:  #fdecea;
  --error-borde:  #f0b4ac;
  --error-texto:  #8c2115;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- LOGIN ---------- */

.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-login {
  width: 100%;
  max-width: 380px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 36px 32px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

.marca { text-align: center; margin-bottom: 28px; }

.marca-nombre {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--acento);
}

.marca-sub {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-top: 4px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta);
  margin-bottom: 18px;
  transition: border-color .15s, box-shadow .15s;
}

input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(29, 78, 124,.12);
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--blanco);
  background: var(--acento);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s;
}

button[type="submit"]:hover { background: var(--acento-hover); }

.aviso-error {
  background: var(--error-fondo);
  border: 1px solid var(--error-borde);
  color: var(--error-texto);
  font-size: 13.5px;
  padding: 11px 13px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ---------- CABECERA ---------- */

.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cabecera-marca {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--acento);
}

.cabecera-usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}

.usuario-nombre { font-weight: 600; }

.etiqueta-rol {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--fondo);
  border: 1px solid var(--linea);
  padding: 3px 9px;
  border-radius: 20px;
}

.enlace-salir {
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
}

.enlace-salir:hover { color: var(--acento); }

/* ---------- CONTENIDO ---------- */

.contenido {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

h1 { font-size: 27px; font-weight: 650; letter-spacing: -.01em; }

.subtitulo {
  color: var(--tinta-suave);
  font-size: 14.5px;
  margin-top: 6px;
  margin-bottom: 32px;
}

.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
}

.panel-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 14px;
}

.lista-permisos { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  padding: 4px 9px;
  border-radius: 5px;
  color: var(--tinta-suave);
}

.panel-pendiente p { font-size: 14px; color: var(--tinta-suave); }

@media (max-width: 520px) {
  .cabecera { padding: 0 16px; }
  .etiqueta-rol { display: none; }
  .contenido { padding: 28px 16px 48px; }
}

/* ---------- Rejilla de modulos ---------- */

.rejilla-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tarjeta-modulo {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}

.tarjeta-modulo:hover {
  border-color: #1d4e7c;
  box-shadow: 0 2px 10px rgba(29,78,124,.09);
}

.modulo-nombre { font-size: 15px; font-weight: 650; margin-bottom: 5px; }
.modulo-desc { font-size: 13px; color: var(--tinta-suave); line-height: 1.5; }

/* ===========================================================================
   SHELL GESTIÓN — menú lateral en árbol (escritorio) / panel deslizante
   con ☰ (móvil-tablet). Diseño v1, sección 4. Mobile-first: por defecto el
   menú vive fuera de pantalla; el @media de 1024px lo fija como columna.
   Patrón checkbox — funciona sin JS, ver plantillas/_shell_gestion.html.
   =========================================================================== */

.shell-menu-checkbox {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell-hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  border-radius: var(--radio-md);
  user-select: none;
}
.shell-hamburguesa:hover { background: var(--fondo); }

.shell-menu-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 40;
}

.shell-menu {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  max-width: 84vw;
  height: 100vh;
  background: var(--blanco);
  border-right: 1px solid var(--linea);
  overflow-y: auto;
  z-index: 41;
  transform: translateX(-100%);
  transition: transform var(--duracion-transicion) ease-out;
}

.shell-menu-checkbox:checked ~ .shell-menu-fondo { display: block; }
.shell-menu-checkbox:checked ~ .shell-menu { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.12); }

.shell-menu-marca {
  padding: 18px 20px;
  border-bottom: 1px solid var(--linea);
}
.shell-menu-marca a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--marca);
  text-decoration: none;
}
.shell-menu-icono { width: 24px; height: 24px; border-radius: 5px; }

.shell-menu-lista { list-style: none; padding: 10px 0 24px; }
.shell-menu-sublista { list-style: none; }

/* Ramas plegables (Fran, 26/08): checkbox oculto + flecha, sin JS. El
   nombre de la rama navega; la flecha pliega/despliega. La rama activa
   llega marcada (checked) del servidor y se ve desplegada. */
.shell-rama-check { display: none; }
.shell-rama-fila { display: flex; align-items: stretch; }
.shell-rama-fila .shell-menu-item { flex: 1; min-width: 0; }
.shell-rama-caret {
  flex: none;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta-suave);
  font-size: 13px;
  user-select: none;
  transition: transform .15s ease;
}
.shell-rama-caret:hover { background: var(--fondo); }
.shell-rama .shell-menu-sublista { display: none; }
.shell-rama-check:checked ~ .shell-menu-sublista { display: block; }
.shell-rama-check:checked ~ .shell-rama-fila .shell-rama-caret { transform: rotate(90deg); }

/* Observacion pequeña junto al nombre de una rama (p.ej. "en construccion") */
.shell-menu-nota {
  font-style: italic;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--tinta-suave);
}

.shell-menu-item,
.shell-menu-subitem {
  display: block;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--tinta);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.shell-menu-subitem { padding-left: 38px; font-size: 13.5px; color: var(--tinta-suave); }

.shell-menu-item:hover,
.shell-menu-subitem:hover { background: var(--fondo); }

.shell-menu-item-activo {
  color: var(--marca);
  border-left-color: var(--acento);
  background: var(--marca-fondo);
  font-weight: 650;
}

.shell-contenido { min-width: 0; }

/* Titulo de la pestaña activa en la barra del panel de Ventas (las
   pestañas en si pasaron al arbol del menu lateral, 26/08). */
.pestana-titulo-pagina {
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta);
  align-self: center;
  padding: 8px 0;
}

@media (min-width: 1024px) {
  body.tiene-shell { display: flex; align-items: stretch; min-height: 100vh; }

  .shell-hamburguesa { display: none; }
  .shell-menu-fondo { display: none !important; }

  .shell-menu {
    position: sticky;
    top: 0;
    left: auto;
    width: 240px;
    max-width: none;
    height: 100vh;
    flex-shrink: 0;
    transform: none;
    box-shadow: none !important;
  }

  .shell-contenido { flex: 1; min-width: 0; }
}

/* ---------- Administracion ---------- */
/* Reutiliza las variables de panel.css (--acero, --panel-*): estas reglas
   solo se aplican en paginas que cargan panel.css junto a este fichero
   (admin, como ventas), asi que --acero siempre esta definida donde importa.
   Diseño v1, fase D (20/08): colores/radios que coincidian exactamente con
   un token de tokens.css pasan a leer la variable -- --acero se deja tal
   cual, es la misma decision que en panel.css (ver su cabecera). */

.adm-form { max-width: 460px; }
.adm-form-ancho { max-width: 720px; }

.adm-campo { margin-bottom: 16px; }
.adm-campo-nota { font-weight: 400; color: var(--panel-tenue); }

/* Pestañas por panel (28/08): titulo de grupo y casillas sangradas bajo el
   -- ficha de usuario, bloque "Paneles y pestañas". */
.adm-grupo-titulo {
  font-weight: 600;
  color: var(--panel-tinta);
  margin: 14px 0 8px;
}
.adm-campo-sub { margin-left: 24px; margin-bottom: 10px; }

.adm-form select,
.adm-form input[type="text"],
.adm-form input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--panel-linea);
  border-radius: 7px;
  background: var(--blanco);
  color: var(--panel-tinta);
}

.adm-form select:focus,
.adm-form input:focus {
  outline: none;
  border-color: var(--acero);
  box-shadow: 0 0 0 3px rgba(29,78,124,.12);
}

.adm-ayuda {
  font-size: 12.5px;
  color: var(--panel-suave);
  background: #fafbfc;
  border-left: 2px solid var(--acero-linea);
  padding: 10px 12px;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  margin-bottom: 18px;
}

.adm-acciones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.adm-btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--acero);
  color: var(--blanco);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.adm-btn:hover { background: #17405f; }

.adm-form button[type="submit"] {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--acero);
  color: var(--blanco);
  cursor: pointer;
}
.adm-form button[type="submit"]:hover { background: #17405f; }

.adm-btn-secundario { background: var(--blanco); color: var(--panel-suave); border-color: var(--panel-linea); }
.adm-btn-secundario:hover { color: var(--panel-tinta); border-color: var(--panel-tenue); background: var(--blanco); }

.adm-btn-peligro { background: var(--blanco); color: var(--negativo); border-color: var(--negativo-linea); }
.adm-btn-peligro:hover { background: var(--negativo-luz); }

.adm-fila-inactiva { opacity: .55; }

.adm-volver {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 550;
  color: var(--panel-suave);
  text-decoration: none;
}
.adm-volver:hover { color: var(--acero); }

.adm-estado { display: inline-block; font-size: 11.5px; font-weight: 550; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.adm-estado-activo    { background: #e8f5ee; color: var(--positivo); border: 1px solid var(--positivo-linea); }
.adm-estado-baja      { background: #f2f4f6; color: var(--panel-suave); border: 1px solid var(--panel-linea); }
.adm-estado-bloqueado { background: var(--negativo-luz); color: var(--negativo); border: 1px solid var(--negativo-linea); }

/* Botones <button class="adm-btn"> fuera de un .adm-form (28/09/2026, avisos
   Telegram): heredaban el button[type="submit"] generico del login --
   naranja y a todo el ancho -- porque le gana en especificidad a .adm-btn.
   Mismo bug que los botones naranjas de descontaminacion (diseño v1). Arregla
   tambien REACTIVAR y DESBLOQUEAR de la ficha de usuario, que tenian lo mismo. */
.adm-acciones button.adm-btn {
  width: auto;
  margin-top: 0;
  padding: 9px 16px;
  font-size: 13.5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--acero);
  color: var(--blanco);
}
.adm-acciones button.adm-btn:hover { background: #17405f; }
.adm-acciones button.adm-btn-secundario { background: var(--blanco); color: var(--panel-suave); border-color: var(--panel-linea); }
.adm-acciones button.adm-btn-secundario:hover { color: var(--panel-tinta); border-color: var(--panel-tenue); background: var(--blanco); }
.adm-acciones button.adm-btn-peligro { background: var(--blanco); color: var(--negativo); border-color: var(--negativo-linea); }
.adm-acciones button.adm-btn-peligro:hover { background: var(--negativo-luz); }

/* Bloque al que se vuelve con #ancla (p.ej. #telegram tras pulsar un boton):
   que el titulo no quede tapado por la barra de pestañas pegajosa. */
.adm-ancla { scroll-margin-top: 110px; }

/* Lista corta de la ficha ("Ultimos avisos" de Telegram). */
.adm-lista { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--panel-suave); }

.adm-chip-excepcion {
  border-color: var(--acero-linea);
  background: var(--acero-fondo);
  color: var(--acero);
  font-weight: 650;
}

.adm-resultado-OK        { color: var(--positivo); font-weight: 600; }
.adm-resultado-FALLO     { color: var(--aviso); font-weight: 600; }
.adm-resultado-BLOQUEADO { color: var(--negativo); font-weight: 600; }

.adm-filtro { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.adm-filtro input[type="text"] {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--panel-linea);
  border-radius: var(--radio-sm);
}

/* ===========================================================================
   SELECTOR DE PERIODO (29/09/2026) -- componente comun de los filtros
   Desde/Hasta de toda la plataforma (DISENO.md 5.10, estaticos/periodo.js).
   Un desplegable azul (Hoy, Este mes, Mes pasado, Este semestre...) que
   rellena las fechas; "Personalizado" enseña las dos fechas de siempre.
   Los selectores llevan "form select.periodo-select" a proposito: tienen
   que ganar a los ".xxx-filtro select" de cada modulo, que se cargan
   despues de esta hoja.
   =========================================================================== */
[data-periodo-sitio][hidden], [data-periodo-personalizado][hidden], [data-periodo-ocultar][hidden] { display: none !important; }

.periodo-caja { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

form select.periodo-select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 200px;
  padding: 7px 38px 7px 12px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--tinta);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d4e7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
  border: 1.5px solid var(--acento);
  border-radius: 8px;
  cursor: pointer;
}
form select.periodo-select:hover { background-color: #f7fafd; }
.barra-rango select.periodo-select { min-height: 40px; }  /* barras de periodo de Ventas */
form select.periodo-select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(29, 78, 124, .15); }

.periodo-resumen {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  font-size: 12.5px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* Dentro de los filtros en columna (etiqueta arriba, campo abajo) de
   Informes, Agencia, Mecánicos y Devoluciones: el desplegable ocupa el
   ancho y el alto de sus campos, y las fechas del periodo van a la
   derecha de la etiqueta, para no descuadrar la fila de filtros. */
.inf-filtro .periodo-caja, .emb-filtro .periodo-caja, .mec-equipo-filtro .periodo-caja, .filtro .periodo-caja { display: block; }
form .inf-filtro select.periodo-select, form .emb-filtro select.periodo-select,
form .mec-equipo-filtro select.periodo-select, form .filtro select.periodo-select {
  width: 100%; min-width: 0;
}
form .inf-filtro select.periodo-select, form .emb-filtro select.periodo-select { min-height: var(--alto-campo, 46px); }
form .mec-equipo-filtro select.periodo-select { min-height: 44px; }  /* como los demas campos de Mecánicos */
/* en .filtro manda el alto de los campos de cada modulo (Agencia los tiene mas altos) */
form .filtro select.periodo-select { font-size: 16px; }
.inf-filtro .periodo-resumen, .emb-filtro .periodo-resumen, .mec-equipo-filtro .periodo-resumen, .filtro .periodo-resumen {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; font-size: 11.5px;
}

/* ==========================================================================
   Lado de la pieza y datos para ir a por ella (Fran, 07/10/2026). Comun a la
   Recogida de pedidos, la ficha del pedido, la ficha del mecanico y su lista
   (plantillas/_lado_pieza.html). Izquierda ROJO, derecha AZUL; ubicacion en
   morado, nº de pieza en amarillo, coche en verde (como con rotulador).
   ========================================================================== */
.lado-pieza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 2px; }
.lado-coche { flex: none; }
.lado-etiqueta { border-radius: 8px; padding: 2px 10px; font-size: 18px; font-weight: 800; border: 2px solid; }
.lado-sub { font-size: 14px; font-weight: 600; }
.lado-izq .lado-etiqueta { background: #FCEBEB; color: #791F1F; border-color: #E24B4A; }
.lado-izq .lado-sub { color: #791F1F; }
.lado-der .lado-etiqueta { background: #E6F1FB; color: #0C447C; border-color: #378ADD; }
/* Fran (07/10/2026): DERECHA va al lado derecho de la tarjeta, en espejo (texto · DERECHA ▶ · coche en el borde);
   IZQUIERDA se queda a la izquierda. Color + posicion: mas dificil confundirse. */
.lado-pieza.lado-der { flex-direction: row-reverse; }
/* Fran (08/10/2026): DERECHA / IZQUIERDA nunca se parten ni se salen. Si no cabe todo, "copiloto · trasera" baja a
   la linea de abajo en su mismo lado (en DERECHA, row-reverse lo deja a la derecha). Nunca se recorta. */
.lado-pieza { max-width: 100%; min-width: 0; }
.lado-etiqueta { white-space: nowrap; flex: none; }
.lado-sub { min-width: 0; overflow-wrap: anywhere; }
.lado-der .lado-sub { color: #0C447C; }
.lado-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 13px;
  font-weight: 800; vertical-align: 1px; border: 1.5px solid; }
.lado-chip.lado-izq { background: #FCEBEB; color: #791F1F; border-color: #E24B4A; }
.lado-chip.lado-der { background: #E6F1FB; color: #0C447C; border-color: #378ADD; }

.datos-pieza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
.dato { display: inline-flex; align-items: center; gap: 6px; }
.dato-etiqueta { font-size: 14px; font-weight: 600; color: #5a6675; }
.dato-marca { border-radius: 6px; padding: 1px 8px; font-weight: 800;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dato-desp { background: #ffe94a; color: #1f2a37; font-size: 24px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.dato-coche { background: #bff0ae; color: #1d4a0c; font-size: 19px; }
.dato-ubi { background: #ece4fb; color: #3c3489; font-size: 17px; line-height: 1.7; }
.dato-extra { font-size: 14px; color: #5a6675; }