/* ===== base ===== */
:root {
  --bg: #0f172a; --card: #1e293b; --card2: #16233b; --hover: #223350;
  --linea: #334155; --texto: #e2e8f0; --suave: #94a3b8; --tenue: #64748b;
  --acento: #34d399; --acento-suave: rgba(52, 211, 153, .12);
  --rojo: #f87171; --verde: #4ade80;
}
* { box-sizing: border-box; margin: 0; }
:root { color-scheme: dark; }  /* controles nativos (calendario de fechas) en tema oscuro */
body { background: var(--bg); color: var(--texto); font-size: 15px; min-height: 100vh;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
main { padding: 20px 16px 40px; max-width: 1200px; margin: 0 auto; }

/* ===== topbar ===== */
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(15, 23, 42, .92);
          backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
                gap: 22px; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); flex-shrink: 0; }
.marca-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
              font-size: 20px; background: linear-gradient(135deg, #059669, #34d399);
              box-shadow: 0 2px 10px rgba(52, 211, 153, .25); }
.marca-texto { font-weight: 800; font-size: 1rem; line-height: 1.1; }
.marca-texto span { display: block; font-weight: 500; font-size: .64rem; color: var(--suave);
                    letter-spacing: .09em; text-transform: uppercase; }
.tabs { display: flex; gap: 4px; }
.tab { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
       color: var(--suave); font-weight: 600; font-size: .9rem; transition: all .15s; }
.tab svg { width: 17px; height: 17px; }
.tab:hover { background: var(--hover); color: var(--texto); }
.tab.activo { background: var(--acento-suave); color: var(--acento); }
.salir-form { margin-left: auto; }
.salir { background: none; border: 1px solid var(--linea); color: var(--suave);
         border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: .85rem;
         transition: all .15s; }
.salir:hover { border-color: var(--rojo); color: var(--rojo); }

/* ===== titulos y ayuda ===== */
h1 { font-size: 1.45rem; margin-bottom: 4px; letter-spacing: -.01em; }
h2 { font-size: .78rem; color: var(--suave); margin-bottom: 10px; font-weight: 700;
     text-transform: uppercase; letter-spacing: .08em; }
.sub { color: var(--suave); font-size: .85rem; margin-bottom: 18px; }
.ayuda { color: var(--tenue); font-size: .8rem; margin: -4px 0 12px; }
.nota { color: var(--tenue); font-size: .85rem; padding: 6px 0; }
.nota a { color: var(--acento); }
.error { color: var(--rojo); font-size: .85rem; text-align: center; padding: 10px; }

/* ===== KPI ===== */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px; margin-bottom: 18px; }
.tarjeta { background: var(--card); border: 1px solid var(--linea); border-radius: 12px;
           padding: 14px 16px; border-left: 3px solid var(--acento); }
.tarjeta .valor { font-size: 1.45rem; font-weight: 800; color: var(--acento);
                  font-variant-numeric: tabular-nums; }
.tarjeta .valor.rojo { color: var(--rojo); }
.tarjeta .rotulo { color: var(--suave); font-size: .78rem; margin-top: 2px; }
a.tarjeta { display: block; color: inherit;
            transition: border-color .15s, transform .15s, box-shadow .15s; }
a.tarjeta:hover { border-color: var(--acento); transform: translateY(-2px);
                  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.nota-inline { color: var(--tenue); font-size: .75rem; }

/* ===== paneles y bloques ===== */
.paneles { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-bottom: 22px; }
.panel { background: var(--card); border: 1px solid var(--linea); border-radius: 12px;
         padding: 16px; }
.canvas-caja { position: relative; width: 100%; }
.bloque { margin-bottom: 24px; }

/* ===== tarjetas de lote (clickeables) ===== */
.lotes-cabecera { display: flex; align-items: center; justify-content: space-between;
                  gap: 12px; margin-bottom: 4px; }
.lotes-cabecera h2 { margin: 0; }
#buscar-lote { min-width: 220px; }
.vista-toggle { display: inline-flex; gap: 3px; background: var(--card);
                border: 1px solid var(--linea); border-radius: 11px; padding: 3px; }
.vista-toggle button { background: none; border: none; color: var(--suave); font: inherit;
                       font-weight: 700; font-size: .86rem; padding: 6px 18px;
                       border-radius: 8px; cursor: pointer;
                       transition: background .15s, color .15s; }
.vista-toggle button:hover { color: var(--texto); background: var(--hover); }
.vista-toggle button.activo { background: var(--acento-suave); color: var(--acento); }
.lotes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
              gap: 12px; margin-bottom: 24px; }
/* el display:grid de arriba le ganaria al atributo hidden del toggle Campos|Lotes */
[hidden] { display: none !important; }
.grid-campos { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
a.campo-card { border-left: 3px solid var(--acento); }
.campo-card .lote-nombre { font-size: 1.02rem; text-transform: uppercase;
                           letter-spacing: .04em; }
.campo-card .lote-total { font-size: 1.3rem; }
.mb-mas { color: var(--tenue); font-size: .74rem; }
.lote-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px;
             flex-wrap: wrap; }
.lote-campo { color: var(--tenue); font-size: .68rem; font-weight: 700;
              text-transform: uppercase; letter-spacing: .05em;
              border: 1px solid var(--linea); border-radius: 5px; padding: 1px 7px;
              white-space: nowrap; }
a.lote-card { display: block; color: inherit; background: var(--card);
              border: 1px solid var(--linea); border-radius: 12px; padding: 13px 15px;
              transition: border-color .15s, transform .15s, box-shadow .15s; }
a.lote-card:hover { border-color: var(--acento); transform: translateY(-2px);
                    box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
a.lote-card:hover .chev { color: var(--acento); transform: translateX(3px); }
.lote-card header { display: flex; align-items: baseline; gap: 8px; }
.lote-nombre { font-weight: 700; font-size: 1.05rem; }
.lote-total { font-weight: 800; font-size: 1.15rem; color: var(--acento); margin-left: auto;
              font-variant-numeric: tabular-nums; }
.chev { color: var(--tenue); font-size: 1.25rem; line-height: 1; transition: all .15s;
        font-weight: 700; }
.lote-rodeo { color: var(--suave); font-size: .78rem; margin-top: 2px; }
.lote-meta .lote-rodeo { margin-top: 0; }
.minibars { list-style: none; padding: 0; margin-top: 10px; display: flex;
            flex-direction: column; gap: 5px; }
.minibars li { display: grid; grid-template-columns: minmax(92px, auto) 1fr 38px;
               align-items: center; gap: 8px; font-size: .78rem; }
.mb-cat { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-bar { background: var(--bg); border-radius: 4px; height: 8px; overflow: hidden; }
.mb-bar i { display: block; height: 100%; background: var(--acento); border-radius: 4px; }
.mb-n { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== tablas ===== */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px;
                background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .85rem; white-space: nowrap; }
th, td { padding: 9px 12px; border-bottom: 1px solid rgba(51, 65, 85, .5); text-align: right; }
tr:last-child td { border-bottom: none; }
th { background: var(--card2); color: var(--suave); position: sticky; top: 0;
     font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover td { background: var(--hover); }
tr.total td { border-top: 2px solid var(--linea); font-weight: 700; color: var(--acento); }
td.cero { color: #475569; }
td.pos { color: var(--verde); font-weight: 600; }
td.neg { color: var(--rojo); font-weight: 600; }
td.chev-col { width: 30px; color: var(--tenue); font-size: 1.1rem; font-weight: 700; }
tr.fila-link { cursor: pointer; }
tr.fila-link:hover .chev-col { color: var(--acento); }
.eliminado td { text-decoration: line-through; color: var(--tenue); }

/* ===== filtros y forms ===== */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px;
           background: var(--card); border: 1px solid var(--linea); border-radius: 12px;
           padding: 12px 14px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem;
                 color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
input, select { background: var(--bg); border: 1px solid var(--linea); color: var(--texto);
                border-radius: 8px; padding: 8px 11px; font-size: .9rem; }
input:hover, select:hover { border-color: #46587a; }
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
button.primario { background: var(--acento); color: #0b1220; border: none; border-radius: 8px;
                  padding: 9px 18px; font-weight: 700; cursor: pointer; font-size: .9rem;
                  transition: filter .15s; }
button.primario:hover { filter: brightness(1.1); }
#buscar-rodeo { width: 100%; max-width: 380px; }

/* ===== usuarios (gestion de accesos de solo lectura) ===== */
.panel-angosto { max-width: 560px; }
.form-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.form-linea input[type="email"] { flex: 1; min-width: 220px; background: var(--bg);
    border: 1px solid var(--linea); border-radius: 8px; color: var(--texto);
    padding: 9px 12px; font-family: inherit; font-size: .9rem; }
.form-linea input[type="email"]:focus { outline: none; border-color: var(--acento); }
.form-linea button { background: var(--acento-suave); border: 1px solid var(--acento);
    color: var(--acento); border-radius: 8px; padding: 9px 16px; font-family: inherit;
    font-size: .88rem; font-weight: 600; cursor: pointer; }
.form-linea button:hover { filter: brightness(1.15); }
.clave-caja { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--acento);
    border-radius: 10px; background: var(--acento-suave); font-size: .88rem; }
.clave-caja code { display: inline-block; margin-top: 6px; padding: 6px 12px;
    background: var(--bg); border-radius: 8px; color: var(--acento);
    font-size: 1.05rem; letter-spacing: .5px; user-select: all; }
td.acciones { display: flex; gap: 6px; justify-content: flex-end; }
button.accion { background: none; border: 1px solid var(--linea); color: var(--suave);
    border-radius: 7px; padding: 4px 10px; font-family: inherit; font-size: .78rem;
    cursor: pointer; }
button.accion:hover { border-color: var(--acento); color: var(--acento); }
button.accion.peligro:hover { border-color: #f87171; color: #f87171; }

/* ===== selector dia/semana/mes (evolucion) ===== */
.panel-cabecera { display: flex; align-items: center; justify-content: space-between;
                  gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-cabecera h2 { margin-bottom: 0; }
.g-chips { display: inline-flex; border: 1px solid var(--linea); border-radius: 99px;
           overflow: hidden; }
.g-chips button { background: none; border: 0; color: var(--suave); padding: 5px 13px;
                  font-size: .8rem; font-family: inherit; cursor: pointer;
                  transition: all .15s; }
.g-chips button + button { border-left: 1px solid var(--linea); }
.g-chips button:hover { color: var(--texto); }
.g-chips button.activo { background: var(--acento-suave); color: var(--acento);
                         font-weight: 600; }
.evo-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evo-fechas { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); }
.evo-fechas input { padding: 4px 8px; font-size: .78rem; }
.grafico-hint { color: var(--tenue); font-size: .74rem; margin-top: 8px; }

/* ===== explorador por categoria (stock) ===== */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-chip { background: var(--card); border: 1px solid var(--linea); color: var(--suave);
            border-radius: 99px; padding: 7px 14px; cursor: pointer; font-size: .84rem;
            font-family: inherit; transition: all .15s; }
.cat-chip strong { color: var(--texto); margin-left: 4px; font-variant-numeric: tabular-nums; }
.cat-chip:hover { border-color: var(--acento); }
.cat-chip.activo { background: var(--acento-suave); border-color: var(--acento);
                   color: var(--acento); }
.cat-chip.activo strong { color: var(--acento); }
.cat-titulo { color: var(--suave); font-size: .85rem; margin-bottom: 10px; }
.cat-titulo strong { color: var(--texto); }
.minibars-xl li { grid-template-columns: minmax(110px, auto) 1fr 60px; font-size: .88rem; }
.minibars-xl .mb-bar { height: 12px; }
.minibars-xl { gap: 8px; }

/* ===== resumen por tipo (movimientos) ===== */
.chips-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.chip-tipo { display: flex; align-items: baseline; gap: 8px; background: var(--card);
             border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px;
             color: inherit; transition: all .15s; font-size: .82rem; }
.chip-tipo:hover { border-color: var(--acento); transform: translateY(-1px); }
.chip-tipo.chip-activo { border-color: var(--acento); background: var(--acento-suave); }
.chip-tipo .ct-tipo { color: var(--suave); }
.chip-tipo strong { font-variant-numeric: tabular-nums; }
.chip-tipo strong.pos { color: var(--verde); }
.chip-tipo strong.neg { color: var(--rojo); }
.chip-tipo .ct-n { color: var(--tenue); font-size: .72rem; }
.limpiar { color: var(--suave); font-size: .83rem; padding: 8px 10px; border-radius: 8px; }
.limpiar:hover { color: var(--rojo); background: rgba(248, 113, 113, .1); }

/* ===== fichas ===== */
.volver { display: inline-flex; align-items: center; gap: 5px; color: var(--suave);
          font-size: .83rem; margin-bottom: 8px; padding: 4px 10px 4px 6px;
          border: 1px solid transparent; border-radius: 8px; transition: all .15s; }
.volver:hover { color: var(--acento); background: var(--acento-suave); }
.ficha-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
                  flex-wrap: wrap; }
.ficha-cabecera h1 { margin: 0; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: flex; flex-direction: column; gap: 2px; background: var(--bg);
        border: 1px solid var(--linea); border-radius: 10px; padding: 10px 16px;
        color: inherit; transition: all .15s; }
.chip:hover { border-color: var(--acento); transform: translateY(-1px); }
.chip strong { font-size: 1.05rem; }
.chip span { color: var(--suave); font-size: .76rem; }

/* ===== pills ===== */
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .74rem;
        background: var(--linea); color: #cbd5e1; font-weight: 600; }
.pill.venta { background: #7f1d1d; color: #fecaca; }
.pill.compra, .pill.nacimiento { background: #14532d; color: #bbf7d0; }
.pill-link { border: 1px solid transparent; }
.pill-link:hover { background: var(--acento); color: #0b1220; }
.pill-grande { font-size: .85rem; padding: 5px 14px; }

/* ===== login ===== */
.login-caja { max-width: 350px; margin: 14vh auto; background: var(--card); padding: 30px;
              border-radius: 14px; border: 1px solid var(--linea); display: flex;
              flex-direction: column; gap: 13px; }
.login-caja .marca-logo { margin: 0 auto; width: 52px; height: 52px; font-size: 28px; }
.login-caja h1 { color: var(--texto); text-align: center; font-size: 1.15rem; }
.login-caja .sub { text-align: center; margin-bottom: 4px; }

/* ===== responsive ===== */
@media (max-width: 860px) { .paneles { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  main { padding: 14px 10px 90px; }
  /* backdrop-filter crea containing block y atraparia el .tabs fijo dentro del topbar */
  .topbar { backdrop-filter: none; background: rgba(15, 23, 42, .97); }
  th, td { padding: 7px 8px; }
  .lotes-grid { grid-template-columns: 1fr; }
  .lotes-cabecera { flex-direction: column; align-items: stretch; }
  .marca-texto { font-size: .92rem; }
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
          background: rgba(30, 41, 59, .97); backdrop-filter: blur(8px);
          border-top: 1px solid var(--linea); display: grid;
          grid-template-columns: repeat(3, 1fr); gap: 4px;
          padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); }
  .tab { flex-direction: column; gap: 3px; font-size: .68rem; padding: 6px 4px;
         border-radius: 10px; text-align: center; }
  .tab svg { width: 21px; height: 21px; }
}