/* WebCRM10v2 - Estilos globales minimos */
/* MudBlazor maneja todo el CSS, esto es solo para casos especiales */

html, body {
    margin: 0;
    padding: 0;
}

/* Blazor error boundary (requerido por el framework) */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error.";
}

/* ==========================================================================
   FILL-HEIGHT: Contenedor que ocupa altura restante hasta el fondo
   ========================================================================== */

.fill-height {
    --fill-height-offset: 80px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--fill-height-offset));
    overflow: hidden;
}

.fill-height--tabs {
    --fill-height-offset: 280px;
}

.fill-height--toolbar {
    --fill-height-offset: 140px;
}

.fill-height__content {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 959px) {
    .fill-height {
        height: auto;
        overflow: visible;
    }
    .fill-height__content {
        flex: none;
        min-height: auto;
        overflow: visible;
    }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.full-width {
    width: 100%;
}

.min-w-150 {
    min-width: 150px;
}

.min-w-180 {
    min-width: 180px;
}

.min-w-200 {
    min-width: 200px;
}

.max-w-160 {
    max-width: 160px;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-300 {
    max-width: 300px;
}

.map-embed {
    border: 0;
}

/* ==========================================================================
   CRM SPACING
   ========================================================================== */

.crm-section {
    padding: 12px !important;
    margin: 8px !important;
}

.crm-spacing-sm {
    gap: 8px !important;
}

.crm-spacing-md {
    gap: 12px !important;
}

.crm-divider {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.crm-section-title {
    margin-bottom: 12px !important;
}

.crm-field {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   ESTILOS GLOBALES MudBlazor
   ========================================================================== */

.mud-paper {
    padding: 8px !important;
    margin: 4px !important;
}

.mud-paper.mud-paper-outlined {
    padding: 6px !important;
}

.mud-divider {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.mud-typography-h6 {
    margin-bottom: 8px !important;
}

.mud-typography-h5 {
    margin-bottom: 8px !important;
}

.mud-alert {
    padding: 8px !important;
    margin: 4px !important;
}

/* ==========================================================================
   EXCEPCIONES
   ========================================================================== */

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.padding-extra {
    padding: 16px !important;
}

.margin-extra {
    margin: 16px !important;
}

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }

/* ==========================================================================
   SCROLL
   ========================================================================== */

.lista-scroll {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================================
   INTERACTIVIDAD
   ========================================================================== */

.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   MAPA COMERCIAL
   ========================================================================== */

.mapa-layout {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 140px);
    overflow: hidden;
    gap: 8px;
}

.mapa-layout__filtros {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.mapa-layout__mapa {
    flex: 1;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.mapa-contenedor-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

.mapa-contenedor {
    width: 100%;
    height: 100%;
}

.mapa-overlay {
    position: absolute;
    z-index: 1000;
}

.mapa-contador {
    top: 10px;
    right: 10px;
}

.mapa-leyenda {
    bottom: 10px;
    left: 10px;
    background: rgba(255,255,255,0.95);
}

.mapa-leyenda-contenido {
    padding: 6px 10px;
}

.mapa-icono {
    font-size: 10px;
}

.mapa-icono--ubicacion { color: #2196F3; }
.mapa-icono--cliente { color: #4CAF50; }
.mapa-icono--potencial { color: #FF9800; }
.mapa-icono--otros { color: #9E9E9E; }

.icono-grande {
    font-size: 4rem;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.login-background {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    height: 100vh;
}

.login-card {
    border-radius: 12px;
}

.text-muted {
    color: #757575;
}