/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
    background-color: #b8b8b8; /* Fondo neutro para un look profesional */
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.modal {
     z-index: 1060 !important;
    backdrop-filter: blur(3px);
}

.modal-content {
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.modal-dialog-scrollable {
    max-height: 80vh;
}

/* Contenedor central */
.container {
     margin: 30px 0;            /* Solo margen vertical */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 100%;
}

/* Títulos */
h1 {
    text-align: center;
    color: #34495e;
    margin-bottom: 20px; /* Se reduce el espacio inferior */
}

/* Tabla */
table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px; /* Espaciado interno reducido */
    text-align: left;
}

table img {
  width: 50px; /* por ejemplo, 80 píxeles de ancho */
  height: 50px;
  display: block; /* para evitar espacios extra abajo por defecto en imágenes inline */
}

.principe {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  height: 100px;           /* o el alto que necesites */
  display: flex; 
  gap: 10px
}

th {
    background-color: #3498db;
    color: white;
}

/* Botón para regresar */
.btn-regresar {
    background-color: #3498db;
    color: white;
    padding: 14px 8px;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px; /* Menor margen inferior */
    display: inline-block;
}

.btn-regresar:hover {
    background-color: #27ae60;
}

    /* Estilos para el modal */
   



    .usuario-item {
        margin: 10px 0;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

.btn-close {
    background: #f44336;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.acciones-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Estilos para todos los botones de acciones */
.acciones-container .btn-users,
.acciones-container .btn-warning,
.acciones-container .editar-btn {
  background-color: #3498db;
    padding: 5px 8px;
    font-size: 12px;
    margin: 0;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    flex: 1 1 auto; /* Hace que los botones crezcan igual */
    min-width: 100px; /* Ancho mínimo consistente */
   
}

#jsonCountModal .modal-content {
  width: 300px;
  text-align: center;
}

.btn-users:hover { background: #45a049; }
.btn-close:hover { background: #da190b; }

/* Botones generales */
.btn {
    background-color: #2980b9;
    color: white;
    padding: 16px 16px; /* Ajuste de padding para un botón más compacto */
    border: none;
    text-decoration: none; 
    white-space: nowrap;
    border-radius: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    display: flex; 
    gap: 10px;
}

.modal {
  /* siga cubriendo toda la pantalla */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  /* para permitir scroll si el contenido es muy alto */
  overflow-y: auto;
  z-index: 1000;
}


/* centra siempre el .modal-content dentro de .modal */
.modal-content {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  /* mantiene tu estilo anterior */
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;      /* evita que desborde la ventana */
  overflow-y: auto;      /* scroll interno si hace falta */
}

.modal-content .close {
  position: absolute;
  top: 10px; right: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}

.btn:hover {
    background-color: #27ae60;
}

.btn-add {
    background-color: #2980b9;
    color: white;
    padding: 16px 16px; /* Ajuste de padding para un botón más compacto */
    border: none;
    text-decoration: none; 
    white-space: nowrap;
    border-radius: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    display: flex; 
    gap: 10px;
}

/* El overlay cubre toda la pantalla */
.custom-modal {
  position: fixed;
  inset: 0;                     /* top/right/bottom/left = 0 */
  background: rgba(0,0,0,0.5);
  z-index: 2000;

  /* forzar que el body no haga scroll */
  overflow: hidden;
}

/* El contenido se “pega” al 10% desde arriba y se centra horizontalmente */
.custom-modal .modal-content {
  position: absolute;
  top: 10%;                     /* deja el 10% de espacio sobre el modal */
  left: 50%;
  transform: translateX(-50%);
  
  /* tamaño y scroll interno */
  max-height: 80vh;             /* nunca más alto que 80% de la pantalla */
  overflow-y: auto;             /* scroll si el contenido excede esa altura */

  /* tus estilos */
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 600px;  
  padding: 1.5rem;
  box-sizing: border-box;
}

.guarda-btn {
    background-color: #2980b9;
    color: white;
    padding: 16px 16px; /* Ajuste de padding para un botón más compacto */
    border: none;
    text-decoration: none; 
    white-space: nowrap;
    border-radius: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    display: flex; 
    gap: 10px;
}

.btn:hover {
    background-color: #27ae60;
}

/* Grupos de formulario */
.form-group {
    margin-bottom: 10px; /* Espaciado reducido entre campos */
}

.form-group label {
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc; /* Borde más sutil */
    border-radius: 4px;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}

/* Barra de búsqueda */
.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.search-bar input[type="text"] {
    width: 70%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.search-bar button,
.search-bar .btn {
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-bar button:hover,
.search-bar .btn:hover {
    background-color: #2980b9;
}

/* Responsive Web Design */
@media (max-width: 768px) {
    /* ---------------------------------------------------
       1.1. Centrar los botones superiores (envoltorio)
       ---------------------------------------------------
       Suponiendo que tus botones principales están envueltos
       en un contenedor con clase .botones-top, 
       hacemos que se apilen y se centren */
    .botones-top {
        display: flex;
        flex-direction: column;
        align-items: center;   /* centra horizontal */
        gap: 10px;             /* espacio vertical entre botones */
        margin-bottom: 15px;   /* separación abajo */
    }

    /* Si no tienes todavía .botones-top, envuelve así en tu HTML:
       <div class="botones-top">
         <a href="..." class="btn-regresar">Regresar a principal</a>
         <button class="btn-add">Agregar Empresa</button>
         <!-- otros botones -->
       </div>
    */

    /* ---------------------------------------------------
       1.2. Evitar que el buscador quede encima de los botones
       --------------------------------------------------- */
    .principe {
        flex-direction: column;  /* ya tenías esto */
                /* separa del bloque de botones */
    }
    .search-bar input[type="text"] {
        width: 100%;

    }
    .search-bar button,
    .search-bar .btn {
        width: 100%;
    }

    /* ---------------------------------------------------
       1.3. Tabla más compacta: info a la izquierda, acciones a la derecha
       --------------------------------------------------- */
    /* Aplica un pequeño padding y fuente reducida */
    table,
    th,
    td {
        font-size: 14px;
        padding: 8px 10px;
    }
    table {
        overflow-x: auto;
    }

    .tabla-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* para scroll suave en iOS */
}

/* Opcional: si quieres que la tabla no se ajuste al 100% sino mantenga un mínimo */
.tabla-wrapper table {
  width: 100%;
  min-width: 600px; /* Ajusta según el nº de columnas que tengas */
  border-collapse: collapse;
}

/* Ejemplo de estilo para th/td, opcional */
.tabla-wrapper th,
.tabla-wrapper td {
  text-align: left;
  white-space: nowrap; /* evita quiebre de línea */
}

    /* Cada celda de la fila será un flex que distribuya
       el bloque de datos (izquierda) y el bloque de botones (derecha) */
    /* Asume que tu <td> de datos tiene clase .td-info y
       tu <td> de acciones tiene clase .td-acciones */
    .td-info,
    .td-acciones {
        display: flex;
        align-items: center;
    }

    /* Dentro de .td-info, apilamos los datos en vertical
       (por ejemplo, con varios <div class="info-item">) */
    .td-info {
        flex: 1;             /* ocupa todo el espacio restante */
        flex-direction: column;
        gap: 4px;            /* espacio muy pequeño entre líneas */
    }
    .td-info .info-item {
        display: flex;
        gap: 6px;
        font-size: 0.9rem;
    }
    .td-info .info-label {
        font-weight: bold;
        width: 80px;         /* ancho fijo para etiquetas */
        flex-shrink: 0;
    }
    .td-info .info-value {
        flex: 1;
        color: #555;
    }

    /* El contenedor de botones de acciones en dos columnas */
    .td-acciones {
        flex-shrink: 0;       /* que no se comprima en exceso */
        margin-left: 10px;    /* un pequeño espacio respecto a la info */
    }
    .acciones-container.dos-columnas {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        justify-items: flex-end; /* alineamos las columnas de botones a la derecha */
        width: 100%;
    }
    .acciones-container.dos-columnas button {
        width: 100%;
        padding: 6px 8px;
        font-size: 0.85rem;
    }
}