* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f4f5f7; color: #1a1a1a; }

/* ── Identidad de color por módulo (paleta del logo) ──────────────────────────
   El marco (barra/menú) se queda azul marino; cada módulo tiñe el borde de la
   barra, el encabezado de sección, el thead de la tabla y los botones primarios
   con su --acento. --acento-txt es el color de texto legible SOBRE ese acento
   (el ámbar necesita texto oscuro; los demás, blanco). */
body { --acento: #1e3a5f; --acento-txt: #fff; }
body.mod-libros   { --acento: #2fb5c9; --acento-txt: #fff; }     /* turquesa */
body.mod-maestros { --acento: #ec2f8b; --acento-txt: #fff; }     /* rosa */
body.mod-ventas   { --acento: #f4b41a; --acento-txt: #16335c; }  /* ámbar (texto marino) */
body.mod-reportes { --acento: #6d4fb0; --acento-txt: #fff; }     /* púrpura */

.barra { background: #1e3a5f; color: #fff; padding: 1rem 2rem; border-bottom: 4px solid var(--acento); }
.barra h1 { font-size: 1.25rem; }
.contenido { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }

.tabla { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tabla th, .tabla td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.tabla th { background: var(--acento); color: var(--acento-txt); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
/* Rayado tipo cebra: un renglón sí y otro no, para seguir la fila completa de un vistazo. */
.tabla tbody tr:nth-child(even) td { background: #f3f5f8; }
/* El hover va después y con la misma especificidad que el cebra, para que gane siempre. */
.tabla tbody tr:hover td { background: #eef2f7; }

.barra { display: flex; justify-content: space-between; align-items: center; }
.usuario-barra { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.btn-salir { background: rgba(255,255,255,0.15); color: #fff; border: none; padding: 0.4rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.btn-salir:hover { background: rgba(255,255,255,0.25); }

.form-login { max-width: 360px; margin: 3rem auto; background: #fff; padding: 2rem; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.form-login label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; font-weight: 600; }
.form-login input { width: 100%; padding: 0.6rem; margin-bottom: 1rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
.btn { background: var(--acento); color: var(--acento-txt); border: none; padding: 0.7rem 1.2rem; border-radius: 6px; cursor: pointer; font-size: 1rem; width: 100%; }
.btn:hover { filter: brightness(0.92); }
.error { background: #fee2e2; color: #b91c1c; padding: 0.7rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }

.menu { background: #2a4d7a; padding: 0.6rem 2rem; display: flex; gap: 1.5rem; }
.menu a { color: #dbe4f0; text-decoration: none; font-size: 0.9rem; padding-bottom: 0.15rem; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; }
.menu a.active { color: #fff; border-bottom-color: var(--acento); }

.tarjetas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tarjeta { flex: 1; min-width: 200px; background: #fff; padding: 1.5rem; border-radius: 10px; text-decoration: none; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.1s; }
.tarjeta:hover { transform: translateY(-2px); }
.tarjeta h3 { margin-bottom: 0.4rem; }
.tarjeta p { font-size: 0.9rem; color: #555; }

.encabezado-seccion { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 3px solid var(--acento); padding-bottom: 0.6rem; }
.encabezado-seccion h2 { border-left: 6px solid var(--acento); padding-left: 0.6rem; line-height: 1.1; }
/* Títulos de sección sueltos (reportes, formularios) también llevan la barra de
   acento, para que el color del módulo se sienta también fuera de las tablas. */
.contenido > h2 { border-left: 6px solid var(--acento); padding-left: 0.6rem; line-height: 1.1; margin-bottom: 1rem; }
.btn-inline { width: auto; display: inline-block; text-decoration: none; }

.formulario { max-width: 480px; background: #fff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.formulario label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.formulario input { width: 100%; padding: 0.6rem; margin-bottom: 1rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
.form-botones { display: flex; gap: 1rem; align-items: center; }
.btn-cancelar { color: #666; text-decoration: none; font-size: 0.9rem; }

/* La celda se mantiene como table-cell (no flex) para que alinee igual que las
   demás columnas cuando el renglón crece a varias líneas. Los enlaces/botón van
   en una sola línea con inline-block y separación por gap horizontal. */
.acciones { white-space: nowrap; }
.acciones a, .acciones form, .acciones .link-rojo { display: inline-block; vertical-align: middle; }
.acciones a { color: #1e3a5f; text-decoration: none; font-size: 0.9rem; }
.acciones form { margin: 0; }
.acciones > * + * { margin-left: 1rem; }
.link-rojo { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 0.9rem; padding: 0; }
.link-rojo:hover { text-decoration: underline; }

.formulario select { width: 100%; padding: 0.6rem; margin-bottom: 1rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; background: #fff; }
.fila-doble { display: flex; gap: 1rem; }
.fila-doble > div { flex: 1; }
.total-preview { background: #eef2f7; padding: 0.8rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 1rem; }
.total-preview strong { color: #1e3a5f; font-size: 1.15rem; }
.tarjeta-destacada { background: #1e3a5f; color: #fff; }
.tarjeta-destacada p { color: #dbe4f0; }
.aviso { background: #fef3c7; color: #92400e; padding: 1rem; border-radius: 8px; }

.checkbox-lista { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.8rem; }
.checkbox-item { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.95rem; }
.checkbox-item input { width: auto; margin: 0; }
.nota { font-size: 0.9rem; color: #92400e; }

/* El desplegable de maestros ocupa espacio real en el formulario (nada de
   position:absolute), de modo que al abrirlo empuja los botones Guardar y
   Cancelar hacia abajo en lugar de taparlos. */
.maestros-selector { margin-bottom: 1rem; }
.maestros-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.maestro-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: #eef2f7; color: #1e3a5f; border-radius: 999px; padding: 0.2rem 0.4rem 0.2rem 0.7rem; font-size: 0.85rem; }
.maestro-chip-quitar { background: none; border: none; cursor: pointer; color: #1e3a5f; font-size: 0.8rem; line-height: 1; padding: 0.15rem; }
.maestro-chip-quitar:hover { color: #b91c1c; }
.maestros-desplegable { border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.maestros-resumen { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.6rem; font-size: 0.95rem; color: #1e3a5f; user-select: none; list-style: none; }
.maestros-resumen::-webkit-details-marker { display: none; }
.maestros-resumen::before { content: '▸'; font-size: 0.8rem; transition: transform 0.15s ease; }
.maestros-desplegable[open] .maestros-resumen::before { transform: rotate(90deg); }
.maestros-desplegable[open] .maestros-resumen { border-bottom: 1px solid #e5e7eb; }
.maestros-resumen-texto { font-weight: 600; }
.maestros-conteo { color: #6b7280; font-size: 0.85rem; }
.maestros-lista { max-height: 260px; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.maestros-lista .checkbox-item { padding: 0.25rem 0.3rem; border-radius: 4px; }
.maestros-lista .checkbox-item:hover { background: #f3f4f6; }
.formulario-ancho { max-width: 640px; }
.linea-libro { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; align-items: center; }
.linea-libro select { flex: 1; margin-bottom: 0; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.quitar-linea { background: #fee2e2; color: #b91c1c; border: none; border-radius: 6px; width: 38px; height: 40px; cursor: pointer; }
.quitar-linea:hover { background: #fecaca; }
.btn-secundario { background: #eef2f7; color: #1e3a5f; border: 1px dashed #9db4cf; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; margin-bottom: 1rem; }
.btn-secundario:hover { background: #e2e9f2; }

.ficha { background:#fff; padding:1.2rem 1.5rem; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.1); margin-bottom:1.5rem; }
.ficha p { margin-bottom:.4rem; font-size:.95rem; }
.aviso-correccion { background:#e0f2fe; color:#075985; padding:.9rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.92rem; }
.balance-box { background:#f8fafc; border:1px solid #e2e8f0; padding:1rem; border-radius:8px; margin-bottom:1rem; font-size:1rem; line-height:1.6; }
.cobrar { color:#b45309; font-size:1.15rem; }
.devolver { color:#15803d; font-size:1.15rem; }

.filtro-fechas { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; background:#fff; padding:1rem 1.2rem; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.1); margin-bottom:1.5rem; }
.filtro-fechas label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.3rem; }
.filtro-fechas input { padding:.5rem; border:1px solid #d1d5db; border-radius:6px; }
.nota-info { font-size:.88rem; color:#555; margin-bottom:1rem; }
.tabla tfoot td { background:#f1f5f9; }

@media print {
  .barra, .menu, .no-print, .btn, .btn-secundario, .btn-cancelar { display:none !important; }
  body { background:#fff; }
  .contenido { margin:0; max-width:100%; }
}

.barra-busqueda { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; background:#fff; padding:.8rem 1rem; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.barra-busqueda input { flex:1; padding:.6rem; border:1px solid #d1d5db; border-radius:6px; font-size:1rem; }
.barra-busqueda select { padding:.6rem; border:1px solid #d1d5db; border-radius:6px; background:#fff; font-size:1rem; max-width:260px; }
.filtro-fechas select { padding:.5rem; border:1px solid #d1d5db; border-radius:6px; background:#fff; }
.stock-negativo { color:#b91c1c; font-weight:600; }

.filtro-libros { flex: 1 1 100%; }
.filtro-editorial select { min-width: 220px; }
.checkbox-libros { max-height: 160px; overflow-y: auto; flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; }
.checkbox-libros .checkbox-item { width: auto; }
.filtro-botones { display: flex; gap: 1rem; align-items: center; flex: 1 1 100%; }

.formulario textarea { width:100%; padding:.6rem; border:1px solid #d1d5db; border-radius:6px; font-size:1rem; font-family:inherit; margin-bottom:1rem; resize:vertical; }
.ticket-box { background:#f8fafc; border:1px solid #e2e8f0; padding:1rem; border-radius:8px; margin-bottom:1rem; }
.ticket-box input[type="email"] { margin-top:.6rem; padding:.6rem; border:1px solid #d1d5db; border-radius:6px; width:100%; }
.aviso-exito { background:#dcfce7; color:#166534; padding:.9rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.92rem; }

/* Paginación de listados */
.paginacion { display:flex; gap:.4rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:1.2rem; }
.paginacion a, .paginacion .pag-actual, .paginacion .ellipsis {
  min-width:38px; height:38px; padding:0 .6rem; display:inline-flex; align-items:center;
  justify-content:center; border-radius:8px; font-size:.9rem; text-decoration:none; }
.paginacion a { background:#fff; color:#1e3a5f; border:1px solid #e5e7eb; }
.paginacion a:hover { border-color:var(--acento); }
.paginacion .pag-actual { background:var(--acento); color:var(--acento-txt); font-weight:600; }
.paginacion .ellipsis { color:#9ca3af; }

/* ── Dashboard (panel principal) ────────────────────────────────────────────*/
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.2rem 0; }
.kpi { background:#fff; border-radius:12px; padding:1.1rem 1.2rem; box-shadow:0 1px 3px rgba(0,0,0,.1);
  border-left:5px solid var(--acento); display:flex; flex-direction:column; gap:.15rem; }
.kpi-label { font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.4px; }
.kpi-valor { font-size:1.7rem; font-weight:700; color:#1e3a5f; line-height:1.1; }
.kpi-sub { font-size:.82rem; color:#9ca3af; }

.paneles { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.2rem; margin-bottom:1.2rem; }
.panel { background:#fff; border-radius:12px; padding:1.1rem 1.2rem; box-shadow:0 1px 3px rgba(0,0,0,.1); margin-bottom:1.2rem; }
.panel-ancho { grid-column:1 / -1; }
.panel-titulo { font-size:.95rem; color:#374151; margin-bottom:.8rem; }
.panel-lienzo { position:relative; height:260px; }

/* ── Existencias por libro (alerta de reposición) ── */
.inv-leyenda { font-size:.82rem; color:#6b7280; margin:-.3rem 0 1rem; }
.inv-rojo { color:#dc2626; font-weight:600; }
.inv-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }
.inv-oculto { display:none; }
.inv-oculto.inv-mostrar { display:block; }
.inv-cab { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.3rem; }
.inv-titulo { font-size:.9rem; color:#374151; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-nums { font-size:.8rem; color:#9ca3af; white-space:nowrap; }
.inv-barra { height:10px; background:#eef1f4; border-radius:6px; overflow:hidden; }
.inv-relleno { height:100%; background:#2fb5c9; border-radius:6px; transition:width .3s; }
/* Bajo el 20%: contorno y barra en rojo — preventiva para pedir a la editorial */
.inv-item--alerta .inv-relleno { background:#dc2626; }
.inv-item--alerta .inv-barra { box-shadow:0 0 0 2px #dc2626; }
.inv-item--alerta .inv-nums { color:#dc2626; font-weight:600; }
.inv-vermas { margin-top:1rem; background:none; border:1px solid #cbd5e1; color:#374151;
  border-radius:8px; padding:.45rem .9rem; font-size:.85rem; cursor:pointer; }
.inv-vermas:hover { background:#f3f4f6; }

/* Reporte de maestros: desglose de cada libro debajo del maestro */
.fila-maestro td { background:#eef2f7; border-top:2px solid #cbd5e1; }
.fila-libro td:first-child { padding-left:2rem; color:#475569; }
.fila-libro td { font-size:.92rem; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — celulares y tablets
   El sitio se diseñó a 900 px fijos; abajo está todo lo que lo adapta a
   pantallas chicas. Dos piezas clave:
   1) .tabla-envoltura — contenedor con scroll horizontal propio, para que una
      tabla ancha se deslice dentro de su caja en vez de desbordar la página
      entera (que es lo que provocaba el "scroll lateral" en el celular).
   2) .tabla-cards — en pantallas chicas los listados largos dejan de ser tabla
      y se vuelven tarjetas, una por registro, usando el texto de data-etiqueta
      de cada celda como rótulo. Los reportes no usan esto: se leen y se
      imprimen como rejilla, así que ahí se prefiere el scroll horizontal.
   ══════════════════════════════════════════════════════════════════════════ */

.tabla-envoltura { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 900px) {
  /* Debajo del ancho de diseño la tabla conserva un mínimo legible y se
     desliza dentro de su envoltura. */
  .tabla-envoltura .tabla { min-width: 620px; }
  /* Tablas de pocas columnas: caben sin deslizar. */
  .tabla-envoltura.angosta .tabla { min-width: 0; }
}

@media (max-width: 768px) {
  .barra { padding: .75rem 1rem; gap: .75rem; }
  .barra h1 { font-size: 1.05rem; line-height: 1.2; }
  .usuario-barra { gap: .6rem; font-size: .82rem; }
  .usuario-barra span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* El menú no se parte en dos renglones: se desliza de lado, como las
     pestañas de una app. */
  .menu { padding: .5rem 1rem; gap: 1.2rem; overflow-x: auto; flex-wrap: nowrap;
          -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { flex: 0 0 auto; white-space: nowrap; padding: .35rem 0; }

  .contenido { margin: 1.2rem auto; padding: 0 .8rem; }
  .encabezado-seccion { flex-wrap: wrap; gap: .6rem; }
  .encabezado-seccion h2 { font-size: 1.25rem; }
  .contenido > h2 { font-size: 1.25rem; }

  /* Filtros y búsqueda en columna: cada control a todo el ancho y con letra de
     16 px, que es lo que evita que iOS haga zoom al tocar el campo. */
  .filtro-fechas, .barra-busqueda { flex-direction: column; align-items: stretch; padding: .9rem 1rem; }
  .filtro-fechas > div, .filtro-botones { width: 100%; }
  .filtro-fechas input, .filtro-fechas select,
  .barra-busqueda input, .barra-busqueda select { width: 100%; max-width: none; font-size: 1rem; }
  .barra-busqueda input[style] { max-width: none !important; }
  .filtro-editorial select { min-width: 0; }
  .filtro-botones { flex-wrap: wrap; gap: .8rem; }
  .filtro-botones .btn, .filtro-botones .btn-secundario { margin-bottom: 0; }

  .formulario, .formulario-ancho { max-width: 100%; padding: 1.1rem; }
  .form-botones { flex-wrap: wrap; gap: .8rem; }
  .form-botones .btn { flex: 1 1 auto; }
  .btn, .btn-secundario, .btn-salir { min-height: 44px; }
  .btn-cancelar, .acciones a, .link-rojo { display: inline-block; padding: .4rem 0; }

  .tabla th, .tabla td { padding: .6rem .7rem; }

  /* Paneles y KPIs del dashboard: minmax con min() para que la columna nunca
     pida más ancho del que hay y la rejilla no desborde. */
  .kpis { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .8rem; }
  .paneles { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
  .panel, .kpi { padding: 1rem; }
  .panel-lienzo { height: 230px; }
  .kpi-valor { font-size: 1.45rem; }
  .ficha { padding: 1rem 1.1rem; }
}

@media (max-width: 640px) {
  /* Listados operativos: una tarjeta por registro en lugar de tabla. */
  .tabla-envoltura.tabla-cards { overflow-x: visible; }
  .tabla-cards .tabla { min-width: 0; box-shadow: none; background: transparent; }
  .tabla-cards .tabla,
  .tabla-cards tbody,
  .tabla-cards tbody tr,
  .tabla-cards tbody td { display: block; width: 100%; }
  .tabla-cards thead { display: none; }
  .tabla-cards tbody tr { display: flex; flex-direction: column; background: #fff; border-radius: 10px;
                          border-left: 4px solid var(--acento); box-shadow: 0 1px 3px rgba(0,0,0,.1);
                          margin-bottom: .8rem; overflow: hidden; }
  /* El cebra y el hover pintan el fondo de la celda; dentro de la tarjeta
     estorban, así que se neutralizan. */
  .tabla-cards tbody tr:nth-child(even) td,
  .tabla-cards tbody tr:hover td { background: transparent; }
  .tabla-cards tbody td { display: flex; justify-content: space-between; align-items: baseline;
                          gap: 1rem; text-align: right; padding: .55rem .9rem;
                          border-bottom: 1px solid #f1f3f6; }
  .tabla-cards tbody td:last-child { border-bottom: none; }
  .tabla-cards tbody td:empty { display: none; }
  .tabla-cards tbody td::before { content: attr(data-etiqueta); flex: 0 0 auto; text-align: left;
                                  font-size: .72rem; font-weight: 700; letter-spacing: .4px;
                                  text-transform: uppercase; color: #6b7280; }
  /* La celda marcada como título encabeza la tarjeta (order:-1), sin rótulo y
     más grande, aunque en la tabla de escritorio no sea la primera columna. */
  .tabla-cards tbody td.celda-titulo { order: -1; text-align: left; font-weight: 600; font-size: 1rem;
                                       background: #f7f9fb; padding: .7rem .9rem; }
  .tabla-cards tbody td.celda-titulo::before { content: none; }
  /* Acciones al pie de la tarjeta, separadas y con área tocable amplia. */
  .tabla-cards tbody td.acciones { justify-content: flex-end; gap: 1.4rem; padding: .5rem .9rem .7rem; }
  .tabla-cards tbody td.acciones::before { content: none; }
  .tabla-cards tbody td.acciones a, .tabla-cards tbody td.acciones .link-rojo { padding: .45rem 0; font-size: .95rem; }
  .tabla-cards tbody td.acciones > * + * { margin-left: 0; }

  .tarjeta { min-width: 100%; }
  .fila-doble { flex-direction: column; gap: 0; }
  .panel-lienzo { height: 200px; }
  .form-login { margin: 1.5rem auto; padding: 1.5rem; }
  .paginacion { gap: .3rem; }
  .paginacion a, .paginacion .pag-actual, .paginacion .ellipsis { min-width: 40px; height: 40px; }
}

@media (max-width: 400px) {
  .barra h1 { font-size: .95rem; }
  .contenido { padding: 0 .6rem; }
  .kpi-valor { font-size: 1.3rem; }
  .tabla-cards tbody td { padding: .5rem .7rem; }
}

/* En el desglose del reporte de maestros la sangría del libro se reduce en
   pantalla chica, donde cada píxel de ancho cuenta. */
@media (max-width: 640px) {
  .fila-libro td:first-child { padding-left: 1.1rem; }
}