/* ==============================
   Wrapper general
   ============================== */
.gi-wrapper {
    font-size: 14px;
    max-width: 1400px;       /* ancho máximo en escritorio */
    margin: 0 auto;          /* centrado */
    padding: 0 20px;         /* margen interno lateral */
    box-sizing: border-box;
}

/* Evitar que elementos internos se salgan en temas Gutenberg */
.gi-wrapper * {
    box-sizing: border-box;
}

/* ==============================
   Avisos / notices
   ============================== */
.kb-notice {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.kb-notice-success {
    background: #e6ffed;
    border: 1px solid #12b981;
    color: #065f46;
}

.kb-notice-info {
    background: #eff6ff;
    border: 1px solid #3b82f6;
    color: #1d4ed8;
}

/* Mensaje de rol instalador */
.gi-panel-msg {
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
}

/* ==============================
   Tabs / navegación superior
   ============================== */
.gi-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gi-tabs .gi-tab-activa {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* ==============================
   Acciones principales
   ============================== */
.gi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ==============================
   Dashboard
   ============================== */
.gi-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.gi-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
}

.gi-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.gi-proximas ul {
    margin: 0;
    padding-left: 1rem;
}

.gi-proximas li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* ==============================
   Estadísticas / contadores
   ============================== */
.gi-stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.gi-stat-label {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.gi-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gi-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.gi-badge-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.gi-badge-instalado {
    background: #dcfce7;
    color: #166534;
}

.gi-badge-cancelado {
    background: #fee2e2;
    color: #991b1b;
}

/* Contadores en listado */
.gi-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gi-contador {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid transparent;
}

.gi-contador-pendiente {
    background: #fef3c7;
    border-color: #facc15;
}

.gi-contador-instalado {
    background: #dcfce7;
    border-color: #22c55e;
}

.gi-contador-cancelado {
    background: #fee2e2;
    border-color: #ef4444;
}

/* ==============================
   Layout columnas (listado)
   ============================== */
.gi-two-cols {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.gi-col-left {
    flex: 0 0 280px;
    max-width: 320px;
}

.gi-col-right {
    flex: 1 1 auto;
}

/* ==============================
   Formularios
   ============================== */
.gi-filtros,
.gi-form,
.gi-import-form {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.gi-filtros p,
.gi-form p,
.gi-import-form p {
    margin-bottom: 0.75rem;
}

.gi-filtros label,
.gi-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gi-filtros input[type="text"],
.gi-filtros input[type="date"],
.gi-filtros input[type="number"],
.gi-filtros select,
.gi-form input[type="text"],
.gi-form input[type="date"],
.gi-form input[type="email"],
.gi-form input[type="url"],
.gi-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    font-size: 0.9rem;
}

.gi-form textarea {
    min-height: 80px;
}

/* ==============================
   Tablas (listado)
   ============================== */
.gi-table-container {
    width: 100%;
    overflow-x: auto;   /* importante para responsive */
    margin-top: 1rem;
}

.gi-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.gi-tabla thead {
    background: #f9fafb;
}

.gi-tabla th,
.gi-tabla td {
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.gi-tabla th {
    font-weight: 600;
}

.gi-tabla tbody tr:nth-child(even) {
    background: #f9fafb;
}

.gi-tabla .gi-acciones a {
    font-size: 0.8rem;
}

/* ==============================
   Mapas Leaflet (responsive)
   ============================== */

/* Contenedor del mapa en dashboard */
.gi-map-dashboard {
    width: 100%;
    min-height: 260px;
    height: 320px;
    max-height: 480px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Contenedor genérico del mapa (listado, calendario) */
#gi-map {
    width: 100%;
    min-height: 260px;
    height: 380px;
    max-height: 520px;
    margin: 1rem 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Asegurar que el canvas del mapa se ajusta al contenedor */
.gi-wrapper .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}

/* Leyenda del mapa */
.gi-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.gi-leyenda-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* ==============================
   Calendario
   ============================== */
.gi-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    gap: 0.5rem;
}

.gi-cal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gi-cal-grid {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    table-layout: fixed;
    font-size: 0.8rem;
}

.gi-cal-grid th,
.gi-cal-grid td {
    border: 1px solid #e5e7eb;
    vertical-align: top;
    padding: 0.35rem;
    height: 80px;
}

.gi-cal-grid th {
    background: #f3f4f6;
    text-align: center;
    font-weight: 600;
}

.gi-cal-dia-num {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gi-cal-event {
    display: block;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    text-decoration: none;
}

.gi-cal-event-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.gi-cal-event-instalado {
    background: #dcfce7;
    color: #166534;
}

.gi-cal-event-cancelado {
    background: #fee2e2;
    color: #991b1b;
}

/* ==============================
   Ficha + Adjuntos
   ============================== */
.gi-ficha,
.gi-adjuntos {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
}

.gi-ficha h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.gi-adjuntos ul {
    margin: 0;
    padding-left: 1.2rem;
}

.gi-adjuntos li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Campo buscar en maps en ficha */
.gi-maps-busqueda {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
    margin-bottom: 0.75rem;
}

.gi-maps-busqueda input[type="text"] {
    flex: 1 1 auto;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #d1d5db;
}

/* ==============================
   Responsive
   ============================== */

/* Tablets: ajustar columnas y alturas de mapa un poco */
@media (max-width: 1024px) {
    .gi-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .gi-two-cols {
        gap: 1rem;
    }

    #gi-map {
        height: 320px;
        max-height: 420px;
    }

    .gi-map-dashboard {
        height: 280px;
        max-height: 380px;
    }
}

/* Móviles: columnas apiladas, tabla scroll, mapas más bajos, padding menor */
@media (max-width: 768px) {
    .gi-wrapper {
        padding: 0 12px;
    }

    .gi-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gi-two-cols {
        flex-direction: column;
    }

    .gi-col-left,
    .gi-col-right {
        max-width: 100%;
    }

    .gi-tabla {
        font-size: 0.8rem;
    }

    #gi-map {
        height: 260px;
        max-height: 340px;
    }

    .gi-map-dashboard {
        height: 240px;
        max-height: 320px;
    }

    .gi-cal-grid th,
    .gi-cal-grid td {
        font-size: 0.7rem;
        padding: 0.25rem;
        height: 60px;
    }

    .gi-cal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .gi-cal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gi-maps-busqueda {
        flex-direction: column;
    }
}