:root {
  /* Le dice al navegador que esta pagina solo tiene tema claro: sin esto,
     un SO o navegador en modo oscuro repinta los controles nativos (inputs,
     botones) con su propio fondo oscuro -contra el que un icono en gris
     (--tenue) puede perder casi todo su contraste, ya que el CSS de abajo
     nunca declara un fondo propio para <input>. */
  color-scheme: light;

  --fondo: #f4f5f7;
  --panel: #ffffff;
  --borde: #d8dbe0;
  --texto: #24292f;
  --tenue: #6b7280;
  --acento: #7b1e26;
  --error: #b42318;
  --exito: #12805c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--acento);
  color: #fff;
  padding: .7rem 1.2rem;
}

.barra a { color: #fff; text-decoration: none; }
.barra .marca { height: 32px; width: auto; display: block; }

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

.menu {
  width: 210px;
  background: var(--panel);
  border-right: 1px solid var(--borde);
  padding: 1rem 0;
}

.menu a {
  display: block;
  padding: .6rem 1.2rem;
  color: var(--texto);
  text-decoration: none;
}

.menu a:hover { background: var(--fondo); }
.menu a.activo { border-left: 3px solid var(--acento); font-weight: 600; }

.principal { flex: 1; padding: 1.5rem; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 1.2rem;
  margin-bottom: 1rem;
}

label { display: block; margin: .8rem 0 .3rem; font-size: .9rem; color: var(--tenue); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-size: 15px;
  background: var(--panel);
  color: var(--texto);
}

button {
  background: var(--acento);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: .6rem 1.2rem;
  font-size: 15px;
  cursor: pointer;
}

button:hover { filter: brightness(1.1); }

.aviso { padding: .7rem .9rem; border-radius: 4px; margin-bottom: 1rem; }
.aviso.error { background: #fdecea; color: var(--error); border: 1px solid #f5c2c0; }
.aviso.exito { background: #e7f6f1; color: var(--exito); border: 1px solid #b7e3d5; }

.acceso {
  max-width: 360px;
  margin: 8vh auto;
}

.campo-password {
  position: relative;
}
.campo-password input { padding-right: 2.4rem; }
.campo-password button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: #000 !important;
  border: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.campo-password button svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  stroke: #000 !important;
}
.campo-password button:hover,
.campo-password button:active { color: var(--acento) !important; }
.campo-password button:hover svg,
.campo-password button:active svg { stroke: var(--acento) !important; }

.tabla { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla th { font-size: .85rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.tabla tbody tr:hover { background: var(--fondo); }
.tabla td.num,
.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla td.num.monto-centro,
.tabla th.num.monto-centro { text-align: center; }

.tabla form.linea { display: flex; gap: .4rem; align-items: center; margin: 0; }
.tabla form.linea select { width: auto; padding: .3rem .4rem; }
.tabla form.linea button { padding: .3rem .7rem; font-size: .9rem; }

/* Corte diario de ventas */
.resumen-corte {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: .8rem 1rem;
  margin-top: .8rem;
}

.resumen-etiqueta { display: block; font-size: .8rem; color: var(--tenue); }
.resumen-valor { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

#diferencia-en-vivo.diferencia-marcada { color: var(--error); }

.campo-propinas {
  border: 1px dashed var(--borde);
  border-radius: 6px;
  padding: .8rem 1rem;
  margin-top: 1.2rem;
  background: var(--fondo);
}

.boton-peligro { background: var(--error); }

form.linea { display: flex; align-items: center; margin-top: .8rem; }

/* Listado de cortes de ventas */
.filtros-corte {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filtros-corte > div { min-width: 160px; }
.filtros-corte label { margin-top: 0; }

.atajos { margin: .8rem 0 0; }
.atajos a {
  margin-right: 1rem;
  font-size: .85rem;
  color: var(--acento);
  text-decoration: none;
}
.atajos a:hover { text-decoration: underline; }

.tabla-scroll { overflow-x: auto; }

.tabla td.diferencia-marcada,
.tabla th.diferencia-marcada {
  color: var(--error);
  font-weight: 700;
}

.tabla tr.fila-anulada { opacity: .55; }

.tabla td.fecha-con-comentario {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.tabla td.propinas-col,
.tabla th.propinas-total,
.tabla td.referencia-col,
.tabla th.referencia-total {
  border-left: 1px dashed var(--borde);
  color: var(--tenue);
}

/* Captura de egresos: resalta el campo cuya cifra cuenta para los
   totales (monto pagado), igual de destacado que el bloque de propinas
   de la captura de ventas. */
.campo-destacado {
  border: 1px dashed var(--borde);
  border-radius: 6px;
  padding: .8rem 1rem;
  margin-top: 1.2rem;
  background: var(--fondo);
}

/* Boton de accion principal en la cabecera de un listado. Es un enlace y
   no un <button> porque solo navega: no envia ningun formulario. Repite
   el aspecto de button para que la interfaz se lea igual. */
.acciones-cabecera { margin: 0 0 1rem; }

.boton {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  padding: .6rem 1.2rem;
  font-size: 15px;
}

.boton:hover { filter: brightness(1.1); }

/* Modulo de reportes */
.lista-reportes { list-style: none; margin: 0; padding: 0; }
.lista-reportes li { padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.lista-reportes li:last-child { border-bottom: 0; }
.lista-reportes a { color: var(--acento); font-weight: 600; text-decoration: none; }
.lista-reportes a:hover { text-decoration: underline; }
.descripcion-reporte { color: var(--tenue); font-size: .9rem; margin: .3rem 0 0; }

/* Leyenda opcional bajo un grafico (p.ej. "Numero de semana"), declarada
   por la definicion del reporte via grafico.eje_x_titulo. */
.grafico-eje-titulo { text-align: center; color: var(--tenue); margin: .4rem 0 0; }

/* Al imprimir un reporte, solo el contenido (totales, grafico, tabla)
   tiene sentido en papel: la barra, el menu lateral y los controles de
   filtro/exportar/imprimir no. */
@media print {
  .barra, .menu, .no-imprimir { display: none !important; }
  .contenedor { display: block; }
  .principal { padding: 0; }
}

/* Dashboard de inicio */

/* Utilidad o margen negativos: deben distinguirse a simple vista, no ser
   un numero mas en la fila. */
.valor-negativo { color: var(--error); }

/* Variacion contra el mes anterior. cambio-positivo/negativo ya vienen
   resueltos segun si, para ese concepto, subir es bueno o malo (ver
   $claseVariacion en dashboard.php); aqui solo se pinta. */
.cambio-positivo { color: var(--exito); font-weight: 600; }
.cambio-negativo { color: var(--error); font-weight: 600; }
.cambio-neutro   { color: var(--tenue); }

/* Aviso de dias sin capturar: ni error (no rompio nada) ni exito (falta
   un dato), un tono propio de advertencia. */
.aviso.advertencia {
  background: #fdf6e3;
  color: #8a6d1f;
  border: 1px solid #ecd9a0;
}