/* Estilos compartidos por todas las páginas de El Máquina */
:root {
  --fondo: #EEF0F3;
  --tarjeta: #FFFFFF;
  --tinta: #1C2430;
  --tenue: #5A6573;
  --linea: #D5DAE1;
  --azul: #1E4E8C;
  --verde: #2E8B57;
  --ambar: #E0A100;
  --rojo: #C8372D;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
a { color: inherit; }

/* Encabezado con la franja de semáforo */
.encabezado {
  background: var(--azul);
  color: #fff;
  padding: 1.25rem 1.5rem;
  border-bottom: 6px solid;
  border-image: linear-gradient(90deg, var(--verde) 0 33.3%, var(--ambar) 33.3% 66.6%, var(--rojo) 66.6%) 1;
}
.encabezado .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.marca span { font-weight: 400; opacity: 0.8; font-size: 1rem; margin-left: 0.5rem; }
.sucursal { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 0.4rem 0.6rem; font: inherit; }
.sucursal option { color: var(--tinta); }

.contenedor { max-width: 1100px; margin: 0 auto; }
main.contenedor { padding: 2rem 1.5rem 3rem; }

.saludo { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 600; }

/* Menú principal: cuadrícula de módulos */
.menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.modulo {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px;
  padding: 1.25rem; text-decoration: none; height: 100%;
}
.modulo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.icono { font-size: 1.8rem; line-height: 1; }
.modulo h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.modulo p { margin: 0; color: var(--tenue); font-size: 0.9rem; }

/* El panel de taller es el módulo principal: ocupa más espacio */
.modulo.destacado { border-left: 6px solid var(--azul); }
@media (min-width: 820px) { .menu li:first-child { grid-column: span 2; } }

/* Páginas de módulo */
.volver {                                  /* flecha para regresar al menú */
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  margin-bottom: 1rem; border-radius: 50%; color: var(--azul); background: #fff; border: 1.5px solid var(--azul);
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.volver:hover { background: var(--azul); color: #fff; }
.volver:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.aviso { background: var(--tarjeta); border: 1px dashed var(--linea); border-radius: 10px; padding: 2rem; color: var(--tenue); }

/* ---------- Formularios (Ingresar mercancía) ---------- */
.dos_columnas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .dos_columnas { grid-template-columns: 1fr; } }

.formulario { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 1.5rem; }
fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.75rem; }

.campo { display: block; font-size: 0.9rem; color: var(--tenue); margin-bottom: 0.9rem; }
.campo input, .campo select {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem;
  font: inherit; color: var(--tinta); background: #fff;
  border: 1px solid var(--linea); border-radius: 6px;
}
.campo input:focus-visible, .campo select:focus-visible, .boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }

.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .rejilla, .rejilla.tres { grid-template-columns: 1fr; } }

/* Botones grandes para elegir la categoría */
.categorias { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.categorias label { cursor: pointer; }
.categorias input { position: absolute; opacity: 0; pointer-events: none; }
.categorias span { display: block; padding: 0.6rem 1rem; border: 2px solid var(--linea); border-radius: 8px; background: #fff; font-weight: 600; }
.categorias input:checked + span { border-color: var(--azul); background: #E6EEF8; color: var(--azul); }
.categorias input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }

.nuevo { background: #F6F8FB; border: 1px dashed var(--azul); border-radius: 8px; padding: 1rem 1rem 0.25rem; }
.nuevo legend { float: left; width: 100%; margin-bottom: 0.25rem; }
.ayuda { clear: both; margin: 0 0 1rem; font-size: 0.85rem; color: var(--tenue); }

.boton { background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 0.8rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer; }
.boton:hover { background: #173E70; }
.error { color: var(--rojo); font-weight: 600; margin: 0 0 1rem; }

/* Lista de últimas entradas */
.subtitulo { font-size: 1.1rem; margin: 0 0 0.75rem; }
.ultimas { list-style: none; margin: 0; padding: 0; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; }
.ultimas:empty { display: none; }
.ultimas li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linea); }
.ultimas li:last-child { border-bottom: 0; }
.ultimas span { display: block; }
.tenue { color: var(--tenue); font-size: 0.85rem; }
.derecha { text-align: right; white-space: nowrap; }
.derecha strong { color: var(--verde); }

/* Mensaje de confirmación */
.mensaje {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 0.7rem 1.1rem; border-radius: 8px;
  max-width: calc(100% - 2rem); opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.mensaje.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mensaje { transition: none; } }

/* ---------- Editar / eliminar entradas ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.boton_secundario { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.boton_secundario:hover { background: var(--fondo); }
.boton_peligro { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); }
.boton_peligro:hover { background: #FBEAE8; }

.formulario.editando { border: 2px solid var(--azul); }

.ultimas button.entrada {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 0.8rem 1rem; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.ultimas li { padding: 0; }
.ultimas button.entrada:hover { background: #F6F8FB; }
.ultimas button.entrada:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.ultimas li.seleccionada button.entrada { background: #E6EEF8; box-shadow: inset 5px 0 0 var(--azul); }

/* ---------- Alerta baja de insumos ---------- */
.alerta_insumos {
  margin-top: 1.25rem;
  background: #FBEAE8;
  border: 2px solid var(--rojo);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  color: #7A1F18;
  width: calc(100% - 3rem);
}
.alerta_insumos h2 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--rojo); }
.alerta_insumos ul { margin: 0; padding-left: 1.2rem; }
.alerta_insumos li { margin: 0.15rem 0; }
@media (max-width: 520px) { .alerta_insumos { width: calc(100% - 2rem); } }

/* ---------- Órdenes de servicio ---------- */
.barra_titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.barra_titulo h1 { margin: 0; }

.formulario.orden { max-width: 900px; margin-bottom: 2rem; }
.formulario.orden fieldset { border-top: 1px solid var(--linea); padding-top: 1rem; }
.formulario.orden fieldset:first-of-type { border-top: 0; padding-top: 0; }
.campo textarea {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem;
  font: inherit; color: var(--tinta); background: #fff; line-height: 1.5;
  border: 1px solid var(--linea); border-radius: 6px; resize: vertical;
}
.campo textarea:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.mayusculas { text-transform: uppercase; }

/* Barra de gasolina en 5 secciones: se llena hasta la elegida */
.gasolina { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 0.3rem; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
.gasolina label { cursor: pointer; }
.gasolina input { position: absolute; opacity: 0; pointer-events: none; }
.gasolina span {
  display: block; padding: 0.6rem 0.2rem; text-align: center; font-size: 0.85rem; font-weight: 600;
  color: var(--tenue); background: #fff; border-left: 1px solid var(--linea);
}
.gasolina label:first-child span { border-left: 0; }
/* Todas las secciones hasta la elegida se pintan */
.gasolina:has(input[value="1"]:checked) label:nth-child(-n+1) span,
.gasolina:has(input[value="2"]:checked) label:nth-child(-n+2) span,
.gasolina:has(input[value="3"]:checked) label:nth-child(-n+3) span,
.gasolina:has(input[value="4"]:checked) label:nth-child(-n+4) span,
.gasolina:has(input[value="5"]:checked) label:nth-child(-n+5) span { background: var(--verde); color: #fff; }
.gasolina:has(input[value="1"]:checked) label:first-child span { background: var(--rojo); }
.gasolina:has(input[value="2"]:checked) label:nth-child(-n+2) span { background: var(--ambar); color: var(--tinta); }
.gasolina input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: -3px; }

/* Insumos */
.insumos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 700px) { .insumos { grid-template-columns: 1fr; } }
.insumo { display: grid; grid-template-columns: 1fr 5.5rem; gap: 0 0.5rem; align-items: start; }
.insumo .campo { margin-bottom: 0.4rem; }
.insumo .sin_existencia { grid-column: 1 / -1; margin: 0 0 0.8rem; }
.campo input:disabled { background: var(--fondo); color: var(--tenue); }

/* Lista de órdenes */
.lista_ordenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lista_ordenes details { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; }
.lista_ordenes details[open] { border-top-color: var(--azul); border-right-color: var(--azul); border-bottom-color: var(--azul); }
.lista_ordenes summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
}
.lista_ordenes summary::-webkit-details-marker { display: none; }
.lista_ordenes summary:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; border-radius: 10px; }
.folio { font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.resumen_orden span { display: block; }
@media (max-width: 600px) {
  .lista_ordenes summary { grid-template-columns: 1fr auto; }
  .folio { grid-column: 1 / -1; }
}

/* Colores de estatus */
.estatus { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.estatus_sin_ingreso { background: #F5C518; color: #3D3000; }   /* amarillo */
.estatus_en_rampa    { background: #F07F13; color: #fff; }      /* naranja */
.estatus_terminado   { background: #2E8B57; color: #fff; }      /* verde */
.estatus_listo       { background: #0E7C86; color: #fff; }      /* turquesa */
.estatus_revision    { background: #1E4E8C; color: #fff; }      /* azul */
.estatus_reparacion  { background: #B4235A; color: #fff; }      /* frambuesa */
.estatus_garantia    { background: #7B3FA0; color: #fff; }      /* morado */

/* La tarjeta lleva una franja del color de su estatus */
.lista_ordenes li > details { border-left-width: 6px; }
.orden_sin_ingreso > details { border-left-color: #F5C518; }
.orden_en_rampa > details    { border-left-color: #F07F13; }
.orden_terminado > details   { border-left-color: #2E8B57; }
.orden_listo > details       { border-left-color: #0E7C86; }
.orden_revision > details    { border-left-color: #1E4E8C; }
.orden_reparacion > details  { border-left-color: #B4235A; }
.orden_garantia > details    { border-left-color: #7B3FA0; }

.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0; margin: 0 0 1rem; font-size: 0.85rem; color: var(--tenue); }
.leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.punto { width: 0.8rem; height: 0.8rem; border-radius: 50%; display: inline-block; }

.tiempo_rampa { display: block; margin-top: 0.2rem; font-size: 0.85rem; font-weight: 700; color: #B35A00; }

.detalle_orden { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--linea); }
.detalle_orden h3 { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.detalle_orden p { margin: 0; }
.texto_largo { white-space: pre-wrap; max-width: 75ch; }
.datos_orden { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem 1rem; margin: 1rem 0 0; }
.datos_orden dt { font-size: 0.8rem; color: var(--tenue); }
.datos_orden dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acciones_orden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin-top: 1rem; }
.acciones_orden .cambiar_estatus { margin: 0; min-width: 220px; }
a.boton { display: inline-block; text-decoration: none; }
.boton_terminado { background: var(--verde); }
.boton_terminado:hover { background: #237046; }

/* Campos bloqueados (fecha y hora) */
.campo input.bloqueado { background: var(--fondo); color: var(--tinta); font-weight: 700; cursor: not-allowed; border-style: dashed; }

/* Filas de refacciones */
.refacciones { display: grid; gap: 0; max-width: 760px; }
.insumo.refaccion { grid-template-columns: minmax(0, 1fr) 5.5rem 7.5rem 2.6rem; }
@media (max-width: 560px) {
  .insumo.refaccion { grid-template-columns: 1fr 1fr 2.6rem; }
  .insumo.refaccion > .campo:first-child { grid-column: 1 / -1; }
}
.quitar_refaccion {
  align-self: end; margin-bottom: 0.4rem; height: 2.6rem; border: 1px solid var(--linea); border-radius: 6px;
  background: #fff; color: var(--rojo); font-size: 1.4rem; cursor: pointer;
}
.quitar_refaccion:hover { background: #FBEAE8; }
#boton_refaccion { margin-top: 0.3rem; }

/* Botón X para cerrar la alerta (menú principal) */
.alerta_insumos { position: relative; }
.cerrar_alerta {
  position: absolute; top: 0.5rem; right: 0.6rem;
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--rojo); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.cerrar_alerta:hover { background: rgba(200, 55, 45, 0.12); }
.cerrar_alerta:focus-visible { outline: 3px solid var(--rojo); outline-offset: 1px; }

/* ---------- Ventas de mostrador ---------- */
.formulario.venta { max-width: 900px; margin-bottom: 1.5rem; padding-bottom: 0.6rem; }
.fila_venta { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr) minmax(0, 1fr) auto; gap: 0 0.8rem; align-items: end; }
.fila_venta .boton { margin-bottom: 0.9rem; height: 2.75rem; padding-top: 0; padding-bottom: 0; }
@media (max-width: 620px) {
  .fila_venta { grid-template-columns: 1fr 1fr; }
  .fila_venta .producto_venta, .fila_venta .boton { grid-column: 1 / -1; }
}

.tabla_contenedor { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; max-width: 900px; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla thead th { font-size: 0.85rem; color: var(--tenue); background: #F6F8FB; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .numero { text-align: right; white-space: nowrap; }
.tabla .fecha_venta { white-space: nowrap; color: var(--tenue); }
.tabla tfoot th, .tabla tfoot td { border-top: 2px solid var(--linea); border-bottom: 0; font-weight: 800; }
.tabla tfoot th { text-align: right; }

/* ---------- Costo de la orden: Servicio + Refacciones = Costo total ---------- */
.totales {
  display: grid; grid-template-columns: auto 11rem; gap: 0.55rem 0; align-items: center;
  max-width: 24rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0;
}
.totales > :nth-child(even), .totales dd { text-align: right; margin: 0; }
.totales output { padding-right: 0.7rem; }
.totales .total_final { font-size: 1.2rem; font-weight: 800; }
.totales span.total_final, .totales dt.total_final { border-top: 2px solid var(--tinta); padding-top: 0.55rem; }
.totales output.total_final, .totales dd.total_final { border-top: 2px solid var(--tinta); padding-top: 0.55rem; }
.monto_editable { display: flex; align-items: center; gap: 0.35rem; }
.monto_editable input {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit; font-weight: 700; text-align: right;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff; color: var(--tinta);
}
.monto_editable input:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.totales_tarjeta { margin-top: 1rem; grid-template-columns: auto 9rem; }
.totales_tarjeta dt { font-weight: 700; }
.totales > :nth-child(odd), .totales dt { padding-right: 1.5rem; }

/* ---------- Existencias (Inventario) ---------- */
.existencias { margin-top: 2.5rem; }
.existencias .tabla_contenedor { max-width: none; }
.existencia_baja td { background: #FBEAE8; }
.existencia_baja td:last-child strong { color: var(--rojo); }

/* "Hay X" en la lista de últimas entradas */
.derecha .hay { display: block; margin-top: 0.15rem; font-size: 0.85rem; font-weight: 700; color: var(--tinta); }
.derecha .hay_baja { color: var(--rojo); }

/* ---------- Botones del menú principal: al pasar el cursor se llenan de azul ---------- */
.menu .modulo {
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.menu .modulo p { transition: color 0.18s ease; }
.menu .modulo:hover,
.menu .modulo:focus-visible {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(30, 78, 140, 0.28);
}
.menu .modulo:hover p,
.menu .modulo:focus-visible p { color: rgba(255, 255, 255, 0.88); }
.menu .modulo.destacado:hover,
.menu .modulo.destacado:focus-visible { border-left-color: #173E70; }
.menu .modulo:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .menu .modulo, .menu .modulo p { transition: none; }
  .menu .modulo:hover, .menu .modulo:focus-visible, .menu .modulo:active { transform: none; }
}

/* ---------- Fondo del menú principal: foto del taller, suave ---------- */
body.inicio { position: relative; min-height: 100vh; }
body.inicio::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("fondo_menu.jpg") center 35% / cover no-repeat;
  opacity: 0.18;          /* qué tanto se ve la foto: 0 = nada, 1 = completa */
  filter: grayscale(35%);
}
body.inicio { background: var(--fondo); isolation: isolate; }

/* ---------- Reportes: pestañas tipo carpeta ---------- */
.titulo_sucursal { font-size: 1.1rem; font-weight: 600; }
.carpetas {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: flex-end;
  margin-top: 1.25rem; padding-left: 0.5rem;
}
.carpetas [role="tab"] {
  font: inherit; font-weight: 700; color: var(--tenue); cursor: pointer;
  padding: 0.65rem 1.1rem 0.55rem; margin-bottom: -1px;
  background: #E1E6EC; border: 1px solid var(--linea); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.carpetas [role="tab"]:hover { background: #EEF2F7; color: var(--tinta); }
.carpetas [role="tab"][aria-selected="true"] {
  position: relative; z-index: 1;
  background: var(--tarjeta); color: var(--azul);
  padding-top: 0.85rem;                         /* la pestaña activa sobresale, como carpeta */
  border-color: var(--linea);
  box-shadow: inset 0 3px 0 var(--azul);
}
.carpetas [role="tab"]:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.carpeta_panel {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 0 12px 12px 12px;
  padding: 1.5rem; margin-bottom: 2rem;
}
.carpeta_panel:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (max-width: 700px) {
  .carpetas { padding-left: 0; }
  .carpetas [role="tab"] { flex: 1 1 30%; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.9rem; }
  .carpeta_panel { border-radius: 0 0 12px 12px; padding: 1rem; }
}

.filtro_periodo { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.filtro_grupo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; }
.filtro_grupo .campo { margin: 0; min-width: 11rem; }
#filtro_semana { align-items: center; }
#filtro_semana .boton { padding: 0.5rem 0.9rem; }
#filtro_semana .boton:disabled { opacity: 0.45; cursor: not-allowed; }

.resumen_reporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.dato_reporte { background: var(--fondo); border-radius: 8px; padding: 0.8rem 1rem; }
.dato_reporte span { display: block; font-size: 0.85rem; color: var(--tenue); }
.dato_reporte strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dato_reporte.destacado { background: var(--azul); color: #fff; }
.dato_reporte.destacado span { color: rgba(255, 255, 255, 0.85); }

.carpeta_panel .subtitulo { margin-top: 1.5rem; }
.carpeta_panel .tabla_contenedor { max-width: none; }
.carpeta_panel .tabla td .estatus { font-size: 0.75rem; }
.nota_reporte { margin: -0.5rem 0 0; }
.aviso_chats h2 { margin-top: 0; color: var(--tinta); }
/* Lo que está oculto siempre se oculta, aunque tenga display propio */
[hidden] { display: none !important; }
.carpeta_panel .tabla td:first-child { white-space: nowrap; }

/* ---------- Pago de la orden ---------- */
.estado_pago { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1.2rem; }
.etiqueta_pago { font-weight: 800; }
.casilla_pago { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 700; }
.casilla_pago input {                      /* se ve como casilla cuadrada */
  appearance: none; width: 1.4rem; height: 1.4rem; margin: 0;
  border: 2px solid var(--tenue); border-radius: 4px; background: #fff; display: grid; place-content: center; cursor: pointer;
}
.casilla_pago input::after { content: "✓"; font-size: 1rem; font-weight: 900; color: #fff; transform: scale(0); }
.casilla_pago input:checked { background: var(--azul); border-color: var(--azul); }
.casilla_pago input:checked::after { transform: scale(1); }
.casilla_pago input[value="si"]:checked { background: var(--verde); border-color: var(--verde); }
.casilla_pago input[value="no"]:checked { background: var(--ambar); border-color: var(--ambar); }
.casilla_pago input:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.chips_orden { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.pago { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1.5px solid; }
.pago_si { color: #1E6B41; border-color: #2E8B57; background: #E3F4EA; }
.pago_no { color: #7A5A00; border-color: #E0A100; background: #FFF4D6; }
.totales_tarjeta dd .pago { font-size: 0.8rem; }

.tiempo_seccion { display: block; margin-top: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--azul); }
.orden_garantia .tiempo_seccion { color: #7B3FA0; }
.tiempo_seccion.cerrada { color: #1E6B41; }
.historial_orden { margin: 0; padding-left: 1.2rem; }
.historial_orden li { margin: 0.15rem 0; }

/* Ventana flotante: ¿ya está pagado? */
.ventana_pago {
  border: 0; border-radius: 12px; padding: 1.5rem; max-width: min(440px, calc(100% - 2rem));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); color: var(--tinta);
}
.ventana_pago::backdrop { background: rgba(28, 36, 48, 0.55); }
.ventana_pago h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.ventana_pago p { margin: 0 0 0.8rem; }
.ventana_pago .acciones { margin-top: 1.2rem; }

/* Buscador de órdenes */
.buscador { max-width: 460px; margin-bottom: 0.8rem; }
.buscador input { padding-left: 2.2rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6573' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 0.7rem center no-repeat; }
#resultado_busqueda { margin: -0.3rem 0 0.8rem; }

/* ---------- Corte diario ---------- */
.encabezado_corte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.encabezado_corte h2 { margin: 0; font-size: 1.3rem; }
.chip_hoy { background: var(--verde); color: #fff; font-weight: 800; font-size: 0.85rem; padding: 0.25rem 0.8rem; border-radius: 999px; }
.aviso_corte { background: #FFF4D6; border: 1px solid var(--ambar); color: #5E4600; border-radius: 8px; padding: 0.6rem 0.9rem; margin: 0.8rem 0 0; }
.bloque_corte { margin-top: 1.6rem; }
.bloque_corte h3 { margin: 0 0 0.7rem; font-size: 1.05rem; }
.fila_gasto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 0.8rem; align-items: end; max-width: 720px; }
.fila_gasto .boton { margin-bottom: 0.9rem; height: 2.75rem; padding-top: 0; padding-bottom: 0; }
@media (max-width: 560px) { .fila_gasto { grid-template-columns: 1fr 1fr; } .fila_gasto .campo:first-child, .fila_gasto .boton { grid-column: 1 / -1; } }
.quitar_gasto { border: 1px solid var(--linea); background: #fff; color: var(--rojo); border-radius: 6px; width: 2rem; height: 2rem; font-size: 1.2rem; cursor: pointer; }
.quitar_gasto:hover { background: #FBEAE8; }
.corte_final { background: var(--fondo); border-radius: 10px; padding: 1.1rem 1.2rem; max-width: 30rem; }
.totales_corte { max-width: none; grid-template-columns: auto 12rem; }
.totales_corte .total_final { font-size: 1.5rem; }
.totales_corte dd.negativo { color: var(--rojo); }
.boton_chico { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.tabla_historial .fila_actual td { background: #E6EEF8; }
.solo_lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mecánico ---------- */
.mecanico_orden { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--tinta); }
.mecanico_orden em { color: var(--rojo); font-style: normal; font-weight: 700; }
.ventana_mecanico form { margin: 0; }
.ventana_mecanico .campo { margin-bottom: 0.6rem; }
.mecanicos_rapidos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }

/* Elegir el día del corte */
.elegir_dia_corte { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; }
.elegir_dia_corte .campo { margin: 0; }
.elegir_dia_corte .chip_hoy { margin-bottom: 0.65rem; }
.aviso_corte { background: #E6EEF8; border-color: var(--azul); color: var(--tinta); }

/* ---------- Método de pago ---------- */
.metodo_pago { margin-top: 0.9rem; padding: 0.9rem 1rem; background: var(--fondo); border-radius: 8px; max-width: 34rem; }
.opciones_metodo { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.5rem; }
.montos_combinado { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; margin-top: 0.8rem; }
.montos_combinado .campo { margin-bottom: 0.3rem; }
.suma_combinado { grid-column: 1 / -1; margin: 0; font-weight: 700; color: #8a6116; }
.suma_combinado.suma_ok { color: #1E6B41; }
.ventana_pago .metodo_pago { background: #F6F8FB; }
.paso_metodo .error { margin: 0.6rem 0 0; }

/* ---------- Corte: efectivo y tarjeta ---------- */
.subtitulo_cobros { margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.cortes_finales { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 760px) { .cortes_finales { grid-template-columns: 1fr; } }
.corte_final { max-width: none; }
.corte_final h4 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.totales_corte { grid-template-columns: auto 9rem; }
.totales_corte dt .tenue { font-weight: 400; font-size: 0.8rem; }
.corte_tarjeta .totales_corte .total_final { font-size: 1.3rem; }
.totales_resumen { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--linea); font-size: 0.95rem; }
.ajustar_saldo { margin-top: 1rem; font-size: 0.9rem; }
.ajustar_saldo summary { cursor: pointer; color: var(--azul); font-weight: 700; }
.ajustar_saldo p { margin: 0.5rem 0; }
.fila_saldo { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.fila_saldo input { width: 9rem; padding: 0.4rem 0.6rem; font: inherit; border: 1px solid var(--linea); border-radius: 6px; }
.corte_tarjeta .totales_corte .total_final { border-top: 0; padding-top: 0; }
.corte_tarjeta .totales_corte { grid-template-columns: auto 8rem; }

/* Existencias separadas: insumos y refacciones */
.subtitulo_existencias { font-size: 1rem; margin: 1.4rem 0 0.6rem; }
.refaccion_agotada td { color: var(--tenue); }
.chip_agotada { background: #EEF0F3; color: var(--tenue); border: 1px solid var(--linea); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 700; }
.fila_editando td { background: #E6EEF8; }

/* Lista de insumos: solo la cantidad que hay */
.derecha .hay_grande { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.derecha .hay_grande.hay_baja { color: var(--rojo); }
.categorias input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.categorias input:disabled:checked + span { opacity: 1; }
.campo input[readonly] { background: var(--fondo); }

/* ---------- A cuenta ---------- */
.pago_cuenta { color: #1F4F8A; border-color: #3A78C2; background: #E6EEF8; }
.casilla_pago input[value="a_cuenta"]:checked { background: var(--azul); border-color: var(--azul); }
.lista_pagos { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; text-align: right; }
.lista_pagos li + li { margin-top: 0.2rem; }
.monto_a_cuenta, .fecha_pago { margin: 0.8rem 0 0; max-width: 16rem; }
.metodo_pago .suma_combinado { margin-top: 0.5rem; }
.resumen_saldo { max-width: 26rem; margin: 0 0 0.8rem; }
.resumen_saldo dt.tenue { font-weight: 400; font-size: 0.82rem; grid-column: 1 / -1; }
.pagos_registrados { margin-top: 1rem; padding: 0.8rem 1rem; border: 1.5px solid var(--borde, #d5dbe3); border-radius: 8px; max-width: 34rem; }
.pagos_registrados h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.pagos_registrados ul { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.pagos_registrados li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid #e8ecf1; }
.pagos_registrados .resta { font-weight: 800; margin: 0.3rem 0 0; }

/* ---------- Respaldo ---------- */
.bloque_respaldo { margin-top: 1.5rem; max-width: 900px; }
.fila_carpeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.8rem; align-items: end; }
@media (max-width: 600px) { .fila_carpeta { grid-template-columns: 1fr; } }
.dato_reporte.bien { background: #E3F4EA; }
.dato_reporte.mal { background: #FDE8E6; }
.aviso_respaldo { border-radius: 8px; padding: 0.7rem 1rem; margin: 0 0 0.8rem; max-width: 900px; }
.aviso_respaldo.malo { background: #FDE8E6; border: 1px solid var(--rojo); color: #6E1A13; }
.resultado_respaldo { font-weight: 700; padding: 0.6rem 0.9rem; border-radius: 8px; }
.resultado_respaldo.bien { background: #E3F4EA; color: #1E6B41; }
.resultado_respaldo.mal { background: #FDE8E6; color: #6E1A13; }
.pasos_restaurar { margin: 0 0 1rem; padding-left: 1.2rem; }
code { background: #EEF0F3; padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.9em; word-break: break-all; }

/* ---------- CRM ---------- */
.sesion_crm { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.usuario_crm { font-weight: 600; }
.boton_salir { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 6px; padding: 0.4rem 0.8rem; font: inherit; cursor: pointer; }
.boton_salir:hover { background: rgba(255,255,255,0.15); }
.aviso_prueba { background: #FFF4D6; border: 2px dashed var(--ambar); color: #5E4600; font-weight: 700; border-radius: 8px; padding: 0.6rem 1rem; }
.acceso { max-width: 26rem; }

.clase { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; border: 1.5px solid; }
.clase_nuevo { color: #3B4552; border-color: #8995A3; background: #EEF0F3; }
.clase_frio { color: #1F4F8A; border-color: #3A78C2; background: #E6EEF8; }
.clase_tibio { color: #7A5A00; border-color: #E0A100; background: #FFF4D6; }
.clase_caliente { color: #8A2A0A; border-color: #E0601F; background: #FDEBDD; }
.clase_cliente { color: #1E6B41; border-color: #2E8B57; background: #E3F4EA; }
.clase_descartado { color: #5A6573; border-color: #B6BEC8; background: #fff; }
.clase_perdido { color: #5A6573; border-color: #B6BEC8; background: #fff; text-decoration: line-through; }
.clase_no_contactar { color: #fff; border-color: #1C2430; background: #1C2430; }

.embudo { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.4rem; max-width: 760px; }
.embudo a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; gap: 0.8rem; align-items: center; text-decoration: none; padding: 0.3rem 0.4rem; border-radius: 8px; }
.embudo a:hover { background: var(--fondo); }
.embudo strong { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.embudo_barra { display: block; height: 1.1rem; background: var(--fondo); border-radius: 4px; overflow: hidden; }
.embudo_barra span { display: block; height: 100%; border-radius: 4px; }
.barra_nuevo { background: #8995A3; } .barra_frio { background: #3A78C2; } .barra_tibio { background: #E0A100; }
.barra_caliente { background: #E0601F; } .barra_cliente { background: var(--verde); }
.fuera_embudo a { color: var(--tenue); }
.tablero_columnas { margin-top: 1rem; }
.dato_reporte small { font-size: 0.85rem; font-weight: 600; opacity: 0.8; }

.filtros_leads { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; }
.filtros_leads .campo { margin-bottom: 0.4rem; min-width: 11rem; }
.filtros_leads .buscador { flex: 1 1 16rem; max-width: 26rem; }
.filtros_leads .boton { margin-bottom: 0.4rem; text-decoration: none; }
.tabla_leads { max-width: none; }
.fila_click { cursor: pointer; }
.fila_click:hover td { background: #F6F8FB; }
.fila_click:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.form_crm { max-width: 760px; }
.acciones a.boton { text-decoration: none; display: inline-block; }

.regresar_lista { display: inline-block; margin-bottom: 0.6rem; color: var(--azul); font-weight: 600; text-decoration: none; }
.cabeza_lead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cabeza_lead h2 { margin: 0; font-size: 1.4rem; }
.cabeza_lead p { margin: 0.2rem 0 0; }
.chips_lead { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tiempos_lead { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem 1rem; margin: 1rem 0 0.5rem; padding: 0.8rem 1rem; background: var(--fondo); border-radius: 8px; }
.tiempos_lead dt { font-size: 0.8rem; color: var(--tenue); }
.tiempos_lead dd { margin: 0; font-weight: 700; }
.detalle_lead { margin-top: 0.5rem; }
.bloque_lead { border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: 1rem; }
.bloque_lead h3 { margin: 0 0 0.7rem; font-size: 1.05rem; }
.casilla_simple { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.7rem; font-size: 0.92rem; cursor: pointer; }
.casilla_simple input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; }
.no_contactar { margin-top: 0.8rem; }
.aviso_no_contactar { background: #1C2430; color: #fff; border-radius: 8px; padding: 0.6rem 0.9rem; font-weight: 600; margin: 0; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.boton_peligro:disabled:hover { background: #fff; }
.lista_simple { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; }

.lista_citas { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.6rem; }
.lista_citas li { border: 1px solid var(--linea); border-radius: 8px; padding: 0.6rem 0.8rem; display: grid; gap: 0.15rem; }
.cita { margin-left: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.cita_agendada { background: #E6EEF8; color: var(--azul); }
.cita_asistio { background: #E3F4EA; color: #1E6B41; }
.cita_no_asistio { background: #FDE8E6; color: #6E1A13; }
.cita_cancelada { background: #EEF0F3; color: var(--tenue); }
.acciones_cita { margin-top: 0.4rem; }
.agendar summary { cursor: pointer; font-weight: 700; color: var(--azul); margin-bottom: 0.6rem; }
.agendar form { background: #F6F8FB; border: 1px solid var(--linea); border-radius: 8px; padding: 1rem; }
.eligio { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin-bottom: 0.6rem; }
.eligio legend { font-size: 0.9rem; color: var(--tenue); font-weight: 400; margin-bottom: 0.4rem; }
.eligio .otra_fecha { flex-basis: 100%; max-width: 18rem; }
.pregunta_fase6 { border-left: 4px solid var(--ambar); padding: 0.5rem 0 0.1rem 0.8rem; margin: 0.4rem 0 0.8rem; background: #FFFBEF; }

.linea_tiempo { list-style: none; margin: 0.8rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--linea); display: grid; gap: 0.7rem; }
.linea_tiempo li { display: grid; gap: 0.1rem; position: relative; font-size: 0.92rem; }
.linea_tiempo li::before { content: ""; position: absolute; left: -1.38rem; top: 0.35rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--linea); }
.linea_tiempo .toque_entrante::before { background: var(--verde); }
.linea_tiempo .toque_saliente::before { background: var(--azul); }
.toque_quien { font-weight: 700; }
tr.inactivo td { color: var(--tenue); }
.sucursales_usuario { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.sucursales_usuario legend { font-size: 0.9rem; color: var(--tenue); font-weight: 400; }
.sucursales_usuario p { flex-basis: 100%; margin: 0 0 0.8rem; }
@media (max-width: 600px) { .embudo a { grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem; gap: 0.5rem; } }
.dos_columnas > * { min-width: 0; }   /* las tablas hacen scroll dentro, no la página */
.campo_corto { max-width: 16rem; }

/* ---------- CRM: lista estilo Excel ---------- */
.tabla_excel { font-size: 0.88rem; }
.tabla_excel th, .tabla_excel td { padding: 0.45rem 0.55rem; vertical-align: top; }
.tabla_excel thead th { white-space: nowrap; position: sticky; top: 0; }
.tabla_excel select, .tabla_excel input[type="date"] {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.35rem; border: 1px solid var(--linea); border-radius: 6px; background: #fff; color: var(--tinta); max-width: 11rem;
}
.tabla_excel select:focus-visible, .tabla_excel input:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.tabla_excel .celda_texto { min-width: 9rem; max-width: 16rem; }
.tabla_excel .celda_fecha { white-space: nowrap; }
.tabla_excel .enlace_lead { color: var(--azul); font-weight: 700; white-space: nowrap; }
.tabla_excel select.valor_si { background: #E3F4EA; border-color: #2E8B57; }
.tabla_excel select.valor_no { background: #FDE8E6; border-color: #D9958F; }
.tabla_excel select.valor_pendiente { background: #FFF4D6; border-color: #E0A100; }
.tabla_excel select.valor_unidad_en_taller, .tabla_excel select.valor_cita_agendada { background: #E6EEF8; border-color: #3A78C2; }
.tabla_excel select.valor_sin_respuesta, .tabla_excel select.valor_no_confirma_cita { background: #FDEBDD; border-color: #E0601F; }
.tabla_excel input.falta { border-color: var(--rojo); box-shadow: 0 0 0 2px #FDE8E6; }
.tabla_excel tr.guardado td { background: #E3F4EA; transition: background 0.8s; }
.filtros_leads .boton_secundario { margin-bottom: 0.4rem; text-decoration: none; }
.mas_datos { margin: 0.2rem 0 1rem; }
.mas_datos summary { cursor: pointer; color: var(--azul); font-weight: 600; margin-bottom: 0.7rem; }
.nota_fecha_cita.obligatorio { color: var(--rojo); font-weight: 700; }
.clase_seguimiento { color: var(--azul); border-color: #9DB7DA; background: #fff; }
.lista_estatus { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; max-width: 22rem; }
.lista_estatus li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linea); padding: 0.25rem 0; }
.lista_estatus a { color: var(--tinta); }
.resumen_importar { margin-top: 1.5rem; }
.import_nuevo td:nth-child(2) { color: #1E6B41; }
.import_ya_existe td, .import_repetido td { color: var(--tenue); }
.import_error td:nth-child(2) { color: var(--rojo); }
.confirmar_importar { margin-top: 1rem; }
body.vista_ancha main.contenedor, body.vista_ancha .encabezado .contenedor { max-width: 1600px; }
.tabla_excel select { max-width: 9.5rem; }
.tabla_excel input[type="date"] { width: 9.2rem; }
.tabla_excel .celda_texto { min-width: 8rem; max-width: 13rem; }
.tabla_excel thead th { white-space: normal; font-size: 0.78rem; line-height: 1.25; }
.tabla_excel th, .tabla_excel td { padding: 0.4rem 0.4rem; }
.tabla_excel select { max-width: 8.6rem; padding: 0.25rem 0.2rem; }
.tabla_excel input[type="date"] { width: 8.6rem; padding: 0.25rem 0.2rem; }
.tabla_excel .celda_texto { min-width: 6.5rem; max-width: 11rem; }
.chips_fila { margin-top: 0.25rem; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tabla_excel select.sel_estatus_seguimiento { max-width: 11rem; }
.tabla_excel select.sel_clase { font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.3rem; max-width: 10rem; cursor: pointer; }
.leyenda_clases { margin: 0 0 0.8rem; font-size: 0.9rem; }
.leyenda_clases summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.leyenda_clases ul { list-style: none; margin: 0.6rem 0 0.3rem; padding: 0; display: grid; gap: 0.35rem; }
.leyenda_clases .clase { min-width: 6.5rem; text-align: center; margin-right: 0.4rem; }

/* ---------- Reportes: concentrado en Excel ---------- */
.boton_excel { background: var(--verde); }
.boton_excel:hover { background: #24704A; }
.ventana_excel { max-width: min(34rem, calc(100% - 2rem)); }
.atajos_periodo { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -0.3rem 0 1rem; }
.hojas_excel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-bottom: 0.6rem; }
.hojas_excel legend { font-size: 0.95rem; }
.estado_excel { margin: 0.4rem 0 0; }
.metodo_venta { margin-top: 0.4rem; }
.pie_metodo th, .pie_metodo td { font-weight: 600; font-size: 0.9rem; color: var(--tenue); border-top: 0; }

/* ---------- Órdenes: varios tipos del mismo insumo ---------- */
.grupo_insumo { display: flex; flex-direction: column; }
.insumo_extra { position: relative; }
.quitar_insumo { position: absolute; top: -0.1rem; right: 0; border: 1px solid var(--linea); background: #fff; color: var(--rojo); border-radius: 6px; width: 1.5rem; height: 1.5rem; line-height: 1; font-size: 1rem; cursor: pointer; padding: 0; }
.agregar_insumo { align-self: flex-start; margin: -0.3rem 0 0.9rem; background: none; border: 0; padding: 0.2rem 0; color: var(--azul); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.agregar_insumo:hover { text-decoration: underline; }

/* ---------- Reportes → Chats (reporte diario del CRM) ---------- */
.barra_excel_chats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 0.5rem; }
.boton_dia { min-width: 2.6rem; padding-left: 0.6rem; padding-right: 0.6rem; font-size: 1.2rem; line-height: 1; margin-bottom: 0.15rem; }
.reporte_chats_cuentas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
@media (max-width: 860px) { .reporte_chats_cuentas { grid-template-columns: 1fr; } }
.boton_imprimir { white-space: nowrap; }
.inspeccion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; margin-bottom: 0.6rem; }
@media (max-width: 760px) { .inspeccion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .inspeccion { grid-template-columns: 1fr; } }
.inspeccion .casilla_simple { margin-bottom: 0.5rem; }

/* ---------- Inicio de sesión ---------- */
.pagina_login { background: #000; min-height: 100vh; margin: 0; }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 40px; box-sizing: border-box; }
.login_logo { width: min(420px, 88vw); height: auto; display: block; margin-bottom: 8px; }
.login_caja { width: min(380px, 100%); background: #fff; border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); box-sizing: border-box; border-top: 5px solid #C62828; }
.login_caja h1 { margin: 0 0 14px; font-size: 1.35rem; }
.login_caja .boton { width: 100%; margin-top: 6px; }
.login_ayuda { color: #5A6573; font-size: 0.88rem; margin: 12px 0 0; }
.login_caja .login_ayuda:first-of-type { margin-top: 0; margin-bottom: 12px; }
.login_prueba { color: #FFD54F; font-weight: 700; margin: 0 0 12px; text-align: center; }
p.login_caja.error { color: #B3261E; }

/* ---------- Usuario en el encabezado ---------- */
.encabezado .contenedor { flex-wrap: wrap; row-gap: 8px; }
.usuario_sesion { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.9rem; margin-left: auto; }
.encabezado select.sucursal + .usuario_sesion { margin-left: 12px; }
.usuario_nombre { display: flex; align-items: center; gap: 6px; line-height: 1.15; }
.usuario_nombre > span:last-child { display: flex; flex-direction: column; }
.usuario_nombre small { opacity: .85; font-size: 0.78rem; }
.boton_salir { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.boton_salir:hover { background: rgba(255, 255, 255, .15); }
.boton_salir:focus-visible { outline: 3px solid #FFD54F; outline-offset: 2px; }
.aviso_prueba_global { margin: 0; padding: 6px 16px; background: #FFF4D6; color: #7A5A00; text-align: center; font-weight: 700; font-size: 0.85rem; }
@media (max-width: 640px) { .usuario_sesion { margin-left: 0; width: 100%; justify-content: flex-end; } }

/* ---------- Solo consulta (recepción en otra sucursal) ---------- */
.aviso_solo_lectura { background: #E6EEF8; border-bottom: 2px solid #3A78C2; color: #1F4F8A; padding: 10px 0; }
.aviso_solo_lectura .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
body.solo_lectura .solo_edicion,
body.solo_lectura [data_form],
body.solo_lectura [data_borrar],
body.solo_lectura [data_saldo_automatico],
body.solo_lectura [data_editar_ref],
body.solo_lectura [data_borrar_pago] { display: none !important; }
body.solo_lectura .ultimas .entrada { pointer-events: none; }

/* ---------- Usuarios ---------- */
.chip_rol { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: #EEF0F3; color: #3B4552; white-space: nowrap; }
.chip_rol.admin { background: #1E4E8C; color: #fff; }
.usuario_inactivo td { color: #8995A3; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aviso_solo_consulta { background: #E6EEF8; border-left: 4px solid #3A78C2; color: #1F4F8A; padding: 10px 14px; border-radius: 6px; }
.encabezado select.sucursal { margin-left: auto; }
.aviso_solo_lectura .contenedor { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.buscador_inventario { margin-top: 0.4rem; }
.tiempo_seccion.listo { color: #0E7C86; }
.tiempo_rampa.tiempo_fijo { color: #5A6573; }

/* ---------- Notas de Pendientes ---------- */
.bloque_notas { margin-bottom: 2rem; }
.bloque_notas .barra_titulo h2 { margin: 0; }
.form_nota { margin-bottom: 1rem; }
.filtro_notas { display: flex; gap: 1.2rem; margin: 0.4rem 0 0.8rem; }
.lista_notas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.nota { background: #fff; border: 1px solid var(--linea); border-left: 6px solid #E0A100; border-radius: 10px; padding: 0.8rem 1rem; }
.nota_terminado { border-left-color: #2E8B57; }
.nota_encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; }
.nota_encabezado strong { font-size: 1.05rem; }
.nota_descripcion { white-space: pre-wrap; margin: 0.5rem 0 0.3rem; max-width: 80ch; }
.nota_pie { font-size: 0.8rem; margin: 0 0 0.5rem; }
.nota_acciones { margin: 0; }
.chip_nota { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.chip_nota.pendiente { background: #FFF4D6; color: #7A5A00; }
.chip_nota.terminado { background: #E3F4EA; color: #1E6B41; }

/* ---------- Importar refacciones (Inventario) ---------- */
.barra_importar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.8rem; }
.ventana_importar { max-width: min(46rem, calc(100% - 2rem)); }
.tabla_importar { max-height: 45vh; overflow: auto; }
.resumen_importar { margin: 0.8rem 0 0.5rem; }
.texto_error { color: #B3261E; font-weight: 600; }
.fila_error td { background: #FDECEC; }
.chip_import { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.chip_import.nueva { background: #E6EEF8; color: #1F4F8A; }
.chip_import.existe { background: #E3F4EA; color: #1E6B41; }
.chip_import.error { background: #FDECEC; color: #B3261E; }
.tiempo_seccion.reparacion { color: #B4235A; }
.tiempo_seccion.fijo { color: #5A6573; font-weight: 600; }
.regresar_base { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.regresar_base h3 { margin: 0 0 0.6rem; }
.regresar_base code { word-break: break-all; }