/* ════════════════════════════════════════════════════════════════════════════
   Explorer Detail Card
   Card de detalle del elemento de infraestructura seleccionado en el mapa.
   Se muestra en el panel derecho (#details-panel) reemplazando la vista de listas.
   Usa los design tokens de design-tokens.css (no define :root).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Modo ficha: panel angosto a la derecha, sin tapar el centro del mapa ─── */
/* El panel por defecto es "fullscreen" (left/right pegados). Al mostrar la
   ficha de un elemento lo convertimos en un sidebar derecho compacto.
   El selector con ID gana en especificidad sobre .floating-panel-right. */
#details-panel.showing-card {
    left: auto;
    right: var(--spacing-4, 1rem);
    width: min(380px, 92vw);
    max-width: 380px;
}

.element-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.element-detail[hidden] {
    display: none;
}

/* Botón volver a la lista */
.element-detail__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    background: transparent;
    border: 1px solid var(--outlook-border, #e1e1e1);
    border-radius: var(--radius-pill, 999px);
    color: var(--outlook-text-secondary, #605e5c);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: var(--font-weight-semibold, 600);
    padding: var(--spacing-xs, 0.375rem) var(--spacing-md, 1rem);
    cursor: pointer;
    transition: var(--transition-colors, all 0.2s ease);
}

.element-detail__back:hover {
    background: var(--outlook-bg-hover, #f3f2f1);
    color: var(--outlook-text-primary, #201f1e);
    border-color: var(--outlook-border-hover, #c8c6c4);
}

.element-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

/* ─── Header de la card ─────────────────────────────────────────────────── */
.ed-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md, 1rem);
    padding-bottom: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--outlook-border-light, #edebe9);
}

.ed-card-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
}

.ed-card-icon.is-pozo { background: var(--cool-blue-primary, #0288d1); }
.ed-card-icon.is-planta { background: var(--cool-orange, #f29400); }
.ed-card-icon.is-sistema { background: var(--material-purple, #9c27b0); }

.ed-card-headings {
    min-width: 0;
    flex: 1 1 auto;
}

.ed-card-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.0625rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--outlook-text-primary, #201f1e);
    line-height: 1.3;
    word-break: break-word;
}

.ed-card-type-badge {
    display: inline-block;
    margin-top: var(--spacing-xs, 0.375rem);
    padding: 2px var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-xs, 0.6875rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--outlook-bg-secondary, #faf9f8);
    color: var(--outlook-text-secondary, #605e5c);
    border: 1px solid var(--outlook-border-light, #edebe9);
}

/* ─── Breadcrumb de navegación geográfica ──────────────────────────────── */
.ed-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--outlook-text-secondary, #605e5c);
}

.ed-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ed-breadcrumb__item i {
    color: var(--cool-teal, #00897b);
    font-size: 0.75em;
}

.ed-breadcrumb__sep {
    color: var(--outlook-text-tertiary, #a19f9d);
    font-size: 0.75em;
}

/* ─── Secciones de datos ────────────────────────────────────────────────── */
.ed-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.ed-section__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    margin: 0;
    font-size: var(--font-size-xs, 0.6875rem);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--outlook-text-tertiary, #a19f9d);
}

.ed-section__title i {
    color: var(--outlook-icon-neutral, #605e5c);
}

/* Grid de filas label/valor */
.ed-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs, 0.375rem);
}

.ed-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-xs, 0.375rem) 0;
    border-bottom: 1px dashed var(--outlook-border-light, #edebe9);
}

.ed-row:last-child {
    border-bottom: none;
}

.ed-row__label {
    flex: 0 0 auto;
    color: var(--outlook-text-secondary, #605e5c);
    font-size: var(--font-size-sm, 0.8125rem);
}

.ed-row__value {
    flex: 1 1 auto;
    text-align: right;
    color: var(--outlook-text-primary, #201f1e);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: var(--font-weight-semibold, 600);
    word-break: break-word;
}

/* Organización destacada */
.ed-org {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    background: var(--outlook-bg-secondary, #faf9f8);
    border: 1px solid var(--outlook-border-light, #edebe9);
    border-radius: var(--radius-md, 0.5rem);
}

.ed-org__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cool-blue-secondary, #01579b);
    color: #fff;
    font-size: 0.875rem;
}

.ed-org__text {
    min-width: 0;
}

.ed-org__label {
    display: block;
    font-size: var(--font-size-xs, 0.6875rem);
    color: var(--outlook-text-tertiary, #a19f9d);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ed-org__name {
    display: block;
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--outlook-text-primary, #201f1e);
    word-break: break-word;
}

/* Coordenadas ofuscadas para usuarios no autenticados */
.ed-row__value .coords-blurred {
    font-style: italic;
    color: var(--outlook-text-tertiary, #a19f9d);
    font-weight: var(--font-weight-regular, 400);
}

/* Estado vacío / sin datos extra */
.ed-empty {
    color: var(--outlook-text-tertiary, #a19f9d);
    font-size: var(--font-size-sm, 0.8125rem);
    font-style: italic;
}