/* Portal Induspaper — sobre ORIX. Claro, de tarjetas, pensado primero para el celular. */
:root {
  --marca: #0f2a5c;
  --marca-2: #1f4aa8;
  --acento: #ef8a17;
  --fondo: #f3f5f9;
  --tarjeta: #ffffff;
  --texto: #18202e;
  --tenue: #687387;
  --linea: #e3e7ef;
  --suave: #eef2f9;
  --rojo: #c0362c;
  --verde: #1b8a4b;
  --ambar: #a86200;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca-2); text-decoration: none; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nota { color: var(--tenue); font-size: 13px; }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
mark { background: #ffe8a3; color: inherit; border-radius: 2px; padding: 0 1px; }

/* barra superior */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  padding-top: calc(10px + env(safe-area-inset-top));   /* instalada en el iPhone, bajo la barra de estado */
  background: var(--marca); color: #fff;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; white-space: nowrap; }
.marca b { color: var(--acento); font-weight: 600; }
.logo {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--acento); color: var(--marca); font-weight: 800; font-size: 13px;
}
.top h1 { font-size: 16px; font-weight: 600; margin: 0 auto 0 24px; }
.dato { display: flex; align-items: center; gap: 7px; font-size: 12.5px; opacity: .9; white-space: nowrap; }
.dato i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.dato.viejo i { background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,.25); }
.alerta { background: #fff4e0; color: #7a4500; padding: 9px 20px; font-size: 14px; border-bottom: 1px solid #f3d6a6; }

/* cuerpo y menú lateral */
.cuerpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - 50px); }
.lateral {
  background: var(--tarjeta); border-right: 1px solid var(--linea); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 50px; height: calc(100vh - 50px);
}
.lateral a, .lateral .grupo {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--texto); font-size: 14px;
}
.lateral .grupo { color: var(--tenue); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 14px; }
.lateral a.sub { padding-left: 38px; }
.lateral a:hover { background: var(--suave); }
.lateral a.activo { background: #e7eefc; color: var(--marca-2); font-weight: 600; }
.usuario { margin-top: auto; border-top: 1px solid var(--linea); padding-top: 12px; font-size: 13px; color: var(--tenue); }
.usuario span { display: block; padding: 0 10px 6px; }
main { padding: 22px 26px 40px; min-width: 0; }
.inferior { display: none; }

/* tarjetas */
.saludo { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 16px; max-width: 760px; }
.tarjeta-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta h2 { font-size: 14px; color: var(--tenue); font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: .4px; }
.cifra { font-size: 30px; font-weight: 700; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.barra-u { margin-bottom: 12px; }
.barra-et { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.barra-et span:last-child { color: var(--tenue); font-variant-numeric: tabular-nums; }
.barra-pie { font-size: 12px; color: var(--tenue); }
meter { width: 100%; height: 8px; margin: 4px 0 2px; border: 0; border-radius: 4px; background: var(--suave); }
meter::-webkit-meter-bar { background: var(--suave); border: 0; border-radius: 4px; height: 8px; }
meter::-webkit-meter-optimum-value { background: var(--marca-2); border-radius: 4px; }
meter::-moz-meter-bar { background: var(--marca-2); border-radius: 4px; }

/* buscador y controles */
.buscador {
  display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 0 14px; box-shadow: var(--sombra); max-width: 900px;
}
.buscador:focus-within { border-color: var(--marca-2); box-shadow: 0 0 0 3px rgba(31,74,168,.15); }
.buscador .ico { color: var(--tenue); }
.buscador input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 13px 0; background: transparent; min-width: 0; }
.buscador kbd { font: 12px ui-monospace, monospace; color: var(--tenue); border: 1px solid var(--linea); border-radius: 5px; padding: 1px 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.chip, .ctl, .segmento button {
  font: inherit; font-size: 14px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chip.sel { background: var(--marca); border-color: var(--marca); color: #fff; }
.ctl { border-radius: 8px; }
.ctl b { color: var(--texto); font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.ctl .et { color: var(--tenue); font-size: 12.5px; }
.ctl .flecha { color: var(--tenue); font-size: 11px; transition: transform .15s; }
.ctl.activo { border-color: var(--marca-2); background: #edf2fd; }
.ctl.activo b { color: var(--marca-2); }
.ctl:disabled { opacity: .5; cursor: default; }
.abierto > .ctl .flecha { transform: rotate(180deg); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.controles { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--texto);
  background: none; border: 0; border-radius: 7px; padding: 8px 10px; cursor: pointer;
}
.opcion:hover { background: var(--suave); }
.opcion.sel { color: var(--marca-2); font-weight: 600; background: #edf2fd; }
.opcion.sel::after { content: "✓"; margin-left: auto; }
.opcion input { width: 17px; height: 17px; accent-color: var(--marca-2); flex: none; }
.opcion.todos { border-bottom: 1px solid var(--linea); border-radius: 0; font-weight: 600; margin-bottom: 4px; }
.listo { display: block; width: 100%; margin-top: 8px; font: inherit; font-weight: 600; background: var(--marca-2); color: #fff; border: 0; border-radius: 8px; padding: 9px; cursor: pointer; }
.hoja-tit { display: none; }
.det-tabla.clic tbody tr { cursor: pointer; }
.det-tabla.clic tbody tr:hover td { background: var(--suave); }
.segmento { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.segmento button { border: 0; border-radius: 0; }
.segmento button.sel { background: #e7eefc; color: var(--marca-2); font-weight: 600; }
.desplegable { position: relative; }
.panel-flotante {
  display: none; position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 60vh; overflow: auto;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(16,24,40,.15);
}
.desplegable.abierto .panel-flotante { display: block; }
.panel-flotante label { display: block; font-size: 13px; color: var(--tenue); margin: 6px 0; }
.panel-flotante select { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 14px; padding: 7px; border: 1px solid var(--linea); border-radius: 8px; color: var(--texto); }
.check { display: flex !important; align-items: center; gap: 8px; color: var(--texto) !important; font-size: 14px !important; cursor: pointer; }
.check.todos { border-bottom: 1px solid var(--linea); padding-bottom: 6px; font-weight: 600; }
.check input { width: 16px; height: 16px; accent-color: var(--marca-2); }
.resumen-linea { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 2px 8px; font-size: 14px; color: var(--tenue); }
.resumen-linea b { color: var(--texto); }

/* lista de inventario: tabla en la PC */
.lista-inv { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); overflow: auto; }
.fila { display: grid; grid-template-columns: var(--cols); gap: 0 10px; padding: 9px 16px; border-bottom: 1px solid var(--linea); align-items: start; min-width: fit-content; }
.fila[data-i] { cursor: pointer; }
.fila[data-i]:hover, .fila[data-i]:focus { background: #f6f8fd; outline: 0; }
.fila.cab {
  position: sticky; top: 0; background: #f8f9fc; color: var(--tenue); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; z-index: 2;
}
.cab .c { cursor: pointer; user-select: none; font-family: inherit; font-size: 12px; color: var(--tenue); }
.c { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.c-variantes { text-align: center; color: var(--tenue); }
.c-codigo, .c-fabrica, .c-modelo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: #3c4658; }
.c-total, .c-comprometido, .c-disponible, .c-cu, .c-ct { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-disponible { font-weight: 700; }
.c-comprometido { color: var(--ambar); }
.fila.negativo .c-disponible { color: var(--rojo); }
.c-um, .c-almacen { color: var(--tenue); font-size: 13px; }
.m-cods, .m-meta { display: none; }   /* solo en las fichas del celular */
.c-alm, .c-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab .c-alm { white-space: normal; line-height: 1.2; }
.c-alm { color: #2c3a52; }
/* árbol línea › grupo › subgrupo › producto */
.arbol .fila.nivel-1 { background: #f7f9fd; }
.arbol .fila.nivel-1 .c-nombre { font-weight: 700; }
.arbol .fila.nivel-2 .c-nombre { padding-left: 20px; font-weight: 600; }
.arbol .fila.nivel-3 .c-nombre { padding-left: 40px; }
.arbol .fila.nivel-4 .c-nombre { padding-left: 60px; font-size: 13.5px; }
.arbol .fila.nivel-4 { background: #fcfdff; }
.giro { display: inline-block; width: 18px; color: var(--tenue); }
.c-nombre .cod { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--tenue); }
.resumen-linea .acciones { margin-left: auto; display: flex; gap: 16px; }
.tabla-desliza { overflow-x: auto; }
.mas[hidden] { display: none; }
.enlace-boton { font: inherit; border: 0; background: none; color: var(--marca-2); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.vacio { padding: 30px; text-align: center; color: var(--tenue); }
.mas { display: block; margin: 14px auto; font: inherit; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; padding: 9px 18px; cursor: pointer; color: var(--marca-2); font-weight: 600; }

/* detalle del producto */
.velo { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 40; }
.detalle {
  position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(640px, 100%); overflow: auto;
  background: var(--tarjeta); padding: 22px 24px 30px; box-shadow: -8px 0 30px rgba(16,24,40,.2);
}
.detalle[hidden], .velo[hidden] { display: none; }
.cerrar { position: absolute; top: 10px; right: 12px; border: 0; background: var(--suave); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tenue); }
.det-unidad { color: var(--acento); font-weight: 600; font-size: 13px; margin: 0 40px 4px 0; text-transform: uppercase; letter-spacing: .3px; }
.detalle h2 { font-size: 19px; margin: 0 40px 14px 0; line-height: 1.3; }
.detalle h3 { font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; margin: 20px 0 8px; }
.det-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.det-datos dt { font-size: 12px; color: var(--tenue); }
.det-datos dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.det-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.det-tabla th, .det-tabla td { padding: 7px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
.det-tabla th { font-size: 12px; color: var(--tenue); font-weight: 600; }
.det-tabla .n { text-align: right; }
.det-tabla .fuerte { font-weight: 700; }
.det-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--texto); border-bottom: 0; }

/* acceso */
body.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--marca) 0%, #1c3f86 100%); }
.caja-acceso { background: var(--tarjeta); width: 100%; max-width: 380px; border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.caja-acceso .logo-grande { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 18px; }
.caja-acceso .logo-grande .logo { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
.caja-acceso .logo-grande small { display: block; color: var(--tenue); font-size: 12.5px; }
.caja-acceso label { display: block; margin: 12px 0; font-weight: 600; font-size: 13.5px; }
.caja-acceso input { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #ccd3df; border-radius: 9px; }
.caja-acceso input:focus { outline: 0; border-color: var(--marca-2); box-shadow: 0 0 0 3px rgba(31,74,168,.15); }
.caja-acceso button { width: 100%; margin-top: 10px; padding: 12px; font: inherit; font-weight: 600; background: var(--marca-2); color: #fff; border: 0; border-radius: 9px; cursor: pointer; }
.error { color: var(--rojo); font-weight: 600; }

/* celular */
@media (max-width: 760px) {
  .top { padding: 10px 14px; gap: 10px; }
  .marca span:last-child { display: none; }
  .top h1 { margin-left: 0; font-size: 16px; }
  .dato span { font-size: 11.5px; }
  .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  main { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .inferior {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--tarjeta);
    border-top: 1px solid var(--linea); padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .inferior a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: var(--tenue); padding: 4px 0; }
  .inferior a.activo { color: var(--marca-2); font-weight: 600; }
  .inferior .ico { width: 22px; height: 22px; }
  .buscador kbd { display: none; }
  /* filtros: fila que se desliza de costado; cada lista se abre como hoja desde abajo */
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .filtros::-webkit-scrollbar { display: none; }
  .desplegable { position: static; }
  body.hoja-abierta::before { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 35; }
  .panel-flotante {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 36; min-width: 0; max-height: 75vh;
    border-radius: 18px 18px 0 0; padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
  }
  .hoja-tit { display: block; font-weight: 700; font-size: 15px; padding: 10px 10px 8px; border-bottom: 1px solid var(--linea); margin-bottom: 6px; }
  .opcion { padding: 12px 10px; font-size: 15px; }

  /* fichas en vez de tabla */
  .lista-inv { background: transparent; box-shadow: none; overflow: visible; }
  .fila.cab { display: none; }
  .fila {
    grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; background: var(--tarjeta); border: 0; border-radius: var(--radio);
    box-shadow: var(--sombra); margin-bottom: 10px; padding: 12px 14px; min-width: 0;
    grid-template-areas: "desc disp" "cods disp" "alm alm" "meta meta";
  }
  .fila .c-codigo, .fila .c-fabrica, .fila .c-modelo, .fila .c-variantes, .fila .c-um, .fila .c-n, .fila .c-alm,
  .fila .c-total, .fila .c-comprometido, .fila .c-cu, .fila .c-ct { display: none; }
  .c-descripcion, .c-nombre { grid-area: desc; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
  .arbol .fila .c-nombre { padding-left: 0 !important; }
  .arbol .fila.nivel-1 { background: var(--tarjeta); }
  .arbol .fila.nivel-2 { margin-left: 10px; }
  .arbol .fila.nivel-3 { margin-left: 20px; }
  .arbol .fila.nivel-4 { margin-left: 30px; }
  .arbol .fila.nodo { padding: 10px 14px; }
  .c-nombre .cod { display: none; }   /* en la ficha los códigos ya van en su propia línea */
  .resumen-linea .acciones { margin-left: 0; width: 100%; }
  .c-disponible { grid-area: disp; align-self: center; font-size: 20px; }
  .c-disponible::after { content: "disponible"; display: block; font-size: 11px; font-weight: 400; color: var(--tenue); }
  .c-almacen { grid-area: alm; color: var(--marca-2); font-size: 12.5px; }
  .m-cods { grid-area: cods; display: block; font: 12px ui-monospace, Consolas, monospace; color: var(--tenue); }
  .m-meta { grid-area: meta; display: block; font-size: 12.5px; color: var(--tenue); border-top: 1px solid var(--linea); padding-top: 6px; margin-top: 4px; }
  .m-meta b { color: var(--texto); font-weight: 600; }
  .det-datos { grid-template-columns: 1fr; }
  .detalle { top: auto; width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; padding-top: 26px; }
}