/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;
    --font-ui:   'Outfit', sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Palette - warm paper */
    --bg:               #fdf9f5;
    --bg-subtle:        #f7f3ee;
    --bg-hover:         #f0ebe4;
    --sidebar-bg:       #f2ede7;
    --sidebar-border:   #e6e0d8;
    --border:           #e6e0d8;
    --border-strong:    #cdc6bc;
    --text:             #1a1815;
    --text-secondary:   #6b645c;
    --text-muted:       #a09890;
    --cell-rn-bg:       #f0ebe4;
    --cell-new-bg:      #fdf8f2;
    --row-hover:        #faf5ef;
    --focus-ring:       inset 0 0 0 1.5px #1a1815;
    --focus-bg:         #fff;

    /* Accents */
    --accent:           #1a1815;
    --accent-fg:        #fdf9f5;
    --green:            #3d8c5e;
    --red:              #b54a4a;

    /* Layout */
    --sidebar-w:        192px;
    --sidebar-collapsed-w: 48px;
    --header-h:         52px;
    --radius:           10px;
    --page-x:           28px;   /* horizontal page gutter, narrower on phones */
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ── App shell ──────────────────────────────────────────────────────────────── */
.app-shell {
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 10;
}

.sidebar-logo {
    padding: 14px 14px 14px 20px;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
    padding: 0;
}
.sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.sidebar-logo-icon {
    display: none;
    cursor: pointer;
    border-radius: 7px;
    flex-shrink: 0;
}

.sidebar-logo-text > span {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.nav-section {
    padding: 16px 12px 8px;
}

.nav-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 8px;
    margin-bottom: 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
    margin-bottom: 1px;
}

.sidebar-nav a:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.sidebar-nav a.is-active {
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 500;
}

.sidebar-nav a.is-active .nav-icon { opacity: 1; }


.nav-icon {
    /* Fixed box so labels line up regardless of each glyph's own width (⛽ is narrower than 🛒). */
    width: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    letter-spacing: 0.01em;
}

.sidebar-footer-label {
    display: block;
    margin-bottom: 5px;
}

.sidebar-footer-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.sidebar-footer-email {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sidebar-logout,
.sidebar-avisos {
    flex-shrink: 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.1s;
}
.sidebar-avisos { display: inline-flex; position: relative; }
/* Unread count on the bell, as the old menu entry had: on a phone it is what is always in sight. */
.sidebar-avisos-n { position: absolute; top: -7px; left: 9px; min-width: 15px; padding: 0 3px; border-radius: 999px; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 500; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.sidebar-avisos:has(.sidebar-avisos-n) { opacity: 1; }
.sidebar-logout:hover, .sidebar-avisos:hover, .sidebar-avisos.is-active { opacity: 1; color: var(--text); }

/* Bookmark hanging from the top edge while there are unread notifications (base.html.twig): the count only,
   coloured by the highest level (black info, amber aviso, red urgente), with the swallowtail cut that makes it read as a bookmark. Absolute, so it
   scrolls away with the page instead of covering what is being read. 20 px tall: the header row starts 22 px down,
   so it never reaches the title or the actions, whatever their width. */
.main-content { position: relative; }
.marcapaginas {
    position: absolute;
    top: 0;
    right: 30%;
    z-index: 5;
    min-width: 20px;
    padding: 3px 4px 7px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
    transition: filter 0.1s;
}
.marcapaginas:hover { filter: brightness(0.88); }
.marcapaginas--aviso { background: #c9a227; color: var(--text); }
.marcapaginas--urgente { background: var(--red); }

/* ── Main content ───────────────────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px var(--page-x) 0;
    flex-shrink: 0;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Month navigation (tab style) ───────────────────────────────────────────── */
.month-nav {
    display: flex;
    gap: 0;
    padding: 14px var(--page-x) 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.month-tab {
    padding: 7px 12px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    transition: color 0.1s, background 0.1s;
    white-space: nowrap;
}

.month-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.month-tab.month-empty {
    opacity: 0.35;
}

.month-tab.active {
    color: var(--text);
    font-weight: 500;
    background: var(--bg);
    border-color: var(--border);
    border-bottom-color: var(--bg);
    position: relative;
    z-index: 1;
}

/* ── Sheet wrapper ──────────────────────────────────────────────────────────── */
.sheet-wrap {
    padding: 0 var(--page-x) 32px;
}

/* ── Compras table (spreadsheet) ────────────────────────────────────────────── */
.compras-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* Sticky header */
.compras-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cell-rn-bg);
    border: 1px solid var(--border);
    border-top: none;
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: left;
}

.compras-table thead th.cell-number { text-align: right; }

/* Row number column */
.col-rn {
    width: 38px;
    text-align: center !important;
    padding: 0 !important;
    border-right: 1px solid var(--border-strong) !important;
}

/* All cells */
.compras-table td {
    border: 1px solid var(--border);
    padding: 0;
    vertical-align: middle;
}

/* Row number cells */
.cell-rn {
    background: var(--cell-rn-bg);
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 400;
    padding: 6px 0;
    width: 38px;
    min-width: 38px;
    border-right: 1px solid var(--border-strong) !important;
    user-select: none;
}

/* Inputs inside cells */
.compras-table input[type="text"]:not([inputmode]),
.compras-table input[type="text"]:not([inputmode])::placeholder {
    text-transform: uppercase;
}
/* Plantas reuses the table but keeps normal case (diary notes, catalogue names). */
.compras-table.pl-diario-table input[type="text"], .compras-table.pl-diario-table input[type="text"]::placeholder,
.compras-table.pl-catalogo input[type="text"], .compras-table.pl-catalogo input[type="text"]::placeholder { text-transform: none; }
.compras-table input[type="text"],
.compras-table input[type="date"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #1a1815;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* Money cell wrapper */
.money-wrap {
    display: flex;
    align-items: center;
}
.compras-table .money-wrap input {
    flex: 1;
    min-width: 0;
}
.euro-sym {
    padding: 0 8px 0 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
}
/* Static money value (tfoot, cell-total) */
.money-static {
    flex: 1;
    text-align: right;
    padding: 0 10px 0 10px;
    font-variant-numeric: tabular-nums;
}

/* Select inside cells */
.compras-table select.cell-select {
    width: 100%;
    border: none;
    outline: none;
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #1a1815;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.compras-table select.cell-select:focus {
    background: var(--focus-bg);
    box-shadow: var(--focus-ring);
    position: relative;
    z-index: 1;
}

.compras-table input:focus {
    background: var(--focus-bg);
    box-shadow: var(--focus-ring);
    position: relative;
    z-index: 1;
}

.compras-table input[data-saving] { opacity: 0.4; }
.compras-table input.cell-error   { box-shadow: inset 0 0 0 1.5px var(--red); }

/* Number-aligned columns */
.cell-number {
    text-align: right;
}
.cell-number input {
    text-align: right;
}

/* Non-input total cell */
.cell-total {
    padding: 0;
    font-weight: 500;
    color: var(--text);
}

/* Row hover */
.compras-table tbody tr.data-row:hover td {
    background: var(--row-hover);
}
.compras-table tbody tr.data-row:hover .cell-rn {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* CSS counter for row numbers */
.compras-table tbody {
    counter-reset: rownum;
}
.compras-table tbody tr.data-row {
    counter-increment: rownum;
}
.compras-table tbody tr.data-row .cell-rn::before {
    content: counter(rownum);
}

/* ── New row ────────────────────────────────────────────────────────────────── */
.new-row td {
    background: var(--cell-new-bg);
    border-style: dashed;
    border-color: var(--border);
}

.new-row .cell-rn {
    background: var(--cell-new-bg);
    color: var(--text-muted);
    font-size: 16px;
    line-height: var(--row-h);
    border-style: dashed;
}


/* ── Totals footer ──────────────────────────────────────────────────────────── */
.totals-row td {
    background: var(--bg-subtle);
    border-top: 1.5px solid var(--border-strong);
    padding: 7px 10px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.totals-row .cell-number {
    padding-left: 0;
    padding-right: 0;
}

.totals-row .cell-rn {
    background: var(--cell-rn-bg);
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.empty-notice {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 13px;
    font-style: italic;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.cell-actions {
    width: 38px;
    text-align: center;
    padding: 0 !important;
}

.btn-add {
    width: 22px; height: 22px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.btn-add:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.btn-delete {
    width: 22px; height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: transparent;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.data-row:hover .btn-delete {
    color: var(--text-muted);
}
.btn-delete:hover {
    background: #f9eded;
    color: var(--red) !important;
}

/* ── Year select ────────────────────────────────────────────────────────────── */
.year-form select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a09890' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.year-form select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }

.btn-secondary {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 400;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    cursor: pointer;
}
.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ── Column widths ──────────────────────────────────────────────────────────── */
.col-rn      { width: 38px; }
.col-amount  { width: 100px; }
.col-fecha   { width: 120px; }
.col-total   { width: 100px; }
.col-actions { width: 36px; }

/* ── Collapsed sidebar ──────────────────────────────────────────────────────── */
.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-w);
}
.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-w);
}
.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-toggle {
    display: none;
}
.sidebar-collapsed .sidebar-logo-icon {
    display: block;
}
.sidebar-collapsed .sidebar-logo {
    justify-content: center;
    padding: 14px 0;
}
.sidebar-collapsed .nav-section {
    padding: 16px 6px 8px;
}
.sidebar-collapsed .sidebar-nav a {
    justify-content: center;
    padding: 8px;
    gap: 0;
}
.sidebar-collapsed .nav-icon {
    opacity: 0.7;
    font-size: 15px;
}

/* Inline SVG icons (KeyCounter's dragon, traced from keycounter.exe) sized like the emoji glyphs.
   fill="currentColor" → same colour as the text, white on the active (black) item. */
.nav-icon--svg {
    height: 14px;
    padding: 0 2px;
}

.module-card-icon--svg {
    width: 28px;
    height: 28px;
    display: inline-block;
}
.sidebar-collapsed .sidebar-nav a.is-active .nav-icon {
    opacity: 1;
}
.sidebar-collapsed .sidebar-footer {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-collapsed .sidebar-footer-label,
.sidebar-collapsed .sidebar-footer-email {
    display: none;
}
.sidebar-collapsed .sidebar-footer-user {
    justify-content: center;
}
.sidebar-collapsed .sidebar-footer-actions { flex-direction: column; gap: 14px; }

/* Animate width transition */
.sidebar       { transition: width 0.2s ease; }
.main-content  { transition: margin-left 0.2s ease; }

/* ── Chart dashboard ────────────────────────────────────────────────────────── */
.chart-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px var(--page-x) 40px;
}

.chart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.chart-card-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.chart-card-year {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
}

.chart-canvas-wrap {
    height: 200px;
    position: relative;
    min-width: 0;
}

/* Grid items default to min-width:auto; a canvas' intrinsic width would then stop the track from
   shrinking and the row could outgrow the page after a resize. */
.chart-dashboard > .chart-card,
.chart-row-3 > .chart-card { min-width: 0; }
.chart-canvas-wrap canvas { max-width: 100%; }

.chart-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.chart-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chart-stat-label {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chart-stat-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
}

.chart-stat > .kc-kpi-sub { display: block; margin-top: 1px; }

.chart-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.chart-card--wide {
    grid-column: 1 / -1;
}

.chart-canvas-wrap--tall {
    height: 240px;
}

.chart-row-3 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mini-donut-wrap {
    height: 140px;
    position: relative;
}

.mini-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 180px;
    margin-right: -24px;
    padding-right: 24px;
}

.mini-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text);
}

.mini-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mini-legend-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.mini-legend-pct {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
}

.mini-legend-val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    min-width: 60px;
    text-align: right;
}

/* ── Donut ──────────────────────────────────────────────────────────────────── */
.donut-wrap {
    height: 180px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.donut-center-label {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.donut-center-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* ── Concepto list ──────────────────────────────────────────────────────────── */
.concepto-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    max-height: 260px;
    margin-right: -24px;
    padding-right: 24px;
}

.concepto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
    font-size: 12.5px;
}

.concepto-item:last-child { border-bottom: none; }

.concepto-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.concepto-name {
    flex: 1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.concepto-pct {
    color: var(--text-muted);
    font-size: 11.5px;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.concepto-total {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    text-align: right;
    flex-shrink: 0;
    min-width: 80px;
}

/* ── Confirm modal ──────────────────────────────────────────────────────────── */
#confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.10);
}
#confirm-modal.is-open {
    display: block;
}
.modal-dialog {
    /* Default: centered (no anchor). JS overrides position when anchor is given. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1.5px solid var(--text);
    border-radius: 8px;
    padding: 22px 24px 18px;
    width: 270px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.modal-message {
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    text-align: center;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.modal-btn {
    padding: 7px 18px;
    border: 1.5px solid var(--text);
    border-radius: 5px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.modal-btn-cancel {
    background: #fff;
    color: var(--text);
}
.modal-btn-cancel:hover  { background: var(--bg-subtle); }
.modal-btn-confirm {
    background: var(--text);
    color: #fff;
}
.modal-btn-confirm:hover { background: #333; }

/* ── Home ── */
.module-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 0 var(--page-x);
}

.module-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.1s, border-color 0.1s;
    min-width: 120px;
}

.module-card:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
}

.module-card-icon { font-size: 28px; line-height: 1; }
.module-card-name { color: var(--text-secondary); }

/* ── KeyCounter ─────────────────────────────────────────────────────────────── */
.kc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 24px var(--page-x) 0;
}

.kc-kpi {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kc-kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.kc-kpi-link { text-decoration: none; }
.kc-kpi-link:hover { text-decoration: underline; }

.kc-heatmap-card {
    margin: 20px var(--page-x) 20px;
}

.kc-wrapped-card {
    margin: 0 var(--page-x) 40px;
}

.kc-wrapped {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.kc-wrapped-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kc-wrapped-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    text-decoration: none;
}

a.kc-wrapped-value:hover { text-decoration: underline; }

.kc-wrapped-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.kc-stats--wrap { flex-wrap: wrap; border-top: none; padding-top: 0; margin-top: -10px; }

.kc-effects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
}

.kc-effects span { color: var(--text-secondary); white-space: nowrap; }

.kc-row--current td { background: var(--row-hover); }
.kc-compare a { color: inherit; }

/* Cells grow with the panel (17 px max) and shrink to 11 px before the grid scrolls horizontally.
   The block is a size container so the formula can read its own width (cqw); the legend shares the variable. */
.kc-heatmap-block {
    container-type: inline-size;
    --kc-gap: 3px;
    --kc-cell: clamp(11px, calc((100cqw - 36px - (var(--kc-cols) - 1) * var(--kc-gap)) / var(--kc-cols)), 17px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kc-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.kc-heatmap {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: 16px auto;
    gap: 4px;
    min-width: calc(32px + var(--kc-cols) * (var(--kc-cell) + var(--kc-gap)));
}

.kc-heatmap-months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(var(--kc-cols), var(--kc-cell));
    gap: var(--kc-gap);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kc-heatmap-months span { white-space: nowrap; }

.kc-heatmap-days {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(7, var(--kc-cell));
    gap: var(--kc-gap);
    font-size: 10px;
    color: var(--text-muted);
    line-height: var(--kc-cell);
}

.kc-heatmap-grid {
    grid-column: 2;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--kc-cell));
    grid-template-columns: repeat(var(--kc-cols), var(--kc-cell));
    gap: var(--kc-gap);
}

.kc-cell {
    display: block;
    width: var(--kc-cell, 13px);
    height: var(--kc-cell, 13px);
    border-radius: 3px;
    background: var(--bg-subtle);
}

a.kc-cell:hover { outline: 1.5px solid var(--text); outline-offset: 0; }

.kc-cell--void    { background: transparent; }
.kc-cell--missing { background: repeating-linear-gradient(45deg, var(--bg-subtle) 0 2px, #fff 2px 4px); }
.kc-l0 { background: var(--bg-hover); }
.kc-l1 { background: #cfe0d4; }
.kc-l2 { background: #9dc2a8; }
.kc-l3 { background: #63997a; }
.kc-l4 { background: #2f6b4d; }

.kc-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.kc-legend .chart-stat-label { margin: 0 4px; }
.kc-legend-note {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.kc-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.kc-table-scroll { overflow-x: auto; }

.kc-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.kc-compare th {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

.kc-compare td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

.kc-compare tr:last-child td { border-bottom: none; }
.kc-compare .cell-number { font-family: var(--font-mono); text-align: right; }

.kc-delta.is-up   { color: var(--green); }
.kc-delta.is-down { color: var(--red); }

.kc-range-form {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}

.kc-range-form label { display: flex; align-items: center; gap: 6px; }

.kc-range-form input[type="date"] {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
}

.kc-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.kc-dot--a { background: #1a1815; }
.kc-dot--b { background: #4a7055; }

.kc-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.kc-range-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

.kc-range-head input[type="date"] {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
}

.kc-range-head .chart-card-year { margin-left: 4px; }

.kc-compare-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-events-card {
    margin: 0 var(--page-x) 40px;
}

.kc-events-wrap { padding: 0; }

/* Event labels are free text, not the uppercase "concepto" style of compras. */
.kc-events-wrap .compras-table input[type="text"],
.kc-events-wrap .compras-table input[type="text"]::placeholder { text-transform: none; }

.kc-events-wrap .compras-table td.kc-event-impact { padding: 0 8px; text-align: center; }

/* Custom tooltip (tooltip_controller.js), same look as the Chart.js ones */
.kc-tip {
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    pointer-events: none;
    background: rgba(26,24,21,0.92);
    color: #fff;
    border-radius: 7px;
    padding: 8px 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.45;
    max-width: 260px;
    box-shadow: 0 6px 20px rgba(26,24,21,0.2);
}

.kc-tip-title { color: rgba(255,255,255,0.55); font-size: 11px; margin-bottom: 2px; }
.kc-tip-line  { font-weight: 500; }
.kc-tip-line--event { color: #f3b7b7; font-weight: 400; }
.kc-tip-icono { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; text-align: center; line-height: 16px; }

.kc-btn-impact {
    padding: 3px 8px;
    font-size: 11px;
}

.kc-cell--event {
    box-shadow: inset 0 0 0 1.5px var(--red);
}

.kc-flash-error {
    color: var(--red);
    font-size: 12px;
}

.kc-event-note {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    padding: 0 4px;
}

/* ── KeyCounter modals (<dialog>) ── */
.kc-modal {
    margin: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    width: min(1120px, 94vw);
    max-height: 90vh;
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(26,24,21,0.18);
}

.kc-modal::backdrop { background: rgba(26,24,21,0.35); }

.kc-modal-body {
    padding: 0;
    display: block;
}

.kc-modal-body.chart-dashboard { display: block; padding: 0; }

.kc-modal-card {
    border: none;
    border-radius: 12px;
    margin: 0;
}

.kc-modal-close {
    margin-left: 12px;
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.kc-modal-close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.kc-modal .chart-card-header { gap: 12px; }
.kc-modal .chart-card-header .chart-card-year { margin-left: auto; text-align: right; }
.kc-modal .kc-range-form { margin-left: auto; }

/* Scroll is locked while a dialog is open; the JS adds padding equal to the scrollbar width so nothing shifts. */
body.has-modal { overflow: hidden; }

.kc-year-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.kc-chip {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    text-decoration: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.kc-chip:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.kc-chip b { font-weight: 500; }
.kc-chip--up   { border-color: #cfe0d4; }
.kc-chip--down { border-color: #e8cfcf; }

.kc-inline-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.kc-inline-list .chart-stat-label { margin-right: 4px; }

.kc-row--new td { background: #e9f2ec; transition: background 1s; }

/* ── Astro ──────────────────────────────────────────────────────────────────── */
.astro-subject-name { font-weight: 400; color: var(--text-secondary); }

.astro-section { padding: 0 var(--page-x); margin-bottom: 28px; max-width: 1020px; }
.astro-tabs { max-width: 992px; padding-right: 0; margin-bottom: 18px; }
.astro-tabs .month-tab { background: none; cursor: pointer; font-size: 13px; padding: 7px 16px; }
.astro-tabs .month-tab.active { background: var(--bg); }
.astro-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.astro-section-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2px 0 0;
}
.astro-nav { flex-wrap: wrap; }

.btn-small { padding: 4px 10px; font-size: 12px; }

.astro-card { gap: 0; padding: 22px 24px 8px; }
.astro-card > p.astro-muted { padding-bottom: 14px; }

.astro-reading {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}
.astro-reading p { margin: 0 0 12px; }
.astro-reading ul { margin: 0 0 12px; padding-left: 20px; }
.astro-reading li { margin-bottom: 6px; }
.astro-reading h1, .astro-reading h2, .astro-reading h3 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.astro-reading-empty { margin: 0 0 12px; }
.astro-casa { text-decoration: underline dotted; text-decoration-color: var(--text-muted); text-underline-offset: 3px; cursor: help; }

.astro-reading-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--border);
}
/* Nothing folded under it (Numerología's month and day): no separator line. */
.astro-reading-foot:last-child { padding-bottom: 0; border-bottom: none; }
.astro-reading-meta {
    font-family: var(--font-ui);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.astro-regenerate { display: inline; flex-shrink: 0; }

/* Folded data tables under the prose: the card stays the height of the reading until you open one. */
.astro-details { border-bottom: 1px solid var(--border); }
.astro-details:last-child { border-bottom: none; }
.astro-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 0;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    user-select: none;
}
.astro-details > summary::-webkit-details-marker { display: none; }
.astro-details > summary::before {
    content: '›';
    display: inline-block;
    width: 12px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.astro-details[open] > summary::before { transform: rotate(90deg); }
.astro-details > summary:hover { color: var(--text-secondary); }
.astro-details > table, .astro-details > ul { margin: 0 0 16px 20px; }
.astro-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border-radius: 10px;
    padding: 1px 7px;
}
.astro-details-hint { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: auto; text-align: right; }

.astro-table {
    width: auto;
    border-collapse: collapse;
    font-size: 13px;
}
.astro-table th {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: left;
    padding: 0 14px 6px 0;
    border-bottom: 1px solid var(--border);
}
.astro-table td {
    padding: 4px 14px 4px 0;
    border-bottom: 1px solid var(--bg-subtle);
    vertical-align: top;
}
.astro-table tr:last-child td { border-bottom: none; }
.astro-table .num { text-align: right; }
.astro-table .mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.astro-table .astro-when { color: var(--text-secondary); width: 1%; }
.astro-table .astro-angles td { border-top: 1px solid var(--border); }
.astro-symbol { color: var(--text-secondary); padding: 0 2px; }
.astro-dim, .astro-table .astro-dim td { color: var(--text-muted); }

/* Long chronological lists flow into columns instead of one tall table. */
.astro-table-columns { display: block; column-width: 300px; column-gap: 32px; }
.astro-table-columns tbody { display: block; }
.astro-table-columns tr { display: table; width: 100%; break-inside: avoid; }

.astro-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: start;
}
.astro-modal { width: min(1120px, 94vw); }
.astro-natal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.astro-natal-data { display: flex; flex-direction: column; gap: 14px; }
.astro-natal .astro-natal-wheel { max-width: none; margin: 0 auto; width: min(100%, 74vh); }
@media (max-width: 900px) { .astro-natal { grid-template-columns: 1fr; } }

.astro-table-compact { font-size: 11.5px; }
.astro-table-compact th { padding-bottom: 3px; font-size: 10px; }
.astro-table-compact td { padding: 0 12px 0 0; line-height: 1.45; }
.astro-table-compact .mono { font-size: 11px; }

/* Element x modality balance. */
.astro-balance { border-collapse: collapse; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', var(--font-ui), sans-serif; font-variant-emoji: text; font-size: 13px; }
.astro-balance th { width: 28px; height: 22px; font-weight: 500; font-size: 11px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); cursor: default; }
.astro-balance thead th:first-child { background: none; border: none; }
.astro-balance td { min-width: 72px; height: 22px; padding: 0 6px; border: 1px solid var(--border); color: var(--text); cursor: default; letter-spacing: 0.08em; }

.astro-glyph { display: inline-block; width: 18px; color: var(--text-secondary); font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', var(--font-ui), sans-serif; font-variant-emoji: text; font-size: 11px; }

/* Aspectarian: lower-left triangle, glyph per pair. */
.astro-aspectarian { border-collapse: collapse; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', var(--font-ui), sans-serif; font-variant-emoji: text; }
.astro-aspectarian td, .astro-aspectarian th {
    width: 22px; height: 22px;
    text-align: center; vertical-align: middle;
    font-size: 12px; font-weight: 400;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.astro-aspectarian th { background: var(--bg-subtle); color: var(--text); cursor: default; }
.astro-aspectarian td.has-aspect { cursor: default; }
.astro-aspectarian td.is-harmonic { color: #4a7055; }
.astro-aspectarian td.is-tense { color: #b54a4a; }
.astro-aspectarian td.is-conj { color: var(--text); }
.astro-aspectarian-foot td { border: none; }

/* ── Wheel (SVG, viewBox 0 0 100 100) ──────────────────────────────────────── */
.astro-wheel-wrap { max-width: 520px; margin: 0 0 16px; }
.astro-wheel-center { margin: 0 auto 16px; }
.astro-wheel { width: 100%; height: auto; display: block; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', var(--font-ui), sans-serif; font-variant-emoji: text; }
.astro-wheel text { text-anchor: middle; dominant-baseline: central; fill: var(--text); user-select: none; }
.astro-wheel [data-tip], .astro-wheel [data-tip] * { cursor: default; }
.wheel-ring { fill: none; stroke: var(--border-strong); stroke-width: 0.25; }
.wheel-ring-signs { stroke-width: 0.35; }
.wheel-ring-inner { fill: #fff; }
.wheel-sign-line { stroke: var(--border-strong); stroke-width: 0.25; }
.wheel-sign { font-size: 4.2px; fill: var(--text-secondary); }
.wheel-house-line { stroke: var(--border); stroke-width: 0.25; }
.wheel-house-angle { stroke: var(--border-strong); stroke-width: 0.35; }
.wheel-axis { stroke: var(--text); stroke-width: 0.5; }
.wheel-house-num { font-size: 2.4px; fill: var(--text-muted); }
.wheel-angle { font-size: 2.6px; font-weight: 600; letter-spacing: 0.05em; fill: var(--text); }
.wheel-aspect { stroke-width: 0.3; opacity: 0.8; pointer-events: none; }
.wheel-aspect-hit { stroke: transparent; stroke-width: 1.4; pointer-events: stroke; }
.wheel-aspect-harmonic { stroke: #4a7055; }
.wheel-aspect-tense { stroke: #b54a4a; }
.wheel-aspect-conjunction { stroke: var(--text-muted); stroke-width: 0.6; }
.wheel-tick { stroke: var(--text); stroke-width: 0.4; }
.wheel-leader { stroke: var(--text-muted); stroke-width: 0.2; }
.wheel-glyph { font-size: 4.8px; }
.wheel-retro { font-size: 1.8px; fill: var(--text-muted); }
.wheel-body-dim .wheel-glyph { fill: var(--text-muted); }
.wheel-body-dim .wheel-tick { stroke: var(--text-muted); }
.wheel-transit .wheel-glyph { font-size: 4.2px; fill: var(--text-secondary); }
.wheel-transit .wheel-tick { stroke: var(--text-secondary); }
.wheel-body:hover .wheel-glyph { fill: #b54a4a; }
.astro-modal .chart-card-header { align-items: center; }
.astro-modal .astro-table { width: 100%; }

.astro-muted { color: var(--text-muted); font-size: 13px; }
.astro-empty { margin: 0 var(--page-x); }
.astro-empty pre {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-subtle);
    padding: 12px;
    border-radius: 6px;
    white-space: pre-wrap;
}
.astro-flash { margin: 0 var(--page-x) 12px; font-size: 13px; max-width: 1020px; }
.astro-flash-ok { color: var(--green, #4a7055); }
.astro-flash-error { color: var(--red); }
/* "Ver este día en Numerología" / "en Astro": a quiet text link under the card, outside it, not a nav button. */
.ver-otro { margin: 8px 2px 0; font-size: 12px; text-align: right; }
.ver-otro a { color: var(--text-muted); text-decoration: none; }
.ver-otro a:hover { color: var(--text-secondary); text-decoration: underline; }

/* ── Numerología (reuses the Astro card, tabs, details and tables) ─────────── */
.num-ciclos { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.num-valor[data-tip] { text-decoration: underline dotted; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: default; }
.num-valor.is-maestro { font-weight: 600; }
.num-meses { margin-top: 4px; }
.num-meses td { width: 50%; }
.num-carta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.num-carta-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.num-grande { font-size: 16px; }
.num-karmica { color: var(--red); }
.num-nota { margin: 0; font-size: 12px; }
.num-subtitulo { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.num-bloque { display: flex; flex-direction: column; gap: 8px; }
.num-inclusion { border-collapse: collapse; }
.num-inclusion td { width: 52px; height: 40px; border: 1px solid var(--border); text-align: center; font-size: 15px; position: relative; cursor: default; }
.num-inclusion-v { position: absolute; top: 2px; left: 4px; font-size: 10px; color: var(--text-muted); }
.num-inclusion td.is-leccion { background: #f9eded; color: var(--red); }
.num-inclusion td.is-pasion { background: var(--bg-subtle); font-weight: 600; }
.num-actual td { font-weight: 600; background: var(--bg-subtle); }
.num-nombre { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.num-nombre:hover .btn-delete { color: var(--text-muted); }
.num-nombre-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.num-nombre-form input[type=text] { flex: 1 1 140px; min-width: 0; }
@media (max-width: 900px) { .num-carta { grid-template-columns: 1fr; } }
@media (hover: none) { .num-nombre .btn-delete { color: var(--text-muted); } }

/* ── Plantas ────────────────────────────────────────────────────────────────── */
.pl-page { padding: 18px var(--page-x) 48px; display: flex; flex-direction: column; gap: 22px; }
.pl-title-sub { color: var(--text-muted); font-weight: 400; }
.pl-ubicaciones .pl-muted { font-size: 11px; }
.pl-muted { color: var(--text-muted); }
.pl-num { font-variant-numeric: tabular-nums; }
.pl-flash { font-size: 13px; }
.pl-flash--ok { color: var(--green); }
.pl-flash--error { color: var(--red); }
.pl-aviso { font-size: 13px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.btn-primary {
    padding: 6px 14px; border: 1px solid var(--accent); border-radius: 5px;
    background: var(--accent); color: var(--accent-fg); font-family: var(--font-ui); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; }
.pl-link { border: none; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.pl-link:hover { color: var(--text); }
.pl-link--danger { color: var(--red); }

.pl-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 400; color: var(--text-secondary); background: #fff; white-space: nowrap; vertical-align: middle; letter-spacing: 0; }
.pl-chip--viva { border-color: #b9d6c3; color: var(--green); }
.pl-chip--soft { background: var(--bg-subtle); font-size: 10.5px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Zones and space cards */
.pl-zona { display: flex; flex-direction: column; gap: 12px; }
.pl-zona-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.pl-zona-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pl-zona-actions { margin-left: auto; display: flex; gap: 8px; }
.pl-espacios { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pl-espacio { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-espacio-head { display: flex; flex-direction: column; gap: 1px; }
.pl-espacio-nombre { font-weight: 500; color: var(--text); text-decoration: none; }
.pl-espacio-nombre:hover { text-decoration: underline; }
.pl-espacio-head .pl-muted { font-size: 11.5px; }
.pl-espacio-foot { margin-top: auto; display: flex; gap: 12px; padding-top: 4px; border-top: 1px dashed var(--border); }
.pl-vacio { font-size: 12px; }

.pl-plantas { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.pl-plantas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; }
.pl-plantas a { color: var(--text); text-decoration: none; }
.pl-plantas a:hover { text-decoration: underline; }
.pl-edad { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-plantas--grandes li { padding: 6px 0; border-bottom: 1px solid var(--bg-hover); }
.pl-plantas--grandes li:last-child { border-bottom: none; }
.pl-plantas--grandes .pl-nota { flex-basis: 100%; }

.pl-details { font-size: 12.5px; color: var(--text-secondary); }
.pl-details > summary { cursor: pointer; width: fit-content; color: var(--text-muted); }
.pl-details > summary:hover { color: var(--text); }
.pl-details[open] > summary { margin-bottom: 8px; }
.pl-retirados { margin-bottom: 8px; line-height: 1.7; }
.pl-retirados-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.pl-retirados-lista li { padding: 2px 0; }
.pl-retirados-plegado { margin-bottom: 10px; }
.pl-retirados a, .pl-historial a, .pl-diario a { color: var(--text); }

.pl-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-inline-form input[type="text"], .pl-inline-form input[type="number"], .pl-inline-form input[type="date"], .pl-inline-form select,
.pl-form input[type="text"], .pl-form input[type="number"], .pl-form input[type="date"], .pl-form select, .pl-form textarea,
.pl-campos input, .pl-campos select, .pl-campos textarea, .pl-textarea {
    font-family: var(--font-ui); font-size: 13px; color: var(--text); background: #fff;
    border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; min-width: 0;
}
.pl-inline-form input[type="number"] { width: 90px; }
.pl-inline-form input:focus, .pl-inline-form select:focus, .pl-form input:focus, .pl-form select:focus,
.pl-campos input:focus, .pl-campos select:focus, .pl-campos textarea:focus, .pl-textarea:focus { outline: none; border-color: var(--border-strong); box-shadow: 0 0 0 1.5px var(--accent); }
.pl-campos .cell-error, .pl-textarea.cell-error { box-shadow: 0 0 0 1.5px var(--red); }
/* Saved by plantas-patch: a green ring and a tick at the right end, fading out. */
.cell-saved { animation: pl-guardado 1.8s ease-out; }
input.cell-saved:not([type="checkbox"]), textarea.cell-saved, select.cell-saved {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d8c5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center; background-size: 14px;
}
select.cell-saved { background-position: right 22px center; }
@keyframes pl-guardado { 0%, 60% { box-shadow: 0 0 0 1.5px var(--green); } 100% { box-shadow: 0 0 0 1.5px transparent; } }
.pl-campos [data-saving], .pl-textarea[data-saving] { opacity: 0.5; }
.pl-grow { flex: 1 1 160px; }
.pl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.pl-cantidad { display: inline-flex; gap: 4px; }
.pl-cantidad input { width: 90px; }

/* Forms in cards and dialogs */
.pl-form { display: flex; flex-direction: column; gap: 12px; }
.pl-form label, .pl-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-muted); }
.pl-form [hidden] { display: none; }
.pl-form label.pl-check, .pl-campos label.pl-check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
/* A checkbox in a row of fields, level with their inputs. */
.pl-campos label.pl-check-campo { align-self: end; min-height: 31px; }
.pl-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-form-row > * { flex: 1 1 120px; }
.pl-form-wide { width: 100%; }
.pl-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pl-form-actions .pl-muted { font-size: 12px; }
.pl-modal { width: min(720px, 94vw); }
.pl-modal--narrow { width: min(520px, 94vw); }
.pl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.pl-checks-group { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-checks-group legend { padding: 0 4px; }
.pl-checks-group .pl-link { font-size: 11.5px; font-weight: 500; }

/* Plant / space / crop pages */
.pl-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; align-items: start; }
.pl-ficha-main, .pl-ficha-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pl-card { gap: 14px; }
.pl-card a.chart-card-title { text-decoration: none; }
.pl-card a.chart-card-title:hover { text-decoration: underline; }
.pl-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pl-campo-wide { grid-column: 1 / -1; }
.pl-campos .pl-check { flex-direction: row; font-size: 12.5px; color: var(--text-secondary); }
.pl-campos textarea, .pl-textarea { resize: vertical; line-height: 1.45; width: 100%; }
.pl-nota { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
/* Free text written with line breaks (crop notes): keep them. */
.pl-nota--texto { white-space: pre-line; }
.pl-nota-de { font-weight: 600; }
.pl-textarea + .pl-nota { margin-top: 10px; }
.pl-datos { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.pl-bien { color: var(--green); }
.pl-mal { color: var(--red); }
.pl-fuentes { word-break: break-all; font-size: 11.5px; }
.pl-pautas { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.4; }
.pl-pautas-table td { font-size: 12.5px; }
.pl-hist-anio { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bg-hover); }
.pl-hist-anio:last-child { border-bottom: none; }
.pl-historial { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pl-historial .pl-muted { font-size: 11.5px; margin-left: 4px; }

/* Diary */
.pl-bottom { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.pl-diario { list-style: none; display: flex; flex-direction: column; }
.pl-diario-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bg-hover); font-size: 13px; }
.pl-diario-row:last-child { border-bottom: none; }
.pl-diario--compacto .pl-diario-row { flex-wrap: wrap; row-gap: 2px; }
.pl-diario--compacto .pl-fecha { flex-basis: 100%; font-size: 11.5px; }
.pl-diario--compacto .pl-diario-main { flex: 1; min-width: 0; }
.pl-diario-row .btn-delete { margin-left: auto; }
.pl-diario-row:hover .btn-delete { opacity: 1; }
.pl-fecha { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.pl-diario-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.pl-diario-main .pl-nota { flex-basis: 100%; }
.pl-diario-mas { margin-top: 8px; font-size: 13px; }
.pl-diario-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.pl-diario-filtros select, .pl-diario-filtros input[type="search"] { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.pl-diario-filtros input[type="search"] { flex: 1 1 220px; min-width: 0; }
.pl-paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pl-lote summary { cursor: pointer; color: var(--text-secondary); }
.pl-lote[open] { flex-basis: 100%; }
.pl-tipo { font-weight: 500; }
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex-shrink: 0; }
.pl-tipo .ic, .pl-tiempo-aviso .ic { margin-right: 4px; }
.pl-tipo--riego { color: #3f6f8f; }
.pl-tipo--cosecha { color: #a0522d; }
.pl-tipo--baja, .pl-tipo--plaga { color: var(--red); }
.pl-tipo--siembra, .pl-tipo--trasplante, .pl-tipo--germinacion { color: var(--green); }
.pl-anotar-rapido { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pl-diario-table { table-layout: fixed; }
.pl-diario-table td.pl-td-tipo { padding: 0 8px; font-size: 12.5px; font-family: var(--font-ui); }
.pl-form > button, .pl-form > .btn-secondary { align-self: flex-start; }
.pl-form-detalles[open] > summary { margin-bottom: 10px; }
.pl-form-detalles > .pl-form-row + label { margin-top: 10px; }

/* Annual calendar strip */
.pl-cal { display: grid; grid-template-columns: auto repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: 11px; }
.pl-cal-m { text-align: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
.pl-cal-l { color: var(--text-muted); padding-right: 8px; white-space: nowrap; }
.pl-cal i, .pl-leyenda i { display: block; height: 12px; border-radius: 2px; background: var(--bg-hover); }
.pl-cal i.pl-cal-semillero.on, .pl-leyenda .pl-cal-semillero { background: #6f8fae; }
.pl-cal i.pl-cal-siembraDirecta.on, .pl-leyenda .pl-cal-siembraDirecta { background: #5e9a6b; }
.pl-cal i.pl-cal-trasplante.on, .pl-leyenda .pl-cal-trasplante { background: #d0a146; }
.pl-cal i.pl-cal-cosecha.on, .pl-leyenda .pl-cal-cosecha { background: #bf6a52; }
/* Editable calendar of the crop sheet: each row a plantas-meses controller, twelve checkbox cells */
.pl-cal-edit { display: grid; grid-template-columns: auto repeat(12, minmax(0, 1fr)) 56px; gap: 3px; align-items: center; font-size: 12px; margin-bottom: 16px; }
.pl-cal-edit-fila { display: contents; }
.pl-cal-caja { display: block; height: 22px; border-radius: 4px; background: var(--bg-hover); cursor: pointer; position: relative; }
.pl-cal-caja input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pl-cal-caja:hover { outline: 1px solid var(--border-strong); }
.pl-cal-caja:has(input:focus-visible) { outline: 2px solid var(--text); }
.pl-cal-caja.pl-cal-semillero:has(input:checked) { background: #6f8fae; }
.pl-cal-caja.pl-cal-siembraDirecta:has(input:checked) { background: #5e9a6b; }
.pl-cal-caja.pl-cal-trasplante:has(input:checked) { background: #d0a146; }
.pl-cal-caja.pl-cal-cosecha:has(input:checked) { background: #bf6a52; }
.pl-cal-edit-fila.is-heredado .pl-cal-caja { opacity: 0.45; }
.pl-cal-edit-fila.cell-error .pl-cal-l { color: var(--red); }
.pl-cal-edit-her { font-size: 11.5px; padding-left: 4px; }
.pl-campos--tiempos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 8px; }
/* Photo viewer of the plant sheet (plantas_visor_controller.js); the page behind stays still */
html.pl-sin-scroll, html.pl-sin-scroll body { overflow: hidden; }
.pl-visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(15, 13, 11, 0.92); color: #fff; }
.pl-visor[open] { display: flex; align-items: center; justify-content: center; }
.pl-visor::backdrop { background: transparent; }
.pl-visor figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 120px); max-height: 100dvh; touch-action: pan-y; }
.pl-visor img { max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.pl-visor-pie { font-size: 13px; color: rgba(255, 255, 255, 0.8); text-align: center; }
.pl-visor-nav, .pl-visor-cerrar { position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; }
.pl-visor-nav:hover, .pl-visor-cerrar:hover { background: rgba(255, 255, 255, 0.25); }
.pl-visor-nav--ant { left: 16px; top: 50%; transform: translateY(-50%); }
.pl-visor-nav--sig { right: 16px; top: 50%; transform: translateY(-50%); }
.pl-visor-cerrar { top: 16px; right: 16px; }
@media (max-width: 600px) { .pl-visor figure { max-width: 100vw; } .pl-visor-nav { top: auto; bottom: 16px; transform: none; } }
/* Icon picker of the crop sheet */
.pl-icono-actual { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pl-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pl-icono-op { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.pl-icono-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pl-icono-op:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--bg-hover); }
.pl-icono-ninguno { font-size: 10.5px; color: var(--text-secondary); }
.pl-cal--mini { grid-template-columns: repeat(12, 7px); gap: 1px; width: max-content; }
.pl-cal--mini i { height: 3px; border-radius: 1px; }
.pl-leyenda { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-muted); }
.pl-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.pl-leyenda i { width: 10px; height: 10px; }

/* Catalogue table */
.pl-catalogo-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow-x: auto; }
.pl-catalogo { table-layout: fixed; min-width: 1296px; }
.pl-catalogo.compras-table input[type="text"]:not([inputmode]), .pl-catalogo.compras-table input[type="text"]:not([inputmode])::placeholder,
.pl-catalogo.compras-table select.cell-select, .pl-catalogo .pl-cultivo-link { text-transform: none; font-family: var(--font-ui); }
.pl-catalogo td.cell-number input { font-family: var(--font-mono); }
.pl-catalogo td { white-space: nowrap; }
.pl-catalogo .pl-cultivo-link { display: block; padding: 0 10px; color: var(--text); text-decoration: none; font-weight: 500; }
.pl-catalogo .pl-cultivo-link:hover { text-decoration: underline; }
/* A crop with varieties heads its group; the varieties hang below it, indented */
.pl-catalogo tr.pl-cat-padre td { background: var(--bg-subtle); }
.pl-catalogo tr.pl-variedad td:first-child { padding-left: 26px; position: relative; }
.pl-catalogo tr.pl-variedad td:first-child::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 2px solid var(--border-strong); }
.pl-catalogo tr.pl-variedad .pl-cultivo-link { font-weight: 400; color: var(--text-secondary); }
.pl-catalogo td.cell-number input { width: 56px; text-align: right; }
.pl-catalogo .pl-td-hint { padding: 0 10px; font-size: 12px; }
.pl-catalogo .pl-cal--mini { margin: 0 10px; }

/* Lunar calendar: month grid, one cell per day; data-v = rating of the chosen task */
.pl-luna { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pl-luna-dow { font-size: 11px; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.pl-luna-dia { position: relative; min-height: 92px; padding: 6px 7px; background: #fff; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; cursor: default; }
.pl-luna-dia--vacio { background: transparent; border-color: transparent; }
.pl-luna-dia.is-hoy { box-shadow: inset 0 0 0 1.5px var(--text); }
.pl-luna-dia.is-reposo { background: var(--bg-subtle); }
.pl-luna-dia[data-v="optimo"] { background: #d5eadb; border-color: #9fcaad; }
.pl-luna-dia[data-v="favorable"] { background: #edf6ef; border-color: #c4e0cd; }
.pl-luna-dia[data-v="desaconsejado"] { background: #f6e6e3; border-color: #e3bdb6; }
.pl-luna-dia[data-v="neutro"] { opacity: .55; }
.pl-luna-num { font-weight: 600; font-size: 12.5px; color: var(--text); }
.pl-luna-disco { position: absolute; top: 6px; right: 7px; width: 20px; height: 20px; }
.pl-luna-sombra { fill: #d9d3cb; }
.pl-luna-luz { fill: #f3cf55; }
.pl-luna-dir { position: absolute; top: 29px; right: 11px; font-size: 12px; color: var(--text-secondary); }
.pl-luna-eventos { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pl-luna-ev--nueva, .pl-luna-ev--llena { color: var(--text); font-weight: 500; }
.pl-luna-reposo { margin-top: auto; align-self: flex-start; font-size: 10px; color: var(--red); }
.pl-luna-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.pl-luna-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.pl-luna-muestra { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.pl-luna-muestra--optimo { background: #d5eadb; }
.pl-luna-muestra--favorable { background: #edf6ef; }
.pl-luna-muestra--desaconsejado { background: #f6e6e3; }
.pl-luna-reglas { display: flex; flex-direction: column; gap: 10px; }
.pl-luna-reglas p { font-size: 12px; }
.pl-luna-hoy { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.pl-luna-hoy:hover { color: var(--text); }
.pl-luna-hoy svg { width: 18px; height: 18px; }
.pl-luna-mini { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
/* Plantas module tabs (templates/plantas/_nav.html.twig) */
.pl-modbar { display: flex; align-items: center; gap: 14px; padding: 0 var(--page-x); border-bottom: 1px solid var(--border); }
.pl-modtabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pl-modbar--vacia { height: 38px; }
.pl-modbar-extra { margin-left: auto; flex: none; }
@media (max-width: 900px) { .pl-modbar-extra { display: none; } }
button.pl-modtab { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: 13.5px; cursor: pointer; }
/* Period title with its navigation (Luna month), like Astro */
.pl-periodo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-periodo-titulo { margin: 0; font-size: 18px; font-weight: 600; }
/* Location selector (PlantasContexto): a <details> menu, outside the scrolling tabs so it is not clipped */
.pl-ubisel { position: relative; flex: none; font-size: 13.5px; }
.pl-ubisel > summary, .pl-ubisel--sola { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-weight: 500; color: var(--text); list-style: none; cursor: pointer; white-space: nowrap; }
.pl-ubisel--sola { cursor: default; border-color: transparent; padding-left: 0; }
.pl-ubisel > summary::-webkit-details-marker { display: none; }
.pl-ubisel > summary:hover { background: var(--bg-hover); }
.pl-ubisel .ic { width: 15px; height: 15px; color: var(--text-secondary); }
.pl-ubisel .pl-chip { font-weight: 400; }
.pl-ubisel-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 180px; display: flex; flex-direction: column; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.pl-ubisel-menu a { padding: 6px 10px; border-radius: 5px; color: var(--text); text-decoration: none; }
.pl-ubisel-menu a:hover { background: var(--bg-hover); }
.pl-ubisel-menu a[aria-current] { font-weight: 600; }
.pl-ubisel-grupo { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); border-top: 1px solid var(--border); margin-top: 4px; }
/* Global tools (Luna, Catálogo, Análisis) at the end of the page header */
.pl-herramientas { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--border); }
.pl-herramienta { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 5px; font-size: 13px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.pl-herramienta:hover { color: var(--text); background: var(--bg-hover); }
.pl-herramienta.is-active { color: var(--text); font-weight: 500; background: var(--bg-hover); }
.pl-herramienta .ic { width: 16px; height: 16px; }
.pl-modtabs::-webkit-scrollbar { display: none; }
.pl-modtab { position: relative; padding: 10px 12px 9px; font-size: 13.5px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.pl-modtab:hover { color: var(--text); }
.pl-modtab.is-active { color: var(--text); font-weight: 500; border-bottom-color: var(--text); }

/* Today card on /plantas */
.pl-hoy { gap: 12px; padding: 16px 20px; }
.pl-hoy-fila { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: stretch; }
.pl-hoy-bloque { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: inherit; text-decoration: none; font-size: 13.5px; }
.pl-hoy-bloque > span { display: flex; flex-direction: column; gap: 1px; }
a.pl-hoy-bloque:hover b { text-decoration: underline; }
.pl-hoy-luna { width: 30px; height: 30px; flex-shrink: 0; }
.pl-hoy-tiempo { display: inline-flex !important; flex-direction: row !important; align-items: baseline; gap: 5px !important; margin-right: 10px; }
.pl-hoy-tiempo b { font-size: 16px; }
.pl-hoy-balance { font-size: 12px; flex-basis: 100%; }
.pl-hoy-sol { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px 14px !important; flex-basis: 100%; font-size: 12.5px; }
.pl-hoy-sol .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.pl-hoy-riego { color: #3f6f8f; cursor: help; }
.pl-hoy-tareas { margin-left: auto; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.pl-hoy-tareas > span:first-child { display: block; }

/* Weather strip on /plantas: 7 observed days, today and the forecast */
.pl-tiempo { display: flex; flex-direction: column; gap: 10px; }
.pl-tiempo-balance { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); cursor: help; }
.pl-tiempo-aviso { font-size: 13px; font-weight: 500; color: var(--red); background: #f6e6e3; border: 1px solid #e3bdb6; border-radius: 8px; padding: 6px 10px; }
.pl-tiempo-dias { display: grid; grid-template-columns: repeat(14, minmax(52px, 1fr)); gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.pl-tiempo-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; cursor: default; }
.pl-tiempo-dia.is-prevision { border-style: dashed; background: transparent; }
.pl-tiempo-dia.is-hoy { box-shadow: inset 0 0 0 1.5px var(--text); }
.pl-tiempo-fecha { color: var(--text-muted); }
.pl-tiempo-max { font-size: 14px; font-weight: 600; color: var(--text); }
.pl-tiempo-min { color: var(--text-secondary); }
.pl-tiempo-max.is-alerta, .pl-tiempo-min.is-alerta { color: var(--red); }
.pl-tiempo-lluvia { width: 10px; height: 28px; margin-top: 2px; background: var(--bg-subtle); border-radius: 3px; display: flex; align-items: flex-end; overflow: hidden; }
.pl-tiempo-lluvia i { display: block; width: 100%; background: #6b9bc9; }
.pl-tiempo-mm { min-height: 13px; font-size: 10px; color: #4a7aa8; }
.pl-tiempo-nota { font-size: 11.5px; }

/* Week page: Moon strip, task groups per type and zone */
.pl-semana-luna { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: 4px; overflow-x: auto; }
.pl-semana-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; color: var(--text-secondary); cursor: default; }
.pl-semana-dia svg { width: 20px; height: 20px; }
.pl-semana-dia.is-hoy { box-shadow: inset 0 0 0 1.5px var(--text); }
.pl-semana-dia.is-reposo { background: var(--bg-subtle); }
.pl-agenda { display: flex; flex-direction: column; gap: 10px; }
.pl-grupo { padding: 0; gap: 0; }
.pl-grupo-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.pl-grupo-resumen { font-size: 12px; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-grupo[open] .pl-grupo-resumen { display: none; }
.pl-grupo-head::-webkit-details-marker { display: none; }
.pl-grupo-head::before { content: '▸'; color: var(--text-muted); font-size: 11px; transition: transform .15s; }
.pl-grupo[open] > .pl-grupo-head::before { transform: rotate(90deg); }
.pl-grupo-todas { margin-left: auto; }
/* "Posponer todas" after "Hecho en todas", or pushed right on its own (sowing groups) */
.pl-grupo-posponer { font-size: 12px; }
.pl-grupo-head > .pl-grupo-posponer:not(.pl-grupo-todas + .pl-grupo-posponer) { margin-left: auto; }
.pl-grupo-luna { padding: 0 16px 10px; }
.pl-tareas { list-style: none; border-top: 1px solid var(--border); }
.pl-tarea { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pl-tarea:last-child { border-bottom: none; }
.pl-tarea-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pl-tarea-nombre { font-weight: 500; color: var(--text); text-decoration: none; }
.pl-tarea-nombre:hover { text-decoration: underline; }
.pl-tarea-vence { margin-left: auto; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pl-tarea.is-atrasada .pl-tarea-vence { color: var(--red); }
.pl-tarea-det { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-secondary); }
.pl-tarea-ajuste { color: #3f6f8f; }
.pl-tarea-horas { color: #3f6f8f; cursor: help; font-variant-numeric: tabular-nums; }
.pl-tarea-horas .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.pl-grupo-luna .pl-tarea-horas { font-size: 12px; }
.pl-tarea-luna { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.pl-tarea-reposo { color: var(--red); }
.pl-chip--optimo { background: #d5eadb; border-color: #9fcaad; color: var(--text); }
.pl-chip--favorable { background: #edf6ef; border-color: #c4e0cd; color: var(--text); }
.pl-tarea-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; }
.pl-posponer { display: flex; align-items: center; gap: 8px; }
/* Maps (PlanoBuilder): grid of cells, plants coloured by family */
.pl-plano-fecha { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Compact when closed (Hoy or a date): the open list shows each change in full. */
.pl-plano-momentos { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); width: 7.5em; text-overflow: ellipsis; }
/* Map on the left, its lists on the right (below under 900 px); warnings under both */
.pl-plano-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px 20px; align-items: start; }
.pl-plano-layout .pl-plano-avisos { grid-column: 1 / -1; }
.pl-plano-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-plano-pie { font-size: 12px; }
.pl-plano-lado { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; border-left: 1px solid var(--border); padding-left: 16px; }
.pl-plano-lado-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-top: 4px; }
.pl-plano-lista { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.pl-plano-lista li { display: flex; align-items: center; gap: 6px; }
.pl-plano-lista li a { color: var(--text); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-plano-lista li a:hover { text-decoration: underline; }
.pl-plano-lista i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
@media (max-width: 900px) { .pl-plano-layout { grid-template-columns: 1fr; } .pl-plano-lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 10px; } }
.pl-plano { width: 100%; height: auto; max-height: 62vh; display: block; touch-action: none; user-select: none; }
.pl-plano--zona { max-height: 70vh; }
.pl-plano-fondo { fill: #f4efe6; stroke: var(--border-strong); stroke-width: 0.6; }
.pl-plano-linea { stroke: #e3dccf; stroke-width: 0.3; }
.pl-plano-rect { fill-opacity: 0.78; stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.4; }
.pl-plano-texto { font-size: 2px; font-family: var(--font-ui); fill: #fff; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.5px; }
.pl-plano.is-editable .pl-plano-planta { cursor: grab; }
.pl-plano-planta.is-arrastrando { cursor: grabbing; }
.pl-plano-planta.is-arrastrando .pl-plano-rect { fill-opacity: 0.95; stroke: var(--text); stroke-width: 0.7; }
.pl-plano-asa { fill: #fff; stroke: var(--text); stroke-width: 0.25; cursor: nwse-resize; opacity: 0; transition: opacity .12s; }
/* The resize corner (and the turn button) only on the plant or space under the pointer, or being dragged; always on touch screens. */
.pl-zp-girar { opacity: 0; transition: opacity .12s; }
.pl-plano-planta:hover .pl-plano-asa, .pl-plano-planta.is-arrastrando .pl-plano-asa,
.pl-zp-espacio:hover .pl-plano-asa, .pl-zp-espacio.is-arrastrando .pl-plano-asa, .pl-zp-espacio:hover .pl-zp-girar { opacity: 1; }
@media (hover: none) { .pl-plano-asa, .pl-zp-girar { opacity: 1; } }
/* Map zoom (plano_zoom_controller.js): the SVG grows inside a viewport of its normal size that scrolls. */
.pl-zoom { position: relative; max-width: 100%; }
.pl-zoom-vista { overflow: hidden; }
.pl-zoom.is-zoom .pl-zoom-vista { overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.pl-zoom.is-moviendo .pl-zoom-vista { cursor: grabbing; }
.pl-zoom-botones { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: .55; transition: opacity .12s; }
.pl-zoom:hover .pl-zoom-botones, .pl-zoom.is-zoom .pl-zoom-botones { opacity: 1; }
.pl-zoom-boton { min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pl-zoom-boton:hover { border-color: var(--text); background: var(--bg-hover); }
.pl-zoom-boton--texto { font-size: 11.5px; font-variant-numeric: tabular-nums; }
@media (hover: none) { .pl-zoom-botones { opacity: 1; } }
.pl-plano.is-colocando { cursor: crosshair; }
.pl-plano-fuera { fill: rgba(236, 230, 220, 0.9); pointer-events: none; }
.pl-plano-contorno { fill: none; stroke: var(--border-strong); stroke-width: 0.6; pointer-events: none; }
.pl-plano-dibujo { fill: rgba(61, 140, 94, 0.25); stroke: var(--green); stroke-width: 0.6; stroke-dasharray: 1.5 1; pointer-events: none; }
.pl-plano-espacio { fill: #f4efe6; stroke: var(--border-strong); stroke-width: 1; }
.pl-plano--zona a:hover .pl-plano-espacio { stroke: var(--text); }
.pl-zp-icono { pointer-events: none; }
.pl-zp-planta { pointer-events: none; }
.pl-zp-planta-nombre { font-size: 8.5px; font-family: var(--font-ui); font-weight: 600; fill: var(--text); paint-order: stroke; stroke: rgba(251, 248, 243, 0.9); stroke-width: 2.6px; stroke-linejoin: round; }
.pl-plano-mensaje { font-size: 12.5px; color: var(--green); }
.pl-plano-mensaje.is-error { color: var(--red); }
.pl-plano-avisos { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.pl-plano-aviso { padding: 4px 8px; border-radius: 6px; }
.pl-plano-aviso--rotacion { background: #faf1dc; color: #7a5a12; }
.pl-plano-aviso--mala { background: #f6e6e3; color: var(--red); }
.pl-plano-aviso--buena { background: #edf6ef; color: var(--green); }
/* Plantas navigation: breadcrumb, previous/next, sibling tabs */
.pl-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--text-muted); }
.pl-migas a { color: var(--text-secondary); text-decoration: none; }
.pl-migas a:hover { color: var(--text); text-decoration: underline; }
.pl-migas [aria-current] { color: var(--text); font-weight: 500; }
.pl-migas-sep { color: var(--border-strong); }
.pl-vecinos { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-top: -8px; }
.pl-vecinos a { color: var(--text-secondary); text-decoration: none; }
.pl-vecinos a:hover { color: var(--text); text-decoration: underline; }
.pl-hermanos { padding: 0; margin-top: -6px; }
.pl-zona-title a { color: inherit; text-decoration: none; }
.pl-zona-title a:hover { text-decoration: underline; }

/* Zone map editor */
.pl-zp-fondo { fill: #fbf8f3; stroke: var(--border); stroke-width: 1; stroke-dasharray: 6 4; }
/* A zone with its size: the area is drawn, outside it stays greyed */
.pl-plano.con-area .pl-zp-fondo { fill: #ece6dc; stroke: none; }
.pl-zp-area { fill: #fbf8f3; stroke: var(--border-strong); stroke-width: 1.5; }
.pl-zp-cota { font-size: 11px; font-family: var(--font-ui); fill: var(--text-secondary); }
.pl-plano.is-editable .pl-zp-espacio { cursor: grab; }
.pl-plano .pl-zp-espacio { cursor: pointer; }
.pl-zp-espacio.is-arrastrando { cursor: grabbing; opacity: .85; }
.pl-zp-espacio.is-arrastrando .pl-plano-espacio { stroke: var(--text); stroke-width: 1.5; }
.pl-zp-espacio:hover .pl-plano-espacio { stroke: var(--text); }
.pl-zp-girar { cursor: pointer; }
/* Fixed elements of the zone map: walls and low walls solid, doors and windows as openings, skylights crossed. */
.pl-zp-elemento .pl-plano-espacio { stroke-width: 0.8; }
.pl-zp-elemento--muro .pl-plano-espacio, .pl-zp-muestra--muro { fill: #857c72; background: #857c72; stroke: #5f574f; }
.pl-zp-elemento--murete .pl-plano-espacio, .pl-zp-muestra--murete { fill: #b9b0a4; background: #b9b0a4; stroke: #8f8579; }
.pl-zp-elemento--puerta .pl-plano-espacio, .pl-zp-muestra--puerta { fill: #e3cfb0; background: #e3cfb0; stroke: #9a7549; stroke-dasharray: 4 2; }
.pl-zp-elemento--ventana .pl-plano-espacio, .pl-zp-muestra--ventana { fill: #d6e8f2; background: #d6e8f2; stroke: #6a95b0; }
.pl-zp-elemento--tragaluz .pl-plano-espacio, .pl-zp-muestra--tragaluz { fill: #e6f1f7; background: #e6f1f7; stroke: #6a95b0; }
.pl-zp-elemento--otro .pl-plano-espacio, .pl-zp-muestra--otro { fill: #ebe6de; background: #ebe6de; stroke: var(--border-strong); stroke-dasharray: 3 2; }
.pl-zp-elemento-cruz { stroke: #6a95b0; stroke-width: 0.6; fill: none; pointer-events: none; }
.pl-zp-elemento-nombre { font-size: 8px; font-family: var(--font-ui); font-style: italic; fill: var(--text-secondary); paint-order: stroke; stroke: rgba(251, 248, 243, 0.85); stroke-width: 2.4px; pointer-events: none; }
.pl-plano .pl-zp-elemento { cursor: default; }
.pl-plano.is-editable .pl-zp-elemento { cursor: grab; }
.pl-zp-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.2); }
.pl-zp-girar rect { fill: #fff; stroke: var(--text); stroke-width: 0.8; }
.pl-zp-girar text { font-size: 7px; font-family: var(--font-ui); fill: var(--text); pointer-events: none; }

/* Crop icons (CultivoIcono): OpenMoji / own SVG, or the family circle */
.pl-cicono { display: inline-block; vertical-align: middle; margin-right: 6px; flex-shrink: 0; align-self: center; }
.pl-cicono--circulo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; line-height: 1; }
.pl-cicono--titulo { vertical-align: -0.2em; margin-right: 10px; }
.pl-plano-icono { pointer-events: none; }

/* Plantas analysis */
.pl-an-cab { gap: 10px; flex-wrap: wrap; }
.pl-an-cab .chart-card-year { margin-right: auto; }
.pl-an-anios { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pl-an-anios a { text-decoration: none; }
.pl-an-tabla td { vertical-align: middle; }
.pl-an-tabla td a { color: var(--text); text-decoration: none; }
.pl-an-tabla td a:hover { text-decoration: underline; }
.pl-an-barra-td { width: 30%; }
.pl-an-barra { display: block; height: 8px; border-radius: 4px; background: #a0522d; opacity: .75; min-width: 2px; }
.pl-an-variedad td { font-size: 12px; color: var(--text-secondary); padding-top: 2px; padding-bottom: 2px; }
.pl-an-variedad td:first-child { padding-left: 34px; }
.pl-an-tarde { color: var(--red); }
.pl-an-pronto { color: var(--green); }
.pl-an-cal { display: grid; grid-template-columns: minmax(120px, auto) repeat(12, minmax(22px, 1fr)) 32px; gap: 3px; align-items: center; font-size: 12px; }
.pl-an-cal-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-an-celda { height: 22px; border-radius: 4px; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10.5px; color: #fff; font-weight: 600; }
.pl-an-celda.is-catalogo { background: #e3eedd; }
.pl-an-celda.is-real { background: #c98a2c; }
.pl-an-celda.is-catalogo.is-real { background: var(--green); }
.pl-leyenda .pl-an-celda { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.pl-an-mes { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #a0522d; }

/* Plant photos */
.pl-portada { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; vertical-align: middle; margin-right: 10px; }
.pl-galeria { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pl-galeria li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pl-galeria img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-subtle); display: block; }
.pl-galeria-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pl-galeria-pie form { display: inline; }
.pl-diario-fotos { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.pl-diario-fotos img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); display: block; }
.pl-foto-input { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text-secondary); cursor: pointer; overflow: hidden; }
.pl-foto-input:hover { color: var(--text); }
.pl-foto-input.is-lleno { color: #fff; background: var(--green); border-color: var(--green); }
.pl-foto-input input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Notifications inbox */
.nt-lista { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nt-item { min-width: 0; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.nt-item--urgente { border-left-color: var(--red); }
.nt-item--aviso { border-left-color: #c9a227; }
.nt-item.is-nueva { background: #fffdf8; box-shadow: 0 1px 0 var(--border); }
.nt-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.nt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.nt-titulo { font-size: 14px; color: var(--text-secondary); }
.nt-item.is-nueva .nt-titulo { color: var(--text); font-weight: 600; }
.nt-fecha { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nt-cuerpo { font-size: 13px; line-height: 1.5; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.nt-link:hover .nt-titulo { text-decoration: underline; }
.nt-canales { font-size: 11px; color: var(--text-muted); }

.pl-quiero { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.pl-pauta-nueva { margin-top: 4px; }
.pl-pauta-nueva > summary { list-style: none; cursor: pointer; }
.pl-pauta-nueva .pl-form { margin-top: 10px; }
.pl-meses { display: flex; flex-wrap: wrap; gap: 4px 12px; border: none; font-size: 12.5px; }
.pl-meses legend { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.pl-meses label { display: inline-flex; align-items: center; gap: 4px; }
.pl-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .pl-tiempo-balance { margin-left: 0; }
    .pl-hoy-tareas { margin-left: 0; align-items: flex-start; text-align: left; }
    .pl-grupo-todas, .pl-grupo-head > .pl-grupo-posponer:not(.pl-grupo-todas + .pl-grupo-posponer) { margin-left: 0; }
    .pl-luna { gap: 2px; }
    .pl-luna-dia { min-height: 64px; padding: 4px; font-size: 9.5px; }
    .pl-luna-disco { width: 14px; height: 14px; top: 4px; right: 4px; }
    .pl-luna-dir { top: 20px; right: 6px; font-size: 10px; }
    .pl-luna-eventos { margin-top: 10px; }
    .pl-luna-ev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
/* Touch screens have no hover: keep the delete buttons visible. */
@media (hover: none) {
    .btn-delete { color: var(--text-muted); }
}

/* Tablets: one chart column, phone gutters. */
@media (max-width: 900px) {
    :root { --page-x: 16px; }

    .chart-dashboard, .chart-row-3, .kc-compare-grid { grid-template-columns: 1fr; }
    .chart-card { padding: 18px 16px; gap: 16px; }
    .chart-card-header { flex-wrap: wrap; gap: 2px 12px; }
    .chart-stats { flex-wrap: wrap; row-gap: 12px; }
    .chart-stat-divider { display: none; }
    .kc-legend { flex-wrap: wrap; }
    .mini-legend, .concepto-list { margin-right: -16px; padding-right: 16px; }

    /* Dialogs fill the screen; the close button stays in the corner while the header wraps. */
    .kc-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: none; border-radius: 0; overflow-y: auto; }
    .kc-modal-card { position: relative; border-radius: 0; min-height: 100%; }
    .kc-modal .chart-card-header { padding-right: 36px; }
    .kc-modal-close { position: absolute; top: 14px; right: 12px; margin: 0; }
    .kc-modal .kc-range-form { margin-left: 0; }
    .kc-modal .chart-card-header .chart-card-year { margin-left: 0; text-align: left; }

    .astro-section, .astro-tabs, .astro-flash { max-width: none; }
    .astro-details > table, .astro-details > ul { margin-left: 0; }
    .astro-details-hint { flex-basis: 100%; margin-left: 20px; text-align: left; }
    .astro-details > summary { flex-wrap: wrap; }
    /* Stacked natal dialog: wheel first, tables keep their natural width. */
    .astro-natal .astro-natal-wheel { width: min(100%, 90vw); order: -1; }
    .astro-natal-data { align-items: flex-start; }
    .astro-wheel-wrap { max-width: none; }

    .pl-ficha, .pl-bottom { grid-template-columns: 1fr; }
    .pl-zona-actions { margin-left: 0; }
    .pl-form-actions { flex-direction: column; align-items: stretch; }
    .pl-checks { max-height: none; }
}

/* Phones: the sidebar becomes a sticky top bar, tabs and sheets scroll sideways. */
@media (max-width: 768px) {
    .app-shell .sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--sidebar-border);
        transition: none;
    }
    .app-shell .main-content { margin-left: 0; min-height: 0; transition: none; }

    .app-shell .sidebar-logo { padding: 10px 6px 10px 14px; border-bottom: none; justify-content: flex-start; }
    .app-shell .sidebar-logo-text { display: inline; }
    .app-shell .sidebar-logo-icon, .app-shell .sidebar-toggle { display: none; }

    .app-shell .sidebar-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .app-shell .sidebar-nav::-webkit-scrollbar { display: none; }
    .app-shell .sidebar-nav { display: flex; }
    .app-shell .nav-section { display: flex; gap: 2px; padding: 0 6px; }
    .app-shell .nav-label { display: none; }
    /* Icons only: with the labels the bar overflowed and its end could not be reached. */
    .app-shell .sidebar-nav a { padding: 8px 10px; margin: 0; gap: 0; white-space: nowrap; }
    .app-shell .nav-text { display: none; }
    .app-shell .nav-icon { opacity: 0.7; font-size: 16px; }
    .app-shell .nav-icon--svg { height: 16px; }
    .app-shell .sidebar-nav a.is-active .nav-icon { opacity: 1; }

    .app-shell .sidebar-footer { margin: 0; padding: 10px 14px; border-top: none; display: block; }
    .app-shell .sidebar-footer-label, .app-shell .sidebar-footer-email { display: none; }
    .app-shell .sidebar-logout, .app-shell .sidebar-avisos { font-size: 16px; }
    .app-shell .sidebar-footer-actions { gap: 14px; }

    .page-header { flex-wrap: wrap; gap: 10px 14px; padding-top: 16px; }
    .marcapaginas + .page-header { padding-top: 24px; }
    .nav-controls { flex-wrap: wrap; }

    /* The nav scrolls sideways; the border moves to an inset shadow so the active tab can still cover it. */
    .month-nav { overflow-x: auto; scrollbar-width: none; border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); }
    .month-tab { margin-bottom: 0; }
    .month-nav::-webkit-scrollbar { display: none; }
    .astro-tabs { overflow: visible; }

    /* Spreadsheets keep their columns and scroll horizontally. */
    .sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sheet-wrap .compras-table { min-width: 720px; }
    .sheet-wrap .compras-table--gasolina { min-width: 880px; }
    .sheet-wrap .pl-catalogo { min-width: 1212px; }
    .compras-table thead th { position: static; }

    .kc-kpis, .kc-wrapped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kc-wrapped-value { font-size: 19px; }
    .kc-range-form { flex-wrap: wrap; gap: 8px 14px; }
    .kc-inline-list { row-gap: 6px; }

    .astro-section-head { align-items: flex-start; }
    .astro-section-title { font-size: 16px; }
    .astro-reading { font-size: 14.5px; }
    .astro-reading-foot { flex-wrap: wrap; align-items: flex-start; }
    .astro-table-columns { column-width: auto; column-count: 1; }
    .astro-aspectarian td, .astro-aspectarian th { width: 20px; height: 20px; font-size: 11px; }
    .astro-balance td { min-width: 56px; }
    .modal-dialog { width: min(300px, calc(100vw - 32px)); }
    .kc-tip { max-width: min(260px, calc(100vw - 24px)); }
}

/* Narrow phones: the icons close up so the whole bar still fits at 320 px. */
@media (max-width: 440px) {
    .app-shell .sidebar-logo { padding-left: 12px; }
    .app-shell .nav-section { padding: 0 2px; }
    .app-shell .sidebar-nav a { padding: 8px 7px; }
    .app-shell .sidebar-footer { padding: 10px 12px 10px 6px; }
    .app-shell .sidebar-footer-actions { gap: 12px; }
    .kc-kpis, .kc-wrapped { grid-template-columns: 1fr 1fr; }
}