/* RESET BÁSICO */
* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  background: #f2f2f2;
}

/* BARRA SUPERIOR */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: rgba(60, 60, 60, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* MENÚ */
.menu a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 18px;
  font-size: 14px;
  font-weight: 500;
}

.menu a:hover {
  text-decoration: underline;
}

.menu a.active {
  font-weight: bold;
}

.menu a.salir {
  color: #ffcccc;
}

html, body {
  height: 100%;
  margin: 0;
  background: transparent;
}

/* CONTENEDOR GENERAL (FONDO) */
.contenido {
  min-height: calc(100vh - 48px);
  margin-top: 48px;
  padding: 48px 0;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0.65)
    ),
    url("../images/fondo-renodial_1.png") no-repeat center center;

  background-size: cover;
}

.logo-renodial {
  position: absolute;
  top: 140px;
  left: 90px;
  width: 220px;              /* mismo ancho del logo */
  text-align: center;
}

.logo-renodial img {
  width: 220px; /* más compacto */
  height: auto;
  opacity: 0.95;
}

/* Texto superior */
.logo-renodial .tagline.top {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #2f3a40;
  letter-spacing: 0.5px;
}

/* Texto inferior */
.logo-renodial .tagline.bottom {
  margin-top: 4px;
  font-size: 13px;
  color: #5a6a75;
  letter-spacing: 0.3px;
}

.logo-oriondev {
  position: fixed;
  bottom: 20px;
  right: 25px;
  opacity: 0.75;
  z-index: 900;
}

.logo-oriondev img {
  width: 140px; /* un pelito más */
  height: auto;
}

/* MÓDULO */
.modulo {
  background: #ffffff;
  border-radius: 6px;
  padding: 25px;
  max-width: 1100px;
}

/* HEADER DEL MÓDULO */
.modulo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modulo-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2f3a40;
}

/* ACCIONES */
.acciones {
  display: flex;
  gap: 10px;
}

.acciones input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-primary {
  background: #2aa3b7;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #238b9c;
}

/* TABLA */
.tabla-container {
  overflow-x: auto;
}

/* .tabla {
  width: 100%;
  border-collapse: collapse;
} */

.tabla th {
  background: #f4f6f8;
  text-align: left;
  padding: 10px;
  font-size: 13px;
}

.tabla td {
  padding: 10px;
  border-top: 1px solid #e0e0e0;
  font-size: 13px;
}

/* STOCK */
.tabla td.ok {
  color: #2e7d32;
  font-weight: bold;
}

/* BOTÓN LINK */
.btn-link {
  background: none;
  border: none;
  color: #2aa3b7;
  cursor: pointer;
  font-size: 13px;
}

.btn-link:hover {
  text-decoration: underline;
}

/* ===============================
   LISTADO DE ARTÍCULOS (RENODIAL)
   =============================== */

/* Card contenedora */




/* Acciones header */
.acciones-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input-buscar {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Botón primario */
.btn-primary {
  background: #1aa3a3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #178f8f;
}

/* ===============================
   TABLA
   =============================== */

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.tabla thead th {
  background: #f5f6f7;
  text-align: left;
  padding: 10px;
  font-weight: 600;
  color: #444;
}

.tabla tbody td {
  padding: 10px;
  border-top: 1px solid #e6e6e6;
  vertical-align: middle;
}

/* ===============================
   BADGES DE ESTADO
   =============================== */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Estados */
.badge-ok {
  background: #e6f4ea;
  color: #2e7d32;
}

.badge-bajo {
  background: #fff4e5;
  color: #b26a00;
}

.badge-critico {
  background: #fdecea;
  color: #c62828;
}

/* ===============================
   ACCIONES
   =============================== */

.link-editar {
  color: #1aa3a3;
  font-weight: 500;
  text-decoration: none;
}

.link-editar:hover {
  text-decoration: underline;
}

.oriondev-footer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  opacity: 0.9;
}


html, body {
  height: 100%;
  overflow: auto;
}

.oriondev-footer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  opacity: 0.9;
}



/* VENTANA CENTRADA */
.contenido-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* VENTANA BLANCA */
.modulo {
  background: #ffffff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}




.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  padding: 24px 28px;
}

html, body {
  background: transparent !important;
  border-radius: 0 !important;
}

/* ===============================
   FOOTER ORIONDEV (ÚNICO)
   =============================== */

   .oriondev-footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    opacity: 1;
    pointer-events: none;
  }
  
  /* Logo OrionDev en el footer (esquina inferior derecha) */
.oriondev-footer img {
  width: 110px;      /* tamaño del logo */
  height: auto;      /* mantiene proporción */
  display: block;    /* evita espacios raros inline */
}

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: #5f5f5f;
  }
  
  .brand-renodial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .brand-renodial img {
    height: 64px;
  }
  
  .brand-renodial span {
    font-size: 13px;
    color: #fff;
    margin-top: 4px;
  }

  .contenido {
    position: relative;
  }
  
  /* CONTENEDOR LOGO + TEXTO */
  .renodial-hero {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  
  /* LOGO MÁS CHICO */
  .renodial-hero img {
    height: 110px;   /* puedes bajar a 100 si quieres */
    width: auto;
  }
  
  /* TEXTO */
  .renodial-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  
  .renodial-title {
    font-size: 26px;
    font-weight: 700;
    color: #111;
  }
  
  .renodial-subtitle {
    font-size: 14px;
    color: #333;
    max-width: 240px; /* fuerza 2 líneas */
  }

  .topbar {
    display: flex;
    justify-content: center;   /* ← centra el menú */
    align-items: center;
    padding: 14px 24px;
    background: #5f5f5f;
  }
  
  .menu {
    display: flex;
    gap: 28px;                 /* separación entre opciones */
  }

  /* BADGES DE ESTADO */
.badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.badge-ok {
  background: #e6f4ea;
  color: #1e7e34;
}

.badge-warning {
  background: #fff3cd;
  color: #856404;
}

.badge-danger {
  background: #fdecea;
  color: #b02a37;
}



/* ===============================
   MODAL GENERAL (fondo oscuro)
   =============================== */

/* Capa que cubre toda la pantalla */
.modal {
  position: fixed;              /* Fija el modal sobre toda la ventana */
  inset: 0;                     /* Top, right, bottom, left = 0 */
  background: rgba(0,0,0,0.4);  /* Fondo oscuro semi-transparente */
  display: flex;                /* Flex para centrar el contenido */
  align-items: center;          /* Centrado vertical */
  justify-content: center;      /* Centrado horizontal */
  z-index: 999;                 /* Por encima de todo */
}

/* Clase para ocultar el modal */
.modal.hidden {
  display: none;                /* No se muestra */
}


/* ===============================
   CAJA DEL MODAL
   =============================== */

/* Contenedor blanco del formulario */
.modal-box {
  background: #fff;             /* Fondo blanco */
  padding: 24px;                /* Espacio interno */
  border-radius: 12px;          /* Bordes redondeados */
  width: 520px;                 /* Ancho ideal escritorio */
  max-width: 90%;               /* Responsive en pantallas chicas */
}


/* ===============================
   FORMULARIO
   =============================== */

/* Grid del formulario (2 columnas) */
.form-grid {
  display: grid;                          /* Layout en grilla */
  grid-template-columns: 1fr 1fr;         /* Dos columnas iguales */
  gap: 12px;                              /* Espacio entre campos */
  margin-top: 16px;                      /* Separación desde el título */
}

/* Cada label contiene texto + input */
.form-grid label {
  display: flex;              /* Para apilar texto + input */
  flex-direction: column;     /* Uno debajo del otro */
  font-size: 14px;            /* Tamaño de letra */
}


/* ===============================
   BOTONES DEL MODAL
   =============================== */

/* Contenedor de botones (Guardar / Cancelar) */
.modal-actions {
  display: flex;              /* Botones en línea */
  justify-content: flex-end;  /* Alineados a la derecha */
  gap: 12px;                  /* Espacio entre botones */
  margin-top: 20px;           /* Separación del formulario */
}

/* ===============================
   FORMULARIO MODAL – LEGIBILIDAD
   =============================== */

/* Texto de los labels */
.form-grid label {
  font-size: 15px;      /* antes 14px */
  font-weight: 500;     /* un poco más claro */
}

/* Campos de entrada */
.form-grid input {
  font-size: 16px;      /* CLAVE: tamaño cómodo de lectura */
  padding: 10px 12px;   /* más aire interno */
  border-radius: 6px;
}

/* Placeholder (opcional, más suave) */
.form-grid input::placeholder {
  font-size: 15px;
  color: #999;
}

/* ===============================
   INPUTS – ESTILO CLÍNICO PLANO
   =============================== */

   .form-grid input {
    font-size: 15px;              /* más contenido, menos grande */
    padding: 8px 10px;            /* menos alto */
    border-radius: 4px;           /* casi plano */
    border: 1px solid #cfcfcf;    /* borde suave */
    box-shadow: none;             /* SIN relieve */
    outline: none;
  }
  
  /* Al enfocar (focus) */
  .form-grid input:focus {
    border-color: #1aa7a1;        /* color Renodial */
    box-shadow: none;             /* sigue plano */
  }
  
  /* Inputs tipo number (quitar look feo del navegador) */
  .form-grid input[type="number"] {
    appearance: textfield;
  }
  
  /* Placeholder más discreto */
  .form-grid input::placeholder {
    color: #aaa;
    font-size: 14px;
  }

  /* Separación entre título del campo (label) y el input */
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px; /* ← este es el espacio mágico */
}

/* ================================
   Placeholder visible y elegante
   ================================ */

   input::placeholder {
    color: #9aa0a6;      /* gris suave */
    font-size: 14px;
    opacity: 1;          /* CLAVE */
  }

  
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px; /* espacio entre título y campo */
  }
  
  .form-field input {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .form-field input::placeholder {
    color: #9aa0a6;
    opacity: 1;
  }

  /* ================================
   FORMULARIO: Nuevo Artículo
   Controla orden, ancho y alineación
================================ */

/* Grilla del formulario */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas */
  gap: 16px 20px;                 /* espacio vertical / horizontal */
}

/* Campo normal (media fila) */
.form-field {
  display: flex;
  flex-direction: column;
}

/* Campo que ocupa toda la fila */
.form-field.full {
  grid-column: 1 / -1;
}

/* Etiquetas */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Inputs */
.form-field input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

/* Placeholder más suave */
.form-field input::placeholder {
  color: #999;
}

table {
  display: table !important;
  opacity: 1 !important;
}

tbody {
  display: table-row-group !important;
}


  /* ===============================
   RESUMEN DE STOCK – HORIZONTAL
   =============================== */

.stock-resumen {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  margin-bottom: 14px;
}

.stock-resumen span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===============================
   BOLITAS DE ESTADO (CHICAS)
   =============================== */

   .estado-dot {
    width: 12px;
    height: 12px;
    min-width: 10px;
    min-height: 10px;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    background-clip: padding-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
    line-height: 0;
}

.estado-dot.ok {
  background-color: #2ecc71;
}

.estado-dot.bajo {
  background-color: #f1c40f;
}

.estado-dot.critico {
  background-color: #e74c3c;
}

/* ================================
   MODAL EDITAR ARTÍCULO
   Capa oscura + centrado del modal
   ================================ */

/* Contenedor general del modal (fondo oscuro) */
.modal {
  position: fixed;              /* Se queda fijo sobre toda la pantalla */
  inset: 0;                     /* top, right, bottom, left = 0 */
  background: rgba(0,0,0,0.4);  /* Oscurece el fondo */
  display: flex;                /* Permite centrar el contenido */
  align-items: center;          /* Centrado vertical */
  justify-content: center;      /* Centrado horizontal */
  z-index: 1000;                /* Por encima del resto del sistema */
}

/* Estado oculto del modal */
.modal.hidden {
  display: none;                /* No se muestra */
}

/* Caja blanca del contenido del modal */
.modal-content {
  background: #fff;             /* Fondo blanco */
  padding: 20px;                /* Espaciado interno */
  border-radius: 8px;           /* Bordes redondeados */
  width: 360px;                 /* Ancho fijo cómodo */
}

/* Etiquetas de los campos */
.modal-content label {
  display: block;               /* Cada label en su propia línea */
  margin-top: 10px;             /* Separación superior */
}

/* Inputs del formulario */
.modal-content input {
  width: 100%;                  /* Ocupan todo el ancho */
  padding: 6px;                 /* Espaciado interno */
  margin-top: 4px;              /* Separación del label */
}

/* Contenedor de botones (Guardar / Cancelar) */
.modal-actions {
  margin-top: 16px;             /* Separación del formulario */
  display: flex;                /* Botones en línea */
  justify-content: flex-end;    /* A la derecha */
  gap: 10px;                    /* Espacio entre botones */
}

.stock-resumen-horizontal span {
  padding: 0 14px;
  border-right: 1px solid #ccc;
}

.stock-resumen-horizontal span:last-child {
  border-right: none;
}

.stock-resumen-horizontal span {
  display: inline-flex;
  align-items: center;
}

.btn-secondary {
  background: #e5e7eb;
  color: #333;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #d1d5db;
}

/* === FIX DEFINITIVO INDICADORES REDONDOS === */
.estado-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

.estado-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* === COLORES SUAVES PARA MOVIMIENTOS DE STOCK === */
.fila-entrada {
  background-color: #eaf7ef; /* verde muy suave */
}

.fila-salida {
  background-color: #fdeeee; /* rojo muy suave */
}

.fila-ajuste {
  background-color: #fff7e6; /* amarillo suave */
}

/* Opcional: mejor lectura */
.tabla tbody tr:hover {
  filter: brightness(0.98);
}



/* Contenedor real del contenido (artículos / movimientos) */
/* Evita el vacío gigante inferior */
.contenido {
  align-items: flex-start;
}

/* Card principal de módulos (Artículos / Movimientos) */
.modulo-card {
  width: 100%;
  max-width: 1100px;      /* 👈 más angosto */
  padding: 24px 28px;
  margin: 40px auto;

  background: rgba(255, 255, 255, 0.92); /* 👈 deja ver el fondo */
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  min-height: auto;
}

#tablaMovimientos {
  width: auto !important;
  max-width: 1000px;
  margin: 0 auto;
}


/* ===== TABLA MOVIMIENTOS (MISMO LOOK QUE ARTÍCULOS) ===== */
.movimientos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.movimientos-tabla thead th {
  background: #f3f4f6;
  text-align: left;
  padding: 12px 10px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}

.movimientos-tabla tbody td {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.movimientos-tabla tbody tr:hover {
  background: #f9fafb;
}

/* Colores por tipo */
.movimientos-tabla .fila-ajuste {
  background: #fff7ed;
}

.movimientos-tabla .fila-entrada {
  background: #ecfdf5;
}

.movimientos-tabla .fila-salida {
  background: #fef2f2;
}

/* ============================= */
/* 🎨 COLORES MOVIMIENTOS STOCK */
/* ============================= */



/* Hover elegante */
.movimientos-tabla tbody tr:hover {
  filter: brightness(0.98);
}

/* 🎨 Colores pastel por tipo de movimiento */
.movimientos-tabla tr.fila-ajuste {
  background-color: #fff6d6;
}

.movimientos-tabla tr.fila-ingreso {
  background-color: #e8f8ee;
}

.movimientos-tabla tr.fila-salida {
  background-color: #fdeaea;
}




/* La bolita */
.estado::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Colores */
.estado.ok::before { background-color: #2ecc71; }
.estado.bajo::before { background-color: #f1c40f; }
.estado.critico::before { background-color: #e74c3c; }


.estado {
  display: inline-block;
}



/* Centrar contenido de la columna Estado */
table td:nth-child(7) {
  text-align: center !important;
  vertical-align: middle;
}

/* Columna Estado: centrado real */
table th:nth-child(7),
table td:nth-child(7) {
  text-align: center !important;
  vertical-align: middle;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Inputs y selects del modal Nuevo Artículo */
#modalArticulo input,
#modalArticulo select {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 6px;
  box-sizing: border-box;
}

/* ===============================
   BOTÓN CERRAR – MÓDULO ARTÍCULOS
   =============================== */

   .btn-cerrar {
    background-color: transparent;
    color: #6b7280;              /* gris elegante */
    border: 1px solid #d1d5db;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  /* Hover: “me voy, pero con estilo” */
  .btn-cerrar:hover {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
  }
  
  /* Activo */
  .btn-cerrar:active {
    transform: scale(0.97);
  }

  .btn-cerrar {
    text-decoration: none;
  }

  .codigo-confirmado {
    color: red !important;
    font-weight: bold;
    -webkit-text-fill-color: red !important; /* ESTA ES LA CLAVE */
  }


  .tabla-container {
    max-height: 480px;     /* ajusta si quieres más/menos alto */
    overflow-y: auto;
    border: 1px solid #ddd;
  }

  .estado {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }
  
  .estado-ok {
    background-color: #2ecc71; /* verde */
  }
  
  .estado-bajo {
    background-color: #f1c40f; /* amarillo */
  }
  
  .estado-critico {
    background-color: #e74c3c; /* rojo */
  }

  .tabla thead th {
    position: sticky;
    top: 0;
    background: #f7f7f7;
    z-index: 10;
  }

  .col-categoria {
    text-transform: none !important;
  }
  

  /* ===== FIX DEFINITIVO MODAL NUEVO ARTÍCULO ===== */

#modalArticulo .modal-box {
  width: 520px;
  max-width: 90%;
}

#modalArticulo .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

#modalArticulo .form-field,
#modalArticulo label {
  width: 100%;
}

#modalArticulo input,
#modalArticulo select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.col-categoria,
td.col-categoria {
  width: 180px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header de tabla con mayor contraste */
.tabla thead th {
  background-color: #e9edf2;
  color: #2f3a45;
  font-weight: 600;
}


/* Columna Código: no se parte nunca */
.col-codigo {
  width: 110px;
  min-width: 110px;
  white-space: nowrap;
}

/* Columna Nombre: puede cortar pero sin romper la tabla */
.col-nombre {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

select,
td {
  text-transform: none;
}

/* Modal editar - inputs más visibles */
#modalEditar input[type="text"],
#modalEditar input[type="number"],
#modalEditar select {
    font-size: 16px;
    padding: 8px 10px;
}

/* ===== MODAL EDITAR ARTÍCULO ===== */

.modal-content {
  background: #ffffff;
  border-radius: 14px;
  padding: 28px 32px;
  width: 420px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  animation: fadeInModal 0.18s ease-out;
}

.modal-content h3 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #2f3b4a;
}

.modal-content label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  transition: all 0.15s ease;
}

.modal-content input:focus,
.modal-content select:focus {
  outline: none;
  border-color: #3aa6a1;
  box-shadow: 0 0 0 3px rgba(58,166,161,0.15);
}

.modal-content .form-field {
  margin-bottom: 16px;
}

.modal-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-primary {
  background: #3aa6a1;
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s ease;
}

.btn-primary:hover {
  background: #2f8f8a;
}

.btn-secondary {
  background: #e5e7eb;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  color: #374151;
  cursor: pointer;
}

.modal-content select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 100%;
  padding: 10px 12px;
  height: 42px;              /* 👈 fuerza misma altura que inputs */
  line-height: 1.2;
  background-color: #fff;
}


/* ========================= */
/* MODAL LOGIN OVERLAY */
/* ========================= */
.modal-login {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-login-content {
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 320px;
  text-align: center;
}

.modal-login-content input {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
}

.modal-login-content button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

/* =====================================================
   ESTILO VISUAL PARA EL MÓDULO DE ADMINISTRACIÓN
   - Crea una tarjeta blanca tipo "card"
   - Da estilo moderno a la tabla de usuarios
   - Mejora legibilidad, espaciado y efecto hover
===================================================== */

/* Contenedor tipo tarjeta blanca */
.card-admin {
  background: white; /* Fondo blanco limpio */
  padding: 25px; /* Espacio interno alrededor del contenido */
  border-radius: 12px; /* Bordes redondeados suaves */
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Sombra ligera para efecto flotante */
  margin-top: 40px; /* Separación superior */
}

/* Tabla principal de administración */
.tabla-admin {
  width: 100%; /* Ocupa todo el ancho disponible */
  border-collapse: collapse; /* Une bordes para que no se vean dobles */
  margin-top: 20px; /* Separación respecto al título */
}

/* Encabezados de la tabla */
.tabla-admin th {
  background: #f3f4f6; /* Fondo gris claro */
  text-align: left; /* Alineación izquierda */
  padding: 12px; /* Espacio interno */
  font-weight: 600; /* Texto ligeramente más grueso */
}

/* Celdas normales */
.tabla-admin td {
  padding: 12px; /* Espaciado interno */
  border-bottom: 1px solid #eee; /* Línea divisoria suave */
}

/* Efecto cuando el mouse pasa sobre una fila */
.tabla-admin tr:hover {
  background: #f9fafb; /* Cambio sutil de color al pasar el mouse */
}

/* Tarjeta Administración Usuarios - versión compacta alineada izquierda */
.card-admin.usuarios {
  width: 800px;        /* ancho fijo más corto */
  margin: 40px 0;      /* sin auto → queda alineada izquierda */
}

/* Evita que la tabla se estire completo */
.card-admin.usuarios .tabla-admin {
  width: 100%;
}

/* Ocultar cualquier elemento que tenga la clase hidden */
.hidden {
  display: none;
}

/* CENTRAR CONTENIDO REPORTES */
.contenido-reportes {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra vertical */
  align-items: center;       /* centra horizontal */
  height: 70vh;              /* ocupa alto visible */
  text-align: center;
}