/* ====== Layout general ====== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f4f6f9;
    color: #333;
    display: flex;
}

/* ====== Sidebar ====== */
.sidebar {
    width: 250px;
    background: #2c3e50;
    color: #fff;
    min-height: 100vh;
    padding: 20px;
}

.sidebar h2 {
    margin-top: 0;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin: 8px 0;
    position: relative;
}

.sidebar a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.3s;
}

.sidebar a:hover {
    background: #34495e;
}

/* ====== Submenús ====== */
.submenu {
    display: none;
    background: #34495e;
    margin-top: 5px;
    border-radius: 4px;
}

.submenu li a {
    padding-left: 25px;
    font-size: 14px;
}

.sidebar li:hover .submenu {
    display: block;
}


/* ====== Botón logout ====== */
.sidebar a[href="logout.php"] {
    margin-top: 20px;
    background: #e74c3c;
    text-align: center;
}

.sidebar a[href="logout.php"]:hover {
    background: #c0392b;
}

/* ====== Contenedor main ====== */
.main-content {
    flex: 1;
    padding: 20px;
}

header {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
    margin: 0;
    font-size: 22px;
}

header p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
}

/* ====== Tablas de panel ====== */
.accordion {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.accordion-header {
    background: #f5f5f5;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

.accordion-content {
    display: none;
    padding: 10px;
    border-top: 1px solid #ccc;
}

.sub-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.sub-table th, .sub-table td {
    border: 1px solid #ddd;
    padding: 6px;
}

.sub-table th {
    background: #eee;
}

/* ====== Tablas de solicitudes ====== */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table th, table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background: #2c3e50;
    color: #fff;
}

table tr:hover {
    background: #f1f1f1;
}

table td a {
    color: #2980b9;
    text-decoration: none;
    margin-right: 8px;
}

table td a:hover {
    text-decoration: underline;
}


/*  Botones de edicion  */
.btn-edit,
.btn-delete,
.btn-act,
.btn-creat,
.btn-view,
.btn-ins {
	display: inline-block;     /* se comportan como botones */
	text-decoration: none;     /* elimina subrayado */
    background: #3498db;       /* azul por defecto para editar */
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
	margin-right: 8px;         /* separación entre botones */
	font-size: 14px;
	transition: background 0.3s;
}

/* azul para editar */
.btn-edit:hover {
    background: #2980b9; 
}

.btn-edit:hover {
    background: #2980b9;
}

/* rojo para eliminar */
.btn-delete {
    background: #e74c3c;       
}

.btn-delete:hover {
    background: #c0392b;
}

/* Verde: Actualizar */
.btn-act {
    background: #2ecc71;
}
.btn-act:hover {
    background: #27ae60;
}

/* Naranja: Crear */
.btn-creat {
    background: #e67e22;
}
.btn-creat:hover {
    background: #d35400;
}

/* Turquesa: Visualizar */
.btn-view {
    background: #1abc9c;   /* turquesa */
}
.btn-view:hover {
    background: #16a085;   /* turquesa más oscuro */
}

/* Gris: Agregar boton */
.btn-ins {
    background: #7f8c8d;   /* gris oscuro */
}
.btn-ins:hover {
    background: #606c6d;   /* gris más profundo */
}



/* Ajuste para última acción */
.acciones a:last-child {
    margin-right: 0;
}


/* Celda de acciones */
.acciones {
    white-space: nowrap; /* evita que se rompa en varias líneas */
}

/* Botones dentro de acciones */
.acciones a {
    display: inline-block;   /* asegura que se alineen en fila */
    margin-right: 8px;       /* separación entre botones */
}

.acciones a:last-child {
    margin-right: 0;         /* quita margen al último */
}


/* ====== Fin Tablas de solicitudes ====== */


/* ====== Formularios ====== */
.formulario {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* cada label en su propia línea */
.formulario label {
    display: block;
    margin-top: 12px;
    font-weight: bold;
    color: #2c3e50;
}

/* ocupa todo el ancho disponible */
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="date"],
.formulario input[type="number"],
.formulario input[type="url"],
.formulario textarea {
    width: 100%;
    padding: 8px 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* azul al enfocar */
.formulario input:focus,
.formulario textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52,152,219,0.5);
    outline: none;
}

/* permite ajustar altura */
.formulario textarea {
    min-height: 80px;
    resize: vertical;
}

/* Tabla dentro del formulario */
.form-tabla {
    margin-top: 20px;   /* espacio entre inputs y tabla */
    margin-bottom: 20px;
}

/* Botones dentro del formulario */
.formulario button {
    margin-top: 15px;
}

/*  Botón de archivo  */
.formulario input[type="file"] {
    display: none; /* ocultamos el input nativo */
}

.btn-file {
    display: inline-block;
    background: #3498db;   /* azul */
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
	width: 10%;
	padding: 8px 10px;
}

.btn-file:hover {
    background: #2980b9;
}

/* Nombre del archivo seleccionado */
.file-name {
    margin-left: 10px;
    font-size: 13px;
    color: #555;
}
/* ====== Formularios ====== */



/* ====== Inicio Mensajes de Alerta al gaurdar Productos ====== */
.alert-success {
    background: #2ecc71;
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: bold;
}

.alert-success a {
    margin-left: 10px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.alert-success .btn-creat {
    background: #e67e22;
    color: #fff;
}

.alert-success .btn-view {
    background: #3498db;
    color: #fff;
}
/* ====== Fin Mensajes de Alerta al gaurdar Productos ====== */


/* ====== Graficos de pastel ====== */
.graficas-section { padding:20px; }
.graficas-container {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

.grafica-card {
    flex:1 1 400px;
    max-width:500px;
    background:#fff;
    padding:15px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}




/* ====== Inicio Panel oculto Notificaciones ====== */
.badge {
    background: #e74c3c;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 5px;
    font-weight: bold;
}

.barra-notificaciones {
    background: #f4f6f7;
    border: 1px solid #ccc;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
}
.barra-notificaciones h2 {
    margin: 0 0 10px;
    font-size: 16px;
}
.barra-notificaciones ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.barra-notificaciones li {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}
.notif-pendiente {
    background: #fbe9e7;
    font-weight: bold;
}
.notif-leida {
    color: #7f8c8d;
}
.btn-leer {
    background: #27ae60;
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    text-decoration: none;
    margin-left: 10px;
}
.ver-todas {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #2980b9;
    font-weight: bold;
}

/* ====== Fin Panel oculto Notificaciones ====== */



/* ====== Inicio Notificaciones Header ====== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2c3e50;
    color: #fff;
    padding: 15px;
}

.user-info h1, .user-info p {
    margin: 0;
}

.notif-dropdown {
    position: relative;
    display: inline-block;
}

.notif-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    position: relative;
}

.notif-btn #badgeNotif {
    background: #e74c3c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    top: -8px;
    right: -10px;
}

.notif-content {
    display: none;
    position: absolute;
    right: 0;
    background: #fff;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1000;
    padding: 10px;
    color: #333;
}

.notif-content li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.notif-content li.notif-pendiente {
    background: #fbe9e7;
    font-weight: bold;
}

.notif-content li.notif-leida {
    color: #7f8c8d;
}

.notif-content .ver-todas {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #2980b9;
    text-decoration: none;
}
/* ====== Fin Notificaciones Header ====== */