/*
  Theme mínimo sobre Bulma 1.0.
  Paleta mineral (cool grays + verde forestal vivo) aplicada vía las
  variables oficiales --bulma-*. Tipografía: defaults de Bulma.
*/

:root {
    /* ── Tokens base (paleta mineral) ── */
    --bg: #F4F5F4;
    --bg-2: #ECEDEC;
    --surface: #FAFAFA;
    --surface-2: #FFFFFF;
    --ink: #0F1110;
    --ink-2: #2A2E2C;
    --muted: #6B7270;
    --line: #DFE2E0;
    --line-2: #C7CCC9;

    --accent: hsl(155, 50%, 32%);
    --accent-dark: hsl(155, 50%, 24%);

    /* Fuente de display: sans-serif geométrica con personalidad, usada en
       brand sidebar, títulos de pantallas hero, login. */
    --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* ── Overrides Bulma ── */
    --bulma-scheme-h: 150;
    --bulma-scheme-s: 4%;
    --bulma-scheme-main-l: 97%;
    --bulma-background-l: 94%;

    /* Primary = verde forestal (accent) */
    --bulma-primary-h: 155;
    --bulma-primary-s: 50%;
    --bulma-primary-l: 32%;
    --bulma-primary-invert-l: 100%;

    /* Link = mismo accent, un toque más oscuro para subrayado */
    --bulma-link-h: 155;
    --bulma-link-s: 50%;
    --bulma-link-l: 28%;

    /* Aesthetic plano */
    --bulma-shadow: none;
    --bulma-card-shadow: none;
    --bulma-card-radius: 8px;
    --bulma-radius: 6px;
    --bulma-radius-large: 8px;
}

/* ─── Sidebar flotante ─────────────────────────────────────────────────
   Verde accent, separada de los bordes del viewport ("flotante"), con
   los items de navegación arriba y el logout pegado al borde inferior. */
body {
    --sidebar-width: 220px;
    --sidebar-gap: 20px;
}

.sidebar {
    position: fixed;
    top: var(--sidebar-gap);
    left: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    width: var(--sidebar-width);
    background: var(--accent);
    color: #fff;
    border-radius: 14px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.sidebar__top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    padding: 4px 12px 22px;
    margin: 0;
}
.sidebar__brand:hover { color: #fff; }
.sidebar__brand strong { color: inherit; font-weight: inherit; }
.sidebar__brand .icon { color: #fff; flex: 0 0 auto; }
.sidebar__brand .icon svg {
    width: 1.4em;
    height: 1.4em;
    stroke-width: 2;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 0.9rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.3;
}
.sidebar__link:hover,
.sidebar__link:focus,
.sidebar__link:focus-visible {
    background: var(--accent-dark);
    color: #fff;
    outline: none;
}
.sidebar__link .icon {
    color: #fff;
    flex: 0 0 auto;
}
.sidebar__link .icon svg {
    width: 1.1em;
    height: 1.1em;
    stroke-width: 2;
}

.sidebar__bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar__logout {
    /* el botón <button> hereda el reset del .sidebar__link */
    text-align: left;
}

/* ─── Main: deja espacio para el sidebar fijo a la izquierda.
       Flex column con la sección creciendo para que el footer quede
       siempre pegado al borde inferior (sticky footer). El padding
       top/bottom hace que el contenido respire respecto al viewport. ─── */
.main {
    margin-left: calc(var(--sidebar-width) + var(--sidebar-gap) * 2);
    min-height: 100vh;
    padding: var(--sidebar-gap) var(--sidebar-gap) var(--sidebar-gap) 0;
    display: flex;
    flex-direction: column;
}
.main > .section { flex: 1 0 auto; padding: 2.5rem 0 2rem; }
.main > .footer {
    flex: 0 0 auto;
    /* Bulma default es padding: 3rem 1.5rem 6rem, dejaba el texto 96px arriba
       del borde. Lo bajamos a un padding razonable. */
    padding: 1rem 1.5rem;
}

/* En pantallas chicas el sidebar pasa a layout horizontal arriba. */
@media (max-width: 768px) {
    body {
        --sidebar-width: auto;
        --sidebar-gap: 12px;
    }
    .sidebar {
        position: static;
        flex-direction: column;
        margin: var(--sidebar-gap);
        padding: 16px;
        gap: 12px;
    }
    .sidebar__brand { padding-bottom: 8px; }
    .sidebar__bottom {
        margin-top: 0;
        padding-top: 12px;
    }
    .main {
        margin-left: 0;
        padding-right: 0;
    }
}

/* Lucide icons */
.icon svg {
    width: 1.25em;
    height: 1.25em;
    stroke-width: 2;
}

[title] { cursor: help; }

/* El atributo HTML hidden tiene que ganar siempre, incluso si el elemento
   tiene un display explícito (flex/grid/etc.) declarado en CSS. */
[hidden] { display: none !important; }

/* Modificador custom: forest button/tag (igual al accent) */
.tag.is-forest,
.button.is-forest {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tag.is-forest .icon,
.button.is-forest .icon { color: #fff; }
.tag.is-forest:hover,
.button.is-forest:hover,
.button.is-forest:focus {
    background-color: var(--accent-dark);
    color: #fff;
    border-color: var(--accent-dark);
}

/* Card-header en accent (estilo previo, no editorial) */
.card {
    border: 1px solid var(--line);
    overflow: hidden;
}
.card-header {
    background-color: var(--accent);
    border-bottom: 1px solid var(--accent-dark);
}
.card-header-title {
    color: #fff;
    gap: 0.5rem;
}
.card-header-title .icon { color: #fff; }
.card-header-icon { color: rgba(255, 255, 255, 0.85); }
.card-header-icon[onclick]:hover {
    background-color: var(--accent-dark);
    cursor: pointer;
}

/* Filas de la tabla de lotes son clickeables */
.lotes-table tbody tr { cursor: pointer; }

/* Iconos de cabecera de tabla en accent */
.table thead th .icon-text {
    align-items: center;
    gap: 0.4em;
}
.table thead th .icon-text .icon { color: var(--accent); }
.table thead th.has-text-right .icon-text { justify-content: flex-end; }
.table thead th.has-text-centered .icon-text { justify-content: center; }

/* Forzar color en is-primary */
.button.is-primary { color: #fff; }

/* Modal por encima de Leaflet panes */
.modal { z-index: 9000; }
.modal-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    max-width: 480px;
    width: calc(100% - 40px);
}
.modal-card-head {
    background-color: var(--accent);
    border-bottom: 0;
    padding: 14px 20px;
}
.modal-card-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.modal-card-head .delete {
    background-color: rgba(255, 255, 255, 0.2);
}
.modal-card-head .delete:hover {
    background-color: rgba(255, 255, 255, 0.35);
}
.modal-card-body {
    background-color: var(--surface-2);
    color: var(--ink);
    padding: 20px;
    line-height: 1.5;
}
.modal-card-body p { margin: 0; }
.modal-card-body p + p { margin-top: 10px; }
.modal-card-body strong { color: var(--ink); font-weight: 600; }
.modal-card-body.content h6 {
    margin-top: 1.2em;
    margin-bottom: 0.4em;
    color: var(--accent-dark);
}
.modal-card-foot {
    background-color: var(--surface-2);
    border-top: 1px solid var(--line);
    padding: 14px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.modal-card-foot .buttons {
    margin: 0;
    gap: 8px;
}
.modal-card-foot .buttons .button {
    margin: 0;
}

/* Botón destructivo del modal: rojo coherente con el ícono de eliminar
   de las cards. */
.modal-danger-btn {
    background: oklch(58% 0.18 25);
    color: #fff;
    border-color: oklch(58% 0.18 25);
}
.modal-danger-btn:hover,
.modal-danger-btn:focus {
    background: oklch(50% 0.18 25);
    border-color: oklch(50% 0.18 25);
    color: #fff;
}
.modal-danger-btn .icon { color: #fff; }

/* Section padding más compacto */
.section { padding: 1.5rem 0; }

/* ─── Auth page (login / register): hero 2-columnas ─── */
.auth-body { background: var(--bg); min-height: 100vh; }

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

.auth-page__intro {
    background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
    position: relative;
    overflow: hidden;
}
/* Sutil patrón de líneas radiantes en la esquina */
.auth-page__intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.12), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(0,0,0,0.15), transparent 60%);
    pointer-events: none;
}

.auth-page__brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.auth-page__brand:hover { color: #fff; }
.auth-page__brand .icon {
    width: 1.1em;
    height: 1.1em;
}
.auth-page__brand .icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.75;
}

.auth-page__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    color: #fff;
}

.auth-page__lead {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 28px;
}

.auth-page__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-page__bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
}
.auth-page__bullets .icon {
    color: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}
.auth-page__bullets .icon svg {
    width: 1.15em;
    height: 1.15em;
}

.auth-page__form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--bg);
}
.auth-page__card {
    width: 100%;
    max-width: 460px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 40px 24px;
}
.auth-page__form-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.auth-page__form-sub {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 24px;
}

@media (max-width: 900px) {
    .auth-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }
    .auth-page__intro {
        padding: 28px 20px;
        min-height: auto;
        justify-content: flex-start;
    }
    .auth-page__brand {
        font-size: 1.8rem;
        gap: 12px;
    }
    .auth-page__form-wrap {
        padding: 24px 20px 32px;
        align-items: flex-start;
    }
    .auth-page__card {
        padding: 28px 20px;
        max-width: 100%;
    }
}

/* ─── Vista de cuenta / perfil ─── */
.account-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 0;
}
.account-header {
    text-align: center;
    margin-bottom: 32px;
}
.account-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.01em;
    margin: 0 auto 18px;
}
.account-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.account-email {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
}

.account-fields {
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.account-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.account-field:last-child { border-bottom: 0; }
.account-field dt {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
}
.account-field dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    text-align: right;
}

/* ─── Listado de predios: cards horizontales full-width ─── */
.predio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}
.predio-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

/* Solo la card de "Agregar predio" mantiene hover (es un link entero,
   tiene sentido feedback visual). Las cards de predio existentes no
   tienen hover global porque las acciones viven dentro de la card. */
.predio-card--add {
    transition: border-color 0.15s ease, background 0.15s ease;
}
.predio-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.predio-card__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}
/* Ícono "suave" para los predios existentes (color accent pero fondo suave) */
.predio-card__icon--soft {
    background: color-mix(in oklch, var(--accent) 14%, var(--surface-2));
    color: var(--accent);
}

.predio-card__body {
    flex: 1 1 auto;
    min-width: 0;
}
.predio-card__name {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.predio-card__meta {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.predio-card__slug {
    color: var(--muted);
    font-size: 0.8rem;
}
.predio-card__sep {
    opacity: 0.6;
}

.predio-card__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Card de predio existente: toda la fila es clickeable (navega al detalle).
   El área de acciones (botón delete) se exime via .predio-card__actions en
   el JS para que el click no propague. */
.js-predio-card { cursor: pointer; }

/* Botón eliminar: ghost — solo el ícono trash en rojo, sin border ni fondo.
   Hover muestra un tinte rojo muy suave para feedback. */
.predio-card__delete {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: oklch(58% 0.18 25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background 0.12s ease;
}
.predio-card__delete:hover,
.predio-card__delete:focus {
    background: oklch(58% 0.18 25 / 0.1);
    outline: none;
}
.predio-card__delete svg {
    width: 18px;
    height: 18px;
}
.predio-card__arrow {
    flex: 0 0 auto;
    color: var(--muted);
}
.predio-card__arrow svg {
    width: 20px;
    height: 20px;
}

/* "Agregar predio" card: una sola línea, fondo blanco, label centrado
   con el ícono + pegado al texto. Mismo border que las cards de predio
   para mantener consistencia. */
.predio-card--add {
    background: var(--surface-2);
    justify-content: center;
    transition: border-color 0.15s ease;
}
.predio-card--add:hover { border-color: var(--accent); }

.predio-card__add-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
}
.predio-card__add-label .icon { color: var(--accent); }
.predio-card__add-label .icon svg {
    width: 18px;
    height: 18px;
}

/* En pantallas chicas las acciones bajan abajo. */
@media (max-width: 720px) {
    .predio-card {
        flex-wrap: wrap;
    }
    .predio-card__actions {
        margin-left: auto;
    }
}

/* ─── Onboarding hero: intro a la izq + form a la der ─── */
.onboarding {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    min-height: 70vh;
    max-width: 1100px;
    margin: 0 auto;
}
.onboarding__intro {
    max-width: 480px;
}
.onboarding__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
    font-weight: 700;
}

/* H1 de pantallas internas (form de dibujo) en la misma fuente display. */
.section h1.title.is-2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 700;
}
.onboarding__lead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 2rem;
}
.onboarding__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.onboarding__bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--ink-2);
}
.onboarding__bullets .icon { flex: 0 0 auto; }
.onboarding__form { max-width: 540px; width: 100%; }

@media (max-width: 900px) {
    .onboarding {
        grid-template-columns: 1fr;
        gap: 32px;
        min-height: 0;
    }
    .onboarding__intro { max-width: 100%; }
    .onboarding__form { max-width: 100%; }
}

/* ─── Toolbar del mapa de dibujo de predio ─── */
.map-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.map-toolbar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 320px;
    min-width: 0;
}
.map-toolbar__search .input {
    flex: 1;
    min-width: 0;
}
.map-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ─── Drop zone para subir KMZ ─── */
.predio-form,
.predio-form-v2 { max-width: 600px; }

.dropzone {
    display: block;
    padding: 36px 24px;
    border: 1.5px dashed var(--line-2);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover {
    border-color: var(--accent);
    background: var(--surface);
}
.dropzone.is-dragover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, var(--surface));
}

/* Estado vacío: ícono + título + hint. */
.dropzone__state--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.dropzone__icon {
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 4px;
}
.dropzone__icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.75;
}
.dropzone__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
}
.dropzone__hint {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Estado lleno: check + nombre/peso + botón Cambiar. Horizontal. */
.dropzone__state--filled {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.dropzone__check {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropzone__check svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.25;
}
.dropzone__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dropzone__filename {
    font-weight: 500;
    color: var(--ink);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropzone__filesize {
    font-size: 0.78rem;
    color: var(--muted);
    font-family: monospace;
}
.dropzone__change {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-2);
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.dropzone__change:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Grid para miniaturas de previews */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.preview-grid img {
    width: 100%;
    image-rendering: pixelated;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--bg-2);
}

/* Chart.js necesita altura explícita */
.chart-container {
    position: relative;
    height: 360px;
}

/* Leaflet */
#map { height: 500px; }
#map-lote { height: 100%; min-height: 320px; }

/* Card del mapa */
.card.map-card {
    overflow: hidden;
    padding: 0;
    height: 100%;
}
.card.map-card #map,
.card.map-card #map-lote { border-radius: inherit; }