/* Sueldos — estilos simples, botones grandes, claro/oscuro automatico */
:root {
  --fondo: #f3f5fa; --tarjeta: #ffffff; --texto: #1c2434; --suave: #6b7590; --borde: #e3e8f1;
  --primario: #2563eb; --primario-osc: #1d4ed8; --ok: #16a34a; --alerta: #d97706; --error: #dc2626;
  --sombra: 0 1px 2px rgba(20,30,60,.06), 0 6px 18px rgba(20,30,60,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0f1422; --tarjeta: #182033; --texto: #e8ecf6; --suave: #98a3bd; --borde: #263049;
          --primario: #4f8bff; --primario-osc: #3b76ea; --sombra: 0 1px 2px rgba(0,0,0,.4); }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--fondo); color: var(--texto);
       font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; line-height: 1.45; }
a { color: var(--primario); text-decoration: none; }
h1 { font-size: 1.9rem; margin: .2rem 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
.suave { color: var(--suave); }
.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }

/* barra superior */
.barra { background: var(--tarjeta); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.barra .contenedor { display: flex; align-items: center; gap: 18px; padding-bottom: 0; flex-wrap: wrap; }
.marca { font-weight: 800; font-size: 1.2rem; padding: 14px 0; color: var(--texto); }
.marca small { display: block; font-weight: 500; font-size: .75rem; color: var(--suave); margin-top: -4px; }
.empresa-actual { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
                  background: var(--fondo); color: var(--texto); font-size: .95rem; border: 2px solid var(--borde); }
.empresa-actual:hover { border-color: var(--primario); }
.empresa-actual span { color: var(--primario); font-size: .8rem; font-weight: 600; }
.baldosa.nueva { border: 2px dashed var(--borde); background: transparent; box-shadow: none; }
.baldosa.actual { border-color: var(--ok); }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a { padding: 16px 10px; color: var(--suave); font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.barra .contenedor { gap: 12px; max-width: 1320px; flex-wrap: nowrap; }
.empresa-actual b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .barra .contenedor { flex-wrap: wrap; } }
@media (max-width: 1300px) { .empresa-actual span { display: none; } }
.menu a:hover { color: var(--texto); }
.menu a.activo { color: var(--primario); border-color: var(--primario); }
.usuario { font-size: .85rem; color: var(--suave); display: flex; gap: 10px; align-items: center; }
.usuario form { margin: 0; }
.usuario button { background: none; border: 0; color: var(--primario); cursor: pointer; font: inherit; }

/* mensajes */
.mensajes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.mensajes li { padding: 14px 18px; border-radius: 12px; background: var(--tarjeta); border-left: 6px solid var(--primario);
               box-shadow: var(--sombra); font-weight: 500; }
.mensajes .success { border-color: var(--ok); } .mensajes .error { border-color: var(--error); }
.mensajes .warning { border-color: var(--alerta); }

/* botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 26px;
         border-radius: 14px; border: 2px solid var(--primario); background: var(--primario); color: #fff;
         font-size: 1.1rem; font-weight: 700; cursor: pointer; text-align: center; box-shadow: var(--sombra); }
.boton:hover { background: var(--primario-osc); border-color: var(--primario-osc); color: #fff; }
.boton.claro { background: var(--tarjeta); color: var(--primario); }
.boton.claro:hover { background: var(--borde); color: var(--primario); }
.boton.verde { background: var(--ok); border-color: var(--ok); } .boton.rojo { background: var(--error); border-color: var(--error); }
.boton.chico { min-height: 40px; padding: 0 14px; font-size: .95rem; border-radius: 10px; box-shadow: none; }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; }

/* baldosas de inicio */
.baldosas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0; }
.baldosa { background: var(--tarjeta); border-radius: 20px; padding: 26px 24px; box-shadow: var(--sombra); color: var(--texto);
           border: 2px solid transparent; display: block; }
.baldosa:hover { border-color: var(--primario); transform: translateY(-2px); transition: .12s; }
.baldosa .icono { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.baldosa strong { font-size: 1.3rem; display: block; }
.baldosa span.desc { color: var(--suave); font-size: .95rem; }
.baldosa.principal { background: var(--primario); color: #fff; } .baldosa.principal span.desc { color: #dbe6ff; }

/* tarjetas y numeros */
.tarjeta { background: var(--tarjeta); border-radius: 18px; padding: 22px 24px; box-shadow: var(--sombra); margin: 16px 0; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.numero { background: var(--tarjeta); border-radius: 16px; padding: 16px 20px; box-shadow: var(--sombra); }
.numero small { color: var(--suave); display: block; font-weight: 600; }
.numero b { font-size: 1.6rem; letter-spacing: -.01em; }
.etiqueta { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .8rem; font-weight: 700;
            background: var(--borde); color: var(--suave); }
.etiqueta.verde { background: #dcfce7; color: #166534; } .etiqueta.amarilla { background: #fef3c7; color: #92400e; }
.etiqueta.azul { background: #dbeafe; color: #1e40af; }

/* tablas */
.tabla-caja { background: var(--tarjeta); border-radius: 18px; box-shadow: var(--sombra); overflow-x: auto; margin: 14px 0; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.2; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave);
     padding: 7px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 5px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--primario) 5%, transparent); }
.der { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 800; border-top: 2px solid var(--borde); }
.fila-titulo td { background: var(--fondo); font-weight: 800; color: var(--suave); text-transform: uppercase; font-size: .72rem; }

/* formularios */
form.formulario { display: grid; gap: 16px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .ayuda { color: var(--suave); font-size: .85rem; margin-top: 4px; }
.campo .error, .errorlist { color: var(--error); font-size: .9rem; margin: 4px 0 0; padding: 0; list-style: none; }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; font: inherit; color: var(--texto); background: var(--tarjeta);
  border: 2px solid var(--borde); border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); }
td input[type=text], td input[type=number], td select { min-height: 30px; padding: 2px 8px; border-radius: 6px; font-size: .85rem; }
td .boton.chico { min-height: 28px; padding: 0 10px; font-size: .8rem; border-radius: 8px; }
td .etiqueta { padding: 1px 9px; font-size: .72rem; }
td .suave { font-size: .74rem !important; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px 20px; }
.campo input[type=checkbox] { width: 26px; height: 26px; margin-top: 4px; accent-color: var(--primario); }
.buscador { display: flex; gap: 10px; margin: 14px 0; }
.buscador input { flex: 1; }
.migas { margin: 18px 0 0; font-size: .95rem; }
.vacio { text-align: center; padding: 40px; color: var(--suave); }

/* pantalla de ingreso */
.ingreso { max-width: 420px; margin: 9vh auto; }
.ingreso .tarjeta { padding: 32px; }
@media (max-width: 700px) { html { font-size: 16px; } .contenedor { padding: 0 14px 50px; } h1 { font-size: 1.5rem; } }