/* LOMLOE iDevice — Export Styles */

/*
 * Theme integration via CSS custom properties.
 * Themes can override these on :root or .lomloeIdeviceContent to match their palette.
 * Example (add to theme style.css):
 *
 *   .lomloeIdeviceContent {
 *     --lomloe-th-bg:         #437c0a;
 *     --lomloe-accent:        #437c0a;
 *     --lomloe-accent-bg:     #f1f8e9;
 *     --lomloe-accent-border: #c5e1a5;
 *   }
 */
.lomloeIdeviceContent {
    --lomloe-th-bg:          #107275;  /* eXe brand-primary-700 */
    --lomloe-th-color:       #ffffff;
    --lomloe-border:         #d0d0d0;
    --lomloe-stripe:         rgba(0, 0, 0, 0.025);
    --lomloe-hover:          rgba(0, 0, 0, 0.055);
    --lomloe-accent:         #0BA1A1;  /* eXe brand-primary-600 */
    --lomloe-accent-bg:      #e3f8f9;  /* eXe brand-primary-50  */
    --lomloe-accent-border:  #99F6EB;  /* eXe brand-primary-200 */

    font-family: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.lomloeIdeviceContent h3.lomloe-export-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 0.5em 0;
    color: var(--lomloe-accent, #0BA1A1);
}

.lomloeIdeviceContent h4.lomloe-export-subtitle {
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0 0.4em 0;
    color: var(--lomloe-accent, #0BA1A1);
}

.lomloeIdeviceContent .lomloe-export-meta {
    font-size: 0.85em;
    color: inherit;
    opacity: 0.75;
    margin-bottom: 1em;
}

/* Override base .exe-table margin; keep the table flush with iDevice content */
.lomloe-export-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin: 0.5em 0;
}

.lomloe-export-table th,
.lomloe-export-table td {
    border: 1px solid var(--lomloe-border, #d0d0d0);
    padding: 0.4em 0.6em;
    text-align: left;
    vertical-align: top;
}

.lomloe-export-table th {
    background-color: var(--lomloe-th-bg, #107275);
    color: var(--lomloe-th-color, #fff);
    font-weight: bold;
    white-space: nowrap;
}

/* Override base .exe-table alternating-row rules (td-level for higher specificity) */
.lomloe-export-table tr:nth-child(even) td,
.lomloe-export-table tr:nth-child(even) th {
    background-color: var(--lomloe-stripe, rgba(0, 0, 0, 0.025));
}

.lomloe-export-table tbody tr:hover td,
.lomloe-export-table tbody tr:hover th {
    background-color: var(--lomloe-hover, rgba(0, 0, 0, 0.055));
}

/* ── Criterio code badge ── */
.lomloe-criterio-code-badge {
    display: inline-block;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: bold;
    font-family: monospace;
    background-color: var(--lomloe-accent-bg, #e3f8f9);
    color: var(--lomloe-accent, #0BA1A1);
    border: 1px solid var(--lomloe-accent-border, #99F6EB);
}

/* ── Partial indicator ── */
.lomloe-partial-indicator {
    font-style: italic;
    font-size: 0.85em;
    color: #e65100;
}

/* ── Competencias clave badges ── */
.lomloe-cc-badge {
    display: inline-block;
    padding: 0.1em 0.3em;
    margin: 0.1em;
    border-radius: 3px;
    font-size: 0.75em;
    background-color: var(--lomloe-accent-bg, #e3f8f9);
    color: var(--lomloe-accent, #0BA1A1);
    border: 1px solid var(--lomloe-accent-border, #99F6EB);
}

/* ── Saberes cell (single shared cell spanning all criterio rows) ── */
.lomloe-saberes-cell {
    vertical-align: top;
}

/* ── Saber link badge (in Saberes column) ── */
.lomloe-saber-link-badge {
    display: inline-block;
    padding: 0.1em 0.3em;
    margin: 0.1em;
    border-radius: 3px;
    font-size: 0.75em;
    font-family: monospace;
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

/* ── Type badges (kept for backward compat) ── */
.lomloe-type-badge {
    display: inline-block;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
}

.lomloe-type-saber {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.lomloe-type-criterio {
    background-color: #fff3e0;
    color: #e65100;
}

/* ── Tooltip (Popover API + JS positioning, wired in renderBehaviour) ── */
.lomloeIdeviceContent [data-lomloe-tip] {
    cursor: help;
}

#lomloe-tooltip {
    margin: 0;
    padding: 8px 12px;
    border: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    letter-spacing: 0.01em;
    border-radius: 6px;
    max-width: 360px;
    min-width: 80px;
    width: max-content;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    position: fixed;
    /* Fallback z-index for browsers without the Popover API top layer. */
    z-index: 2147483647;
}

/* ── Empty state ── */
.lomloe-export-empty {
    padding: 1em;
    color: inherit;
    opacity: 0.6;
    font-style: italic;
}