/* app/static/css/components.css */

.input-group { display: flex; align-self: center; margin: auto; padding: auto; font-size: 12px; }
.input-group h3, .input-group h2 { margin-right: 5px; font-size: 14px; }
.route-display { margin: 5px; text-align: left; background-color: #ffffff; padding: 5px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: auto; max-height: 50vh; overflow-y: auto; font-size: 12px; }
.route-header { padding: 5px; display: flex; flex-direction: column; margin-top: 1vh; width: 100%; box-sizing: border-box; font-size: 10px; }
.route-group { display: flex; align-items: center; justify-content: center; margin: auto; padding: auto; font-size: 10px; }
.route-group button { margin: 5px; padding: 5px; max-width: 200px; }
.route-content { padding: 5px; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; font-size: 10px; max-height: 70vh; overflow-y: auto; }
.location-input { margin: 10px 0; font-size: 12px; }
.form-group { margin: 5px; padding: 5px; font-size: 12px; }
.form-group label { display: block; margin-bottom: 8px; color: black; font-size: 12px; }
.form-group select, .form-group input { width: 90%; padding: 5px; border: 1px solid #000000; border-radius: 5px; background-color: #ffffff; font-size: 12px; }
input { border: 1px solid #000000; border-radius: 5px; color: black; padding: 5px; margin: 5px; font-family: 'Geologica', sans-serif; }
button { margin: 5px 0; padding: 5px 5px; background-color: #000000; color: white; cursor: pointer; border-radius: 15px; transition: background-color 0.3s ease; width: 100%; align-self: center; font-family: 'Geologica', sans-serif; }
button:hover { background-color: #ffed00; color: black; }
.card { border: 1px solid #000000; border-radius: 5px; padding: 5px; margin: 5px 0; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease; font-size: 12px; }
.card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.card h4 { margin-top: 0; font-size: 1.2em; }
.card button { margin-top: 5px; padding: 5px 5px; background-color: #000000; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
#trucks { margin: 5px 0; padding: 5px; font-size: 12px; border: 1px solid #000000; border-radius: 5px; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-height: 100px; overflow-y: auto; width: 100%; }

/* ¡EL MAPA REGRESÓ! */
#map { flex: 1; min-height: 300px; width: 100%; border-radius: 5px; box-sizing: border-box; font-size: 12px; }

#loading img { width: 60%; height: 40%; }
#document-numbers { word-wrap: break-word; height: 20px; width: 100%; }
.form-segment { padding: 10px; font-size: 12px; }
.form-add-truck { border-radius: 10px; padding: 10px; margin: 10px; font-size: 12px; }
.message { color: #ffed00; text-align: center; margin-top: 1rem; padding: 0.5rem; border-radius: 0.5rem; background-color: #ffffff; font-size: 0.875rem; }
.login-container { background-color: #ffffff; padding: 2.5rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); width: 90%; max-width: 40vh; transition: transform 0.2s; margin: 5% auto; }
.login-container:hover { transform: translateY(-5px); }
.p-group { display: flex; align-self: center; font-size: 12px; }
.p-group h5 { margin-right: 20px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.info-grid div { padding: 5px; }
.route-info { margin-bottom: 30px; padding: 15px; background-color: #f8f9fa; border-radius: 5px; }

.table-container { margin-top: 20px; overflow-x: auto; max-height: 80vh; overflow-y: auto; border-radius: 5px; margin: 0; font-size: 12px; display: flex; flex-direction: column; box-sizing: border-box; }
table { width: 100%; border-collapse: collapse; border: 1px solid #000000; margin: 0; background-color: white; }
th, td { padding: 5px; text-align: left; border: 1px solid #000000; border-bottom: 1px solid #ffffff; }
th { background-color: #000000; color: white; font-size: 12px; border: 1px solid #000000; }
td { font-size: 12px; border: 1px solid #000000; padding: 2px; }
select { width: 90%; padding: 5px; margin: 5px; border: 1px solid #000000; border-radius: 5px; background-color: #ffffff; font-size: 12px; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #ffffff; margin: auto; margin-top: 3%; margin-bottom: 40px; padding: 20px; border-radius: 10px; width: 85%; height: 83%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); overflow-y: auto; font-size: 12px; }
.modal-group { display: flex; font-size: 12px; }

.sellers-container { margin: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 100%; max-height: 100px; overflow-y: auto; border: 1px solid #000000; border-radius: 5px; padding: 5px; background-color: #ffffff; font-size: 8px; }
.documents-container { margin: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 100%; max-height: 200px; overflow-y: auto; border: 1px solid #000000; border-radius: 5px; padding: 5px; background-color: #ffffff; font-size: 12px; }
.checkbox-container { display: flex; align-items: center; }
.checkbox-container input[type="checkbox"] { width: 16px; height: 16px; margin-right: 10px; }
.close, .exit, .cerrar, .close_modal { float: right; font-size: 28px; font-weight: bold; cursor: pointer; color: #000000; }
.close:hover, .exit:hover, .cerrar:hover, .close_modal:hover { color: #000000; }

.gm-style .gmnoprint { font-size: 12px !important; padding: 5px 10px !important; }
.gm-style .gm-style-mtc { top: 10px !important; right: 10px !important; }
.gm-style .gm-style-mtc button { width: auto !important; height: auto !important; min-width: 60px !important; min-height: 30px !important; padding: 5px 10px !important; }

#notification-icon { position: fixed; align-content: center; bottom:8%; right: 2%; cursor: pointer; z-index: 1000; background: #000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 25%; padding: 5px; }
/* Mantengo el fix de la campana porque asumo que te gustó el tamaño */
#notification-icon img { width: 40px; display: block; }
#notification-modal { position: fixed; bottom: 15%; right: 2%; height: 80%; width: 80%; max-width: 400px; max-height: 400px; overflow-y: auto; background: white; border: 1px solid #ccc; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: none; z-index: 1000; padding: 10px; border-radius: 10px; font-size: 12px; }

/* Badge para notificaciones */
.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff3b30;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    display: none; /* Oculto por defecto */
}