/* Tokens de diseño — paleta Ecumotorstock (los colores de marca viven aquí) */
:root {
  --color-primario: #E88813;
  --color-primario-hover: #EA942B;
  --color-enlace: #0E79B2;
  --color-texto: #1D1D1D;
  --color-texto-suave: #6B6B6B;
  --color-fondo: #FFFFFF;
  --color-fondo-suave: #F6F7F8;
  --color-borde: #E4E6E8;
  --color-error-fondo: #FDECEA;
  --color-error-texto: #B3261E;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo-suave);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--color-enlace); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }

/* --- Botones ---------------------------------------------------------- */
.boton {
  display: inline-block;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: var(--radio);
  padding: .65rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.boton:hover { background: var(--color-primario-hover); text-decoration: none; }
.boton-bloque { display: block; width: 100%; }
.boton-secundario {
  background: none;
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
  font-weight: 500;
}
.boton-secundario:hover { background: var(--color-fondo-suave); }

/* --- Formularios ------------------------------------------------------- */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .3rem; }
.campo input, .campo select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 1rem;
  background: #fff;
  color: var(--color-texto);
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--color-primario);
  outline-offset: 0;
  border-color: var(--color-primario);
}
.campo .nota { color: var(--color-texto-suave); font-size: .85rem; margin-top: .25rem; }
.campo-checkbox { display: flex; gap: .55rem; align-items: flex-start; }
.campo-checkbox input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; }

.aviso-error {
  background: var(--color-error-fondo);
  color: var(--color-error-texto);
  border-radius: var(--radio);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
}

/* --- Páginas públicas (login / registro) -------------------------------- */
.pagina-publica {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.tarjeta-auth {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
}
.tarjeta-auth.ancha { max-width: 560px; }
.logo-auth { display: block; margin: 0 auto 1.25rem; max-width: 190px; height: auto; }
.pie-auth { text-align: center; margin-top: 1rem; color: var(--color-texto-suave); }

/* --- Zona privada -------------------------------------------------------- */
.cabecera {
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cabecera .logo { max-height: 44px; width: auto; display: block; }
.cabecera-derecha { display: flex; align-items: center; gap: 1rem; }
.saldo-creditos {
  background: var(--color-primario);
  color: #fff;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-weight: 700;
  white-space: nowrap;
}
.cabecera .nombre-usuario { color: var(--color-texto-suave); }
.form-salir { margin: 0; }
.form-salir button {
  background: none; border: none; color: var(--color-enlace);
  cursor: pointer; font-size: 1rem; padding: 0;
}
.form-salir button:hover { text-decoration: underline; }

.disposicion { display: flex; min-height: calc(100vh - 61px); }

.menu-lateral {
  width: 220px;
  flex: none;
  background: var(--color-fondo);
  border-right: 1px solid var(--color-borde);
  padding: 1rem 0;
}
.menu-lateral a {
  display: block;
  padding: .65rem 1.25rem;
  color: var(--color-texto);
  font-weight: 500;
  border-left: 3px solid transparent;
}
.menu-lateral a:hover { background: var(--color-fondo-suave); text-decoration: none; }
.menu-lateral a.activo {
  border-left-color: var(--color-primario);
  color: var(--color-primario);
  background: var(--color-fondo-suave);
  font-weight: 700;
}

.contenido { flex: 1; padding: 1.5rem; max-width: 1000px; }

.tarjeta {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.tarjeta-accion { text-align: left; }
.tarjeta-accion .icono { font-size: 1.6rem; }
.tarjeta-accion h2 { margin-top: .4rem; }
.tarjeta-accion p { color: var(--color-texto-suave); margin: 0 0 .9rem; }

.etiqueta-proximamente {
  display: inline-block;
  background: var(--color-fondo-suave);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .8rem;
}

.lista-datos { margin: 0; }
.lista-datos dt { font-weight: 600; margin-top: .75rem; }
.lista-datos dd { margin: 0; color: var(--color-texto-suave); }

.texto-legal { white-space: pre-wrap; }
.caja-scroll {
  max-height: 45vh;
  overflow-y: auto;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
  padding: 1rem 1.25rem;
}
.boton-grande { font-size: 1.1rem; padding: .85rem 1.5rem; }

/* --- Avisos e insignias de estado ---------------------------------------- */
.aviso-ok {
  background: #EAF5EB;
  color: #2E7D32;
  border-radius: var(--radio);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
}

.insignia {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  vertical-align: middle;
}
.insignia-recibido   { background: #E8F1F7; color: #0E79B2; }
.insignia-en_proceso { background: #FDF3E4; color: #B36A00; }
.insignia-listo      { background: #EAF5EB; color: #2E7D32; }
.insignia-entregado  { background: #EFEFEF; color: #6B6B6B; }
.insignia-incidencia { background: #FDECEA; color: #B3261E; }

/* --- Tablas ---------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; }
.tabla th, .tabla td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}
.tabla th { color: var(--color-texto-suave); font-size: .85rem; }
.tabla tr:hover td { background: var(--color-fondo-suave); }
.fila-incidencia td { background: #FDECEA; }
.fila-incidencia:hover td { background: #FBDDD9; }
.fila-antigua td { background: #FDF3E4; }
.fila-antigua:hover td { background: #FAEACC; }

/* --- Formularios compuestos ------------------------------------------------ */
.rejilla-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.25rem;
}
.fila-acciones {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
.fila-acciones input[type="file"],
.fila-acciones input:not([type]) {
  padding: .5rem .7rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: .95rem;
}

.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li {
  padding: .45rem 0;
  border-bottom: 1px dashed var(--color-borde);
}
.linea-tiempo li:last-child { border-bottom: none; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .disposicion { flex-direction: column; }
  .menu-lateral {
    width: 100%;
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-borde);
    padding: 0;
  }
  .menu-lateral a {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .menu-lateral a.activo { border-bottom-color: var(--color-primario); }
  .cabecera .nombre-usuario { display: none; }
  .contenido { padding: 1rem; }
}