/* Bordes destacados para tablas tipo dashboard */
.bordered-table {
    border: 2px solid #e0e6f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
}
.bordered-table th, .bordered-table td {
    border-bottom: 1px solid #e0e6f0;
}
.bordered-table thead th {
    border-top: none;
}
.bordered-table tbody tr:last-child td {
    border-bottom: none;
}
/* Efecto hover dinámico en filas de tabla */
.hoverable-table tbody tr:hover {
    background: #eaf2ff !important;
    box-shadow: 0 2px 12px rgba(34,49,74,0.10);
    z-index: 2;
    position: relative;
}
/* Refuerzo de visibilidad y responsividad para tablas dinámicas */
.citas-section, .clientes-section, .inventario-section, .notificaciones-section, .reportes-section, .tecnicos-section, .historial-section {
    overflow-x: auto;
    min-width: 0;
}
.citas-table, .clientes-table, .inventario-table, .notificaciones-table, .reportes-table, .tecnicos-table, .historial-table {
    min-width: 900px;
    max-width: 100%;
    display: table;
    table-layout: auto;
}
.citas-table th, .clientes-table th, .inventario-table th, .notificaciones-table th, .reportes-table th, .tecnicos-table th, .historial-table th {
    white-space: nowrap;
}
.citas-table td, .clientes-table td, .inventario-table td, .notificaciones-table td, .reportes-table td, .tecnicos-table td, .historial-table td {
    white-space: nowrap;
}
@media (max-width: 900px) {
    .citas-section, .clientes-section, .inventario-section, .notificaciones-section, .reportes-section, .tecnicos-section, .historial-section {
        padding: 12px 2px 18px 2px;
    }
    .citas-table, .clientes-table, .inventario-table, .notificaciones-table, .reportes-table, .tecnicos-table, .historial-table {
        min-width: 600px;
        font-size: 0.95em;
    }
}
/* Forzar que las tablas nunca se oculten ni colapsen */
.citas-table, .clientes-table, .inventario-table, .notificaciones-table, .reportes-table, .tecnicos-table, .historial-table {
    visibility: visible !important;
    opacity: 1 !important;
}
/* Badges para tablas robustas */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.95em;
    font-weight: 600;
    color: #fff;
    margin-right: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-servicio {
    background: #4e9cff;
}
.badge-suscripcion {
    background: #2ecc71;
}
.badge-inventario {
    background: #ffb347;
}
/* Estados del inventario */
.badge-success, .badge-disponible {
    background: #16a34a;
    color: #fff;
}
.badge-warning, .badge-bajo {
    background: #d97706;
    color: #fff;
}
.badge-danger, .badge-agotado {
    background: #dc2626;
    color: #fff;
}
/* Cabecera de tabla robusta */
.hoverable-table thead tr {
    background: #22314a;
}
.hoverable-table thead th {
    color: #fff;
    font-weight: 700;
    font-size: 1.05em;
    border-bottom: 2px solid #4e9cff;
}
/* Tablas robustas y efecto hover dinámico */
.hoverable-table tbody tr {
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.hoverable-table tbody tr:hover {
    background: #dbeafe !important;
    box-shadow: 0 2px 12px rgba(34,49,74,0.10);
    z-index: 2;
    position: relative;
}
/* Reportes */
.reportes-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
    padding: 24px 32px 32px 32px;
    margin-bottom: 32px;
}
.reportes-filtros {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}
.reportes-filtros select, .reportes-filtros input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e0e6f0;
    background: #f7fafd;
    color: #22314a;
    font-size: 1em;
    min-width: 120px;
}
.reportes-grafico {
    background: #f0f4fa;
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    color: #b0bed9;
    margin-bottom: 18px;
}
.reportes-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(34,49,74,0.05);
    font-size: 1em;
}
.reportes-table th, .reportes-table td {
    padding: 12px 10px;
    text-align: left;
}
.reportes-table thead {
    background: #f0f4fa;
}
.reportes-table th {
    color: #22314a;
    font-weight: 700;
    border-bottom: 2px solid #e0e6f0;
}
.reportes-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.2s;
}
.reportes-table tbody tr:hover {
    background: #eaf2ff !important;
}
/* Técnicos IA */
.tecnicos-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
    padding: 24px 32px 32px 32px;
    margin-bottom: 32px;
}
.tecnicos-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(34,49,74,0.05);
    font-size: 1em;
}
.tecnicos-table th, .tecnicos-table td {
    padding: 12px 10px;
    text-align: left;
}
.tecnicos-table thead {
    background: #f0f4fa;
}
.tecnicos-table th {
    color: #22314a;
    font-weight: 700;
    border-bottom: 2px solid #e0e6f0;
}
.tecnicos-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.2s;
}
.tecnicos-table tbody tr:hover {
    background: #eaf2ff !important;
}
/* Historial Vehículos */
.historial-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
    padding: 24px 32px 32px 32px;
    margin-bottom: 32px;
}
.historial-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(34,49,74,0.05);
    font-size: 1em;
}
.historial-table th, .historial-table td {
    padding: 12px 10px;
    text-align: left;
}
.historial-table thead {
    background: #f0f4fa;
}
.historial-table th {
    color: #22314a;
    font-weight: 700;
    border-bottom: 2px solid #e0e6f0;
}
.historial-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.2s;
}
.historial-table tbody tr:hover {
    background: #eaf2ff !important;
}
body {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    background: #f7fafd;
    color: #222;
}
.sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 220px;
    background: #22314a;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100;
}
.sidebar-header {
    padding: 32px 24px 16px 24px;
    border-bottom: 1px solid #2e4060;
}
.sidebar-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    font-weight: 700;
}
.sidebar-header span {
    font-size: 0.95rem;
    color: #b0bed9;
}
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.sidebar-menu li {
    padding: 16px 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.08rem;
    transition: background 0.2s;
    border-left: 4px solid transparent;
}
.sidebar-menu li i {
    margin-right: 16px;
    font-size: 1.1em;
}
.sidebar-menu li.active, .sidebar-menu li:hover {
    background: #1a2333;
    border-left: 4px solid #4e9cff;
}
.sidebar-footer {
    padding: 18px 24px;
    border-top: 1px solid #2e4060;
}
.admin-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.admin-info i {
    font-size: 2em;
    margin-right: 10px;
}
.admin-name {
    font-weight: 600;
    font-size: 1.05em;
}
.admin-role {
    font-size: 0.95em;
    color: #b0bed9;
}
.logout-btn {
    width: 100%;
    padding: 10px 0;
    background: #1a2333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
}
.logout-btn:hover {
    background: #4e9cff;
    color: #fff;
}
.main-content {
    margin-left: 220px;
    padding: 0 32px 32px 32px;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0 12px 0;
}
header h1 {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
}
.subtitle {
    color: #7a8ca7;
    font-size: 1.1rem;
    margin-left: 12px;
}
.search-bar {
    display: flex;
    align-items: center;
    background: #f0f4fa;
    border-radius: 8px;
    padding: 6px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 1em;
    margin-right: 8px;
    color: #22314a;
}
.dashboard-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
}
.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 180px;
    flex: 1;
    position: relative;
}
.card-icon {
    font-size: 2em;
    margin-bottom: 8px;
}
.card-value {
    font-size: 1.7em;
    font-weight: 700;
}
.card-label {
    color: #7a8ca7;
    font-size: 1.05em;
}
.dashboard-main {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}
.performance-panel, .weather-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(33,150,243,0.07);
    padding: 18px 22px;
    flex: 1 1 340px;
    min-width: 260px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.performance-panel {
    max-width: 600px;
}
.performance-panel .panel-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    height: 100%;
}
.performance-panel canvas {
    width: 100% !important;
    height: 220px !important;
    max-width: 100%;
    max-height: 320px;
}
.weather-panel {
  background: linear-gradient(135deg, #4e9cff 0%, #6ec6ff 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.07);
  padding: 18px 22px;
  flex: 1 1 260px;
  min-width: 220px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.weather-panel .weather-title {
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 8px;
  color: #fff;
}
.weather-panel .weather-main {
  font-size: 2.2em;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.weather-panel .weather-details {
  display: flex;
  gap: 16px;
  font-size: 1em;
  color: #e3f2fd;
}
@media (max-width: 900px) {
    .dashboard-main {
        flex-direction: column;
        gap: 12px;
    }
    .performance-panel, .weather-panel {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .performance-panel canvas {
        height: 180px !important;
    }
}
@media (max-width: 600px) {
    .dashboard-main {
        gap: 8px;
    }
    .performance-panel, .weather-panel {
        padding: 10px 6px;
        min-height: 120px;
    }
    .performance-panel canvas {
        height: 120px !important;
    }
}
.citas-section, .clientes-section, .inventario-section, .notificaciones-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(34,49,74,0.07);
    padding: 24px 32px 32px 32px;
    margin-bottom: 32px;
}
.citas-table, .clientes-table, .inventario-table, .notificaciones-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(34,49,74,0.05);
    font-size: 1em;
}
.citas-table th, .clientes-table th, .inventario-table th, .notificaciones-table th,
.citas-table td, .clientes-table td, .inventario-table td, .notificaciones-table td {
    padding: 12px 10px;
    text-align: left;
}
.citas-table thead, .clientes-table thead, .inventario-table thead, .notificaciones-table thead {
    background: #f0f4fa;
}
.citas-table th, .clientes-table th, .inventario-table th, .notificaciones-table th {
    color: #22314a;
    font-weight: 700;
    border-bottom: 2px solid #e0e6f0;
}
.citas-table tbody tr, .clientes-table tbody tr, .inventario-table tbody tr, .notificaciones-table tbody tr {
    border-bottom: 1px solid #f0f4fa;
    transition: background 0.2s;
}
.citas-table tbody tr:hover, .clientes-table tbody tr:hover, .inventario-table tbody tr:hover, .notificaciones-table tbody tr:hover,
.row-hover {
    background: #eaf2ff !important;
}
.citas-table td, .clientes-table td, .inventario-table td, .notificaciones-table td {
    color: #22314a;
}
.status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.98em;
    font-weight: 600;
    display: inline-block;
}
.status-confirmed {
    background: #e6f7f1;
    color: #2ecc71;
}
.status-pending {
    background: #fff3e6;
    color: #ffb347;
}
.status-cancelled {
    background: #ffe6e6;
    color: #ff6f61;
}
.btn-action {
    background: none;
    border: none;
    color: #4e9cff;
    font-size: 1.1em;
    margin-right: 6px;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-action:hover {
    color: #3578e5;
}
.noti-kpis {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
}
.noti-kpi {
    background: #f7fafd;
    border-radius: 12px;
    padding: 18px 24px;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(34,49,74,0.04);
}
.noti-kpi .card-value {
    font-size: 1.5em;
    font-weight: 700;
}
.noti-kpi .card-label {
    color: #7a8ca7;
    font-size: 1em;
}
.noti-filtros {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.noti-filtros input, .noti-filtros select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e0e6f0;
    background: #f7fafd;
    color: #22314a;
    font-size: 1em;
    min-width: 140px;
}
.noti-filtros .btn.search-noti {
    background: #4e9cff;
    color: #fff;
    border-radius: 6px;
    padding: 8px 16px;
    border: none;
    font-size: 1em;
    cursor: pointer;
    margin-left: 10px;
}
.noti-filtros .btn.search-noti:hover {
    background: #3578e5;
}
@media (max-width: 1100px) {
    .dashboard-cards, .dashboard-main {
        flex-direction: column;
        gap: 16px;
    }
    .main-content {
        padding: 0 10px 32px 10px;
    }
}
@media (max-width: 700px) {
    .sidebar {
        width: 60px;
    }
    .main-content {
        margin-left: 60px;
    }
    .sidebar-header h2, .sidebar-header span, .sidebar-menu li span, .admin-info div, .logout-btn {
        display: none;
    }
    .sidebar-menu li i {
        margin-right: 0;
    }
}