@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {text-decoration: none;}
li {list-style: none;}
body {
    font-family: 'Poppins', sans-serif;
    max-width: 100%; 
    min-height: 100vh; 
    align-items: center; 
    justify-content: center;
}

h1 {
    font-weight: 600;
    font-size: 1.5rem;
}

.wrapper {display: flex;}
.main {
    background-image: url('../images/dashboard.png'); 
    background-size: 20%; 
    background-repeat: no-repeat; 
    background-position: center; 
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}

/* SIDEBAR ESTILOS EXPANDIBLE/MINIMIZABLE */
#sidebar {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
    background: var(--bs-body-bg);/*#23272b;*/
    color: var(--bs-body-color);/*#fff;*/
    transition: all 0.2s;
    min-height: 100vh;
    position: fixed;
    z-index: 1040;
    display: flex;
    flex-direction: column;
}
#sidebar.sidebar-minimized {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
#sidebar .sidebar-logo {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--bs-body-color);/*#fff;*/
    text-decoration: none;
}
#sidebar .sidebar-logo a { color: var(--bs-body-color);/*#fff;*/ text-decoration: none; }
#sidebar .sidebar-nav { padding-left: 0; margin-top: 1.5em; }
#sidebar .sidebar-item { list-style: none; margin-bottom: 0.5em; }
#sidebar .sidebar-link {
    color: var(--bs-body-color);/*#fff;*/
    display: flex;
    align-items: center;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 0.25em;
    transition: background 0.2s;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
}
#sidebar .sidebar-link:hover, #sidebar .sidebar-link.active {
    background: var(--bs-secondary); /*var(--bs-emphasis-color);*/ /*#495057;*/
    color: var(--bs-body-color);/*#fff;*/
}
#sidebar .sidebar-link i { margin-right: 0.7em; font-size: 1.1rem; }
#sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 1em;
}
#sidebar.sidebar-minimized .sidebar-logo,
#sidebar.sidebar-minimized .sidebar-link span {
    display: none;
}
#sidebar.sidebar-minimized .sidebar-link {
    justify-content: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.5rem;
    color: var(--bs-body-color);/*#fff;*/
    font-size: 1.2em;
}
.toggle-btn i {
    font-size: 1.5rem;
    color: var(--bs-white);
}

/* Submenú desplegable */
.sidebar-submenu {
    margin: 0;
    padding-left: 1.5em;
}
.sidebar-submenu .sidebar-item {
    margin-bottom: 0;
}
#sidebar.sidebar-hidden {
    transform: translateX(-100%);
    transition: transform 0.2s;
}

/* Bootstrap collapse arrow para submenús */
#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}
#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.wrapper {
    display: flex;
}

#sidebar {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
    /* ... */
    transition: all 0.2s, transform 0.2s;
}

#sidebar.sidebar-minimized {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}

#sidebar.sidebar-hidden {
    transform: translateX(-100%);
}

.main {
    min-height: 100vh;
    width: 100%;
    transition: margin-left 0.2s;
    margin-left: 230px; /* Por defecto, igual al sidebar */
}

#sidebar.sidebar-minimized ~ .main {
    margin-left: 60px;
}

#sidebar.sidebar-hidden ~ .main {
    margin-left: 0;
}

/*Colores Personalizados*/
:root{
    --cust-white: #FFFFFF;
    --cust-gray-l: #CCCCCC;
    --cust-gray-m: #999999;
    --cust-gray-d: #666666;
    --cust-red-l: #FF0000;
    --cust-red-m: #CC0000;
    --cust-red-d: #990000;
    --cust-orange-l: #FF6600;
    --cust-orange-m: #CC3300;
    --cust-orange-d: #CC0000;
    --cust-blue-l: #336699;
    --cust-blue-m: #003366;
    --cust-blue-d: #000033;
    --cust-black-l: #666666;
    --cust-black-m: #333333;
    --cust-black-d: #000000;
    --cust-green-l: #00ff00;
    --cust-green-m: #00cc00;
    --cust-green-d: #009900;
    --cust-darkgreen-l: #009900;
    --cust-darkgreen-m: #006600;
    --cust-darkgreen-d: #003300;
    --cust-purple-l: #663399;
    --cust-purple-m: #330066;
    --cust-purple-d: #110033;
    --cust-pink-l: #FF0080;
    --cust-pink-m: #cc0050;
    --cust-pink-d: #990020;
    --cust-brown-l: #663300;
    --cust-brown-m: #331100;
    --cust-brown-d: #110000;
    --cust-cyan-l: #34DDDD;
    --cust-cyan-m: #24AAAA;
    --cust-cyan-d: #148888;
    --cust-yellow-l: #FFCC00;
    --cust-yellow-m: #CC9900;
    --cust-yellow-d: #996600;
    --cust-beige-l: #FFFF66;
    --cust-beige-m: #999933;
    --cust-beige-d: #666600;
    --cust-lila-l: #B378D3;
    --cust-lila-m: #8145A0;
    --cust-lila-d: #501270;
}

.table-red {
  --bs-table-color: #fff;
  --bs-table-bg: #CC0000;
  --bs-table-border-color: #CC1111;
  --bs-table-striped-bg: #DD0000;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #EE0000;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #DD1111;
  --bs-table-hover-color: #fff;

  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-pink {
  --bs-table-color: #fff;
  --bs-table-bg: #cc0050;
  --bs-table-border-color: #cc1160;
  --bs-table-striped-bg: #dd0050;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #ee0050;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #ee0070;
  --bs-table-hover-color: #fff;

  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-purple {
  --bs-table-color: #fff;
  --bs-table-bg: #330066;
  --bs-table-border-color: #550066;
  --bs-table-striped-bg: #662099;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #770066;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #7710AA;
  --bs-table-hover-color: #fff;

  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}


.cust-text-bg-red-l{ background-color: var(--cust-red-l); color: var(--cust-white); }
.cust-text-bg-red-m{ background-color: var(--cust-red-m); color: var(--cust-white); }
.cust-text-bg-red-d{ background-color: var(--cust-red-d); color: var(--cust-white); }
.cust-text-bg-red-d:hover, .cust-text-bg-red-m:hover, .cust-text-bg-red-l:hover {
    opacity: 0.9;
}

.cust-bg-white{background-color: var(--cust-white);}
.cust-bg-gray-l{background-color: var(--cust-gray-l);}
.cust-bg-gray-m{background-color: var(--cust-gray-m);}
.cust-bg-gray-d{background-color: var(--cust-gray-d);}
.cust-bg-red-l{background-color: var(--cust-red-l);}
.cust-bg-red-m{background-color: var(--cust-red-m);}
.cust-bg-red-d{background-color: var(--cust-red-d);}
.cust-bg-orange-l{background-color: var(--cust-orange-l);}
.cust-bg-orange-m{background-color: var(--cust-orange-m);}
.cust-bg-orange-d{background-color: var(--cust-orange-d);}
.cust-bg-blue-l{background-color: var(--cust-blue-l);}
.cust-bg-blue-m{background-color: var(--cust-blue-m);}
.cust-bg-blue-d{background-color: var(--cust-blue-d);}
.cust-bg-black-l{background-color: var(--cust-black-l);}
.cust-bg-black-m{background-color: var(--cust-black-m);}
.cust-bg-black-d{background-color: var(--cust-black-d);}
.cust-bg-green-l{background-color: var(--cust-green-l);}
.cust-bg-green-m{background-color: var(--cust-green-m);}
.cust-bg-green-d{background-color: var(--cust-green-d);}
.cust-bg-darkgreen-l{background-color: var(--cust-darkgreen-l);}
.cust-bg-darkgreen-m{background-color: var(--cust-darkgreen-m);}
.cust-bg-darkgreen-d{background-color: var(--cust-darkgreen-d);}
.cust-bg-purple-l{background-color: var(--cust-purple-l);}
.cust-bg-purple-m{background-color: var(--cust-purple-m);}
.cust-bg-purple-d{background-color: var(--cust-purple-d);}
.cust-bg-pink-l{background-color: var(--cust-pink-l);}
.cust-bg-pink-m{background-color: var(--cust-pink-m);}
.cust-bg-pink-d{background-color: var(--cust-pink-d);}
.cust-bg-brown-l{background-color: var(--cust-brown-l);}
.cust-bg-brown-m{background-color: var(--cust-brown-m);}
.cust-bg-brown-d{background-color: var(--cust-brown-d);}
.cust-bg-cyan-l{background-color: var(--cust-cyan-l);}
.cust-bg-cyan-m{background-color: var(--cust-cyan-m);}
.cust-bg-cyan-d{background-color: var(--cust-cyan-d);}
.cust-bg-yellow-l{background-color: var(--cust-yellow-l);}
.cust-bg-yellow-m{background-color: var(--cust-yellow-m);}
.cust-bg-yellow-d{background-color: var(--cust-yellow-d);}
.cust-bg-beige-l{background-color: var(--cust-beige-l);}
.cust-bg-beige-m{background-color: var(--cust-beige-m);}
.cust-bg-beige-d{background-color: var(--cust-beige-d);}
.cust-bg-lila-l{background-color: var(--cust-lila-l);}
.cust-bg-lila-m{background-color: var(--cust-lila-m);}
.cust-bg-lila-d{background-color: var(--cust-lila-d);}
.cust-text-white{color: var(--cust-white);}
.cust-text-gray-l{color: var(--cust-gray-l);}
.cust-text-gray-m{color: var(--cust-gray-m);}
.cust-text-gray-d{color: var(--cust-gray-d);}
.cust-text-red-l{color: var(--cust-red-l);}
.cust-text-red-m{color: var(--cust-red-m);}
.cust-text-red-d{color: var(--cust-red-d);}
.cust-text-orange-l{color: var(--cust-orange-l);}
.cust-text-orange-m{color: var(--cust-orange-m);}
.cust-text-orange-d{color: var(--cust-orange-d);}
.cust-text-blue-l{color: var(--cust-blue-l);}
.cust-text-blue-m{color: var(--cust-blue-m);}
.cust-text-blue-d{color: var(--cust-blue-d);}
.cust-text-black-l{color: var(--cust-black-l);}
.cust-text-black-m{color: var(--cust-black-m);}
.cust-text-black-d{color: var(--cust-black-d);}
.cust-text-green-l{color: var(--cust-green-l);}
.cust-text-green-m{color: var(--cust-green-m);}
.cust-text-green-d{color: var(--cust-green-d);}
.cust-text-darkgreen-l{color: var(--cust-darkgreen-l);}
.cust-text-darkgreen-m{color: var(--cust-darkgreen-m);}
.cust-text-darkgreen-d{color: var(--cust-darkgreen-d);}
.cust-text-purple-l{color: var(--cust-purple-l);}
.cust-text-purple-m{color: var(--cust-purple-m);}
.cust-text-purple-d{color: var(--cust-purple-d);}
.cust-text-pink-l{color: var(--cust-pink-l);}
.cust-text-pink-m{color: var(--cust-pink-m);}
.cust-text-pink-d{color: var(--cust-pink-d);}
.cust-text-brown-l{color: var(--cust-brown-l);}
.cust-text-brown-m{color: var(--cust-brown-m);}
.cust-text-brown-d{color: var(--cust-brown-d);}
.cust-text-cyan-l{color: var(--cust-cyan-l);}
.cust-text-cyan-m{color: var(--cust-cyan-m);}
.cust-text-cyan-d{color: var(--cust-cyan-d);}
.cust-text-yellow-l{color: var(--cust-yellow-l);}
.cust-text-yellow-m{color: var(--cust-yellow-m);}
.cust-text-yellow-d{color: var(--cust-yellow-d);}
.cust-text-beige-l{color: var(--cust-beige-l);}
.cust-text-beige-m{color: var(--cust-beige-m);}
.cust-text-beige-d{color: var(--cust-beige-d);}
.cust-text-lila-l{color: var(--cust-lila-l);}
.cust-text-lila-m{color: var(--cust-lila-m);}
.cust-text-lila-d{color: var(--cust-lila-d);}

.dashboardBody {
    background: #222d32;
}
.metro-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
    height: 140px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 1.2rem;
}
.metro-tile:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0.95;
}

.metro-green { background: #4CAF50; }
.metro-cyan { background: #2196F3; }
.metro-teal { background: #009688; }
.metro-gray { background: #607D8B; }
.metro-blue { background: #003366; }
.metro-purple { background: #9C27B0; }
.metro-pink { background: #E91E63; }
.metro-red { background: #F44336; }
.metro-orange { background: #FF9800; }
.metro-yellow { background: #FFEE00; }
.metro-cream { background: #ffff99; }
.metro-sienna { background: #A0522D; }
.metro-tile .icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.metro-tile .tile-title {
    font-weight: 500;
}

.metro-tile .tile-subtitle {
    font-weight: 250;
    font-size: medium;
}

/* Estilo para el encabezado fijo */
.fixed-header {
    position: fixed;
    top: 0;
    left: 00;
    width: 100%;
    z-index: 3000;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 2rem;
    padding-left: 70px; /* Espacio para el botón de menú */
}

  /* Fondo semitransparente para popup */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: none; /* oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  /* El popup en sí */
  .popup {
    background: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 0 10px #000;
  }
  
  .truncate {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Fondo blanco para el select (control de page length) */
.dataTables_length select.form-select {
    background-color: white !important;
     min-width: 75px !important;
}

/* Fondo blanco para el cuadro de búsqueda (input) */
.dataTables_filter input.form-control {
    background-color: white !important;
}

.buttons-copy, .buttons-csv, .buttons-excel, .buttons-pdf, .buttons-print {
    margin-right: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.25rem 0.5rem; /* Reduce el padding para tamaño pequeño */
    font-size: 0.75rem;      /* Texto más pequeño */
    border-radius: 0.2rem;   /* Bordes redondeados */
}

/* Opcional: estilo visual similar a btn-sm */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white;
    border: none;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #084298;
    color: white;
}

.thPink { background: #E91E63 !important; }
.thOrange { background: #FF9800 !important; }
.thGreen { background: #4CAF50 !important; }
.thPurple { background: #9C27B0 !important; }
.thCyan { background: #2196F3 !important; }
.thBlue { background: #2196F3 !important; }
.metro-info { background: #2196F3; }
.thPendienteEstimar,
#divMain .thPendienteEstimar { background-color: #33FF57 !important; color: #1a1a1a !important; }
.metro-pendiente-estimar,
#divMain .metro-pendiente-estimar { background-color: #33FF57 !important; color: #1a1a1a !important; }

.metro-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}
.metro-dashboard .metro-tile {
    height: 120px;
    margin-bottom: 20px;
    font-size: 1rem;
}
.metro-dashboard .metro-tile .icon {
    font-size: 2rem;
    margin-bottom: 8px;
}
.metro-dashboard .metro-tile .tile-title {
    font-weight: 500;
    font-size: 1.1rem;
}
.metro-dashboard .metro-tile .tile-subtitle {
    font-weight: 300;
    font-size: 0.9rem;
}


/* ASISTENCIAS */
/* ESTILOS CSS (sin cambios) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.modal-overlay.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 15px;
    max-width: 80%;
    max-height: 90vh;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(-50px) scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.modal-header {
    padding: 25px 30px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modal-title {
    margin: 0;
    font-weight: 600;
    color: #2c3e50;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.btn-close-modal:hover {
    background: #f8f9fa;
    color: #dc3545;
}

.instrucciones-list {
    margin-bottom: 30px;
}

.instruccion-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #007bff;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-text {
    flex: 1;
}

.upload-area {
    border: 3px dashed #007bff;
    border-radius: 15px;
    padding: 40px;
    transition: all 0.3s;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #0056b3;
    background: #f8f9ff;
}

.modal-footer {
    padding: 20px 30px 30px;
    border-top: 1px solid #eee;
    gap: 15px;
}

.modal-footer .btn {
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .modal-content {
        margin: 10px;
        max-height: 95vh;
    }
    
    .instruccion-step {
        flex-direction: column;
        text-align: center;
    }
}

.table-group-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    color: white;
    border: none;
}
.table-group-header td {
    border: none;
    border-bottom: 3px solid #0dcaf0;
}
tr.table-secondary td:first-child { padding-left: 2.5rem; }

.modal-overlay.active { display: flex; }
.modal-content { background: white; border-radius: 10px; max-width: 90%; max-height: 90%; overflow: hidden; }
.modal-header { background: #f8f9fa; padding: 1rem 1.5rem; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #dee2e6; display: flex; gap: 1rem; justify-content: flex-end; }
.btn-close-modal { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.upload-area { border: 3px dashed #007bff; border-radius: 10px; padding: 3rem; transition: all 0.3s; cursor: pointer; }
.upload-area.highlight { border-color: #28a745; background: #f8f9fa; }
.instruccion-step { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: flex-start; }
.step-number { background: #007bff; color: white; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }

.chart-container canvas { max-height: 350px; width: 100%; }
.nivel-color { width: 20px; height: 20px; border-radius: 50%; display: inline-block; margin-right: 10px; }
/* En tu CSS o <style> */
.monospaced { font-family: 'Courier New', monospace; font-size: 0.8em; }
.table th.monospaced, .table td.monospaced { letter-spacing: 0.5px; }

/* ✅ MODAL SIEMPRE ENCIMA */
#modalEditarNomina {
    z-index: 999999 !important;
}

#modalEditarNomina .modal-backdrop {
    z-index: 999998 !important;
}

/* ✅ Scroll bloqueado cuando modal está abierto */
.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* ✅ Modal centrado y grande */
#modalEditarNomina .modal-dialog {
    max-width: 95vw;
    margin: 1.75rem auto;
}

/* ✅ Sin conflictos con DataTables */
#modalEditarNomina {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
}

#modalEditarNomina { z-index: 999999 !important; }
#modalEditarNomina .modal-backdrop { z-index: 999998 !important; }
.modal-open { overflow: hidden !important; }
#modalEditarNomina .modal-dialog { max-width: 95vw; margin: 1.75rem auto; }


/*DATE RANGE - Estilos*/
.dual-range-container {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
}

#sliderMin.form-range::-webkit-slider-thumb {
    background: #0d6efd;
    border: 2px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(13,110,253,0.4);
}

#sliderMax.form-range::-webkit-slider-thumb {
    background: #198754;
    border: 2px solid #198754;
    box-shadow: 0 2px 8px rgba(25,135,84,0.4);
}

.range-wrapper {
    position: relative;
}


.metro-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
    height: 140px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 1.2rem;
}
.metro-tile:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0.95;
}
.metro-tile .icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.metro-tile .tile-title {
    font-weight: 500;
}

.metro-tile .tile-subtitle {
    font-weight: 250;
    font-size: medium;
}