* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: arial;
    background-image: url('fondologin.jpg');
    /*importante este codigo para que la imagen quede perfecto*/
    background-size: cover;
}

.app-body {
    background: linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 100%); /* fondo suave */
    min-height: 100vh;
    padding-top: 70px; /* para que el navbar no tape el contenido */
}

/*Con esto, todo lo de adentro (título “Sección”, botón verde, tabla) se ve como una tarjeta sobre el fondo, no pegado al azul.*/
.body-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 28px 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    overflow-x: auto;
}
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center; /* centra verticalmente */
    margin-bottom: 10px; /* menos espacio */
    padding-right: 20px; /* aleja el botón del borde derecho */
}


/* Estilo del título */
.section-title h2 {
    margin: 0;
    margin-bottom: 4px; /* para alejar un poco del titulo principal */
    font-size: 28px;
    font-weight: 600;
}

/* Badge "Cuentas" */
.section-tag {
    background: #4b5563;
    color: white;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 18px; /* tamaño de la palabra cuentas */
    margin-left: 6px;
}



/* Botón Crear */
.btn-add {
    border-radius: 999px;
    padding: 8px 18px !important;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
}



/* Encabezado más suave */
.table > thead > tr > th {
    background: #f3f4f6 !important;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

/* Filas alternadas pero claras */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ffffff;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f9fafb;
}

/* Hover suave */
.table-hover > tbody > tr:hover {
    background-color: #eef2ff !important;
}
th.opciones-col,
td.opciones-col {
    text-align: left !important;
    min-width: 120px !important; /* ajusta el ancho que necesites */
    text-align: center;
}