/*
 * Estilos del sistema de comisiones.
 *
 * Escrito a mano y sin compilar a propósito: el sistema se despliega copiando
 * archivos a un hosting compartido, y agregar un paso de compilación al
 * despliegue solo tendría sentido si la interfaz fuera mucho mayor que esta.
 *
 * Los colores salen del logo de la empresa: verde #52AB4A y grafito #3D3D3F.
 */

:root {
  --verde: #52AB4A;
  --verde-hondo: #3A7F35;
  --verde-tenue: #EDF6EC;
  --grafito: #3D3D3F;
  --tinta: #24261F;
  --tinta-media: #5C6458;
  --tinta-suave: #868E80;
  --fondo: #F7F9F6;
  --panel: #FFFFFF;
  --borde: #DFE5DC;
  --ambar: #B8760F;
  --ambar-tenue: #FDF4E3;
  --rojo: #A61C1C;
  --rojo-tenue: #FBE9E9;
  --radio: 5px;
  --sombra: 0 1px 2px rgba(36, 38, 31, .06), 0 1px 3px rgba(36, 38, 31, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--verde-hondo); }

/* --- Estructura ---------------------------------------------------------- */

.barra {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 58px;
}

.marca {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--grafito);
  text-decoration: none;
  font-size: 16px;
}
.marca span { color: var(--verde); }

.barra nav { display: flex; gap: 20px; margin-right: auto; }
.barra nav a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.barra nav a:hover { color: var(--tinta); }
.barra nav a.activo { color: var(--verde-hondo); border-bottom-color: var(--verde); font-weight: 600; }

.sesion { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--tinta-suave); }

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }

h1 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 16px; letter-spacing: -.01em; margin: 28px 0 12px; }
.bajada { color: var(--tinta-media); margin: 0 0 24px; font-size: 14px; }

/* --- Tarjetas y cifras --------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cifra .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta-suave);
  font-weight: 600;
}
.cifra .monto {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cifra .nota { font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }
.cifra.destacada { border-left: 3px solid var(--verde); }

/* --- Tablas -------------------------------------------------------------- */

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

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-suave);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--fondo); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuerte { font-weight: 650; }
.apagado { color: var(--tinta-suave); }

/* --- Etiquetas de estado ------------------------------------------------- */

.estado {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
}
.estado.abierto { background: #EEF1EC; color: var(--tinta-media); }
.estado.calculado { background: var(--ambar-tenue); color: var(--ambar); }
.estado.aprobado { background: var(--verde-tenue); color: var(--verde-hondo); }

/* --- Avisos -------------------------------------------------------------- */

.aviso { border-radius: var(--radio); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.aviso.exito { background: var(--verde-tenue); border-left: 3px solid var(--verde); }
.aviso.atencion { background: var(--ambar-tenue); border-left: 3px solid var(--ambar); }
.aviso.error { background: var(--rojo-tenue); border-left: 3px solid var(--rojo); color: var(--rojo); }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }

/* --- Formularios --------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=file], select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  background: var(--panel);
}
input:focus, select:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.campo { margin-bottom: 16px; }
.ayuda { font-size: 12px; color: var(--tinta-suave); margin-top: 5px; }

button, .boton {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--verde-hondo);
  background: var(--verde-hondo);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .boton:hover { background: var(--verde); border-color: var(--verde); }
button.suave, .boton.suave { background: var(--panel); color: var(--tinta); border-color: var(--borde); }
button.suave:hover, .boton.suave:hover { background: var(--fondo); }
.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --- Ingreso ------------------------------------------------------------- */

.ingreso { max-width: 380px; margin: 12vh auto; }
.ingreso .marca { display: block; text-align: center; font-size: 21px; margin-bottom: 22px; }

@media (max-width: 640px) {
  .barra { padding: 0 14px; gap: 16px; overflow-x: auto; }
  main { padding: 20px 14px 48px; }
  .cifra .monto { font-size: 21px; }
}

.dos-columnas { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

tfoot th { border-top: 2px solid var(--borde); border-bottom: none; padding-top: 10px; font-size: 13px; color: var(--tinta); text-transform: none; letter-spacing: 0; }

/* --- Marca ---------------------------------------------------------------- */

.barra .marca img { display: block; height: 24px; width: auto; }

.ingreso .logo-ingreso { display: block; height: 38px; width: auto; margin: 0 auto 20px; }
.ingreso h1 { font-size: 19px; margin-bottom: 4px; }
.ingreso .bajada { margin-bottom: 20px; }
.ingreso .casilla { font-weight: normal; display: flex; align-items: center; gap: 8px; }
.ingreso .casilla input { width: auto; }

.ancho-completo { width: 100%; }

/* --- Selector de archivo -------------------------------------------------- */
/*
 * El control nativo se ve distinto en cada navegador y desentona con el resto
 * del formulario. Se le da el mismo trato que a los demas campos y el boton
 * interno pasa a parecerse a los botones del sistema.
 */

input[type=file] {
  padding: 6px;
  cursor: pointer;
  background: var(--fondo);
  border-style: dashed;
}
input[type=file]:hover { border-color: var(--verde); background: var(--verde-tenue); }

input[type=file]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  margin-right: 12px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--tinta);
  cursor: pointer;
}
input[type=file]:hover::file-selector-button { border-color: var(--verde-hondo); color: var(--verde-hondo); }

.sesion-usuario { color: var(--tinta-suave); text-decoration: none; }
.sesion-usuario:hover { color: var(--verde-hondo); text-decoration: underline; }

/* --- Mantención: usuarios, vendedores y deshacer cargas ------------------ */

input[type=date] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
    background: var(--panel);
    color: var(--tinta);
}

.casilla {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.casilla input { width: auto; }

.vacio { padding: 20px 12px; color: var(--tinta-suave); text-align: center; }

/* El detalle plegado evita una pantalla aparte para editar una fila. */
details > summary.enlace-accion {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-hondo);
    padding: 4px 8px;
    border-radius: 6px;
}

summary.enlace-accion::-webkit-details-marker { display: none; }
summary.enlace-accion:hover { background: var(--verde-tenue); }
details[open] > summary.enlace-accion { background: var(--verde-tenue); }

.formulario-fila {
    text-align: left;
    margin-top: 12px;
    padding: 14px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    min-width: 260px;
}

.formulario-fila + .formulario-fila { margin-top: 8px; }

/* La clave temporal se muestra una sola vez: tiene que poder copiarse sin
   confundir un cero con una o. */
.clave-temporal {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 20px;
    letter-spacing: 2px;
    background: var(--panel);
    border: 1px dashed var(--verde);
    border-radius: 7px;
    padding: 10px 14px;
    margin: 10px 0;
    display: inline-block;
    user-select: all;
}

button.peligro, .boton.peligro {
    background: var(--panel);
    color: var(--rojo);
    border-color: var(--rojo-tenue);
}

button.peligro:hover, .boton.peligro:hover {
    background: var(--rojo-tenue);
    border-color: var(--rojo);
}