/* ================================================================
   CONTROL FOTOVOLTAICO — Componentes (modo aditivo, NO invasivo)
   ----------------------------------------------------------------
   Reglas: NO redefinir body, *, sidebar, main-content, top-bar,
   data-table, card global — eso vive en /css/styles.css legacy.
   Solo agregar/mejorar componentes específicos del design system v2
   que se ven con look profesional.
   ================================================================ */

/* Tipografía base solo dentro de elementos del nuevo sistema.
   NO global para no romper el legacy. */
.df-typography {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Aplicar Inter como font-family a TODA la app (heredable, no rompe layout) */
html, body, input, textarea, select, button {
    font-family: var(--font-sans), 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ===============================================================
   BOTONES — Mejora visual del .btn legacy
   El legacy tiene: .btn, .btn-primary, .btn-accent, .btn-danger,
   .btn-warning, .btn-outline, .btn-sm, .btn-lg
   Solo sobrescribimos colores/radios/padding para coincidir con
   el brand nuevo, sin tocar layout (margin-left, etc.)
   =============================================================== */
.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    border: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn .icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }

.btn-primary {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-secondary-hover) !important; }

.btn-accent {
    background: var(--brand-accent) !important;
    color: #1a1a1a !important;
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}
.btn-accent:hover:not(:disabled) { background: var(--brand-accent-hover) !important; color: #fff !important; }

.btn-danger {
    background: var(--danger) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) { background: #B91C1C !important; }

.btn-warning {
    background: var(--warning) !important;
    color: #1a1a1a !important;
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}

.btn-success {
    background: var(--success) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--brand-secondary) !important;
    color: var(--brand-secondary) !important;
}
.btn-outline:hover:not(:disabled) { background: rgba(37, 99, 235, 0.08) !important; }

.btn-ghost {
    background: transparent !important;
    color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: rgba(100, 116, 139, 0.1); color: var(--text-primary); }

/* Block button (full-width) */
.btn-block { display: flex !important; width: 100%; }

/* ===============================================================
   FORM INPUTS — mejorar legibilidad y altura touch
   =============================================================== */
.form-input,
.form-select,
.form-textarea {
    border-radius: var(--radius-md) !important;
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--text-base) !important;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--brand-secondary) !important;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18) !important;
    outline: none !important;
}
.form-input.is-error,
.form-select.is-error { border-color: var(--danger) !important; }

/* ===============================================================
   BADGES — agregar badges nuevos del v2 sin pisar legacy
   =============================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    white-space: nowrap;
}
.badge .icon { width: var(--icon-xs); height: var(--icon-xs); flex-shrink: 0; }

.badge-success { background: var(--success-soft); color: #065F46; }
.badge-warning { background: var(--warning-soft); color: #92400E; }
.badge-danger  { background: var(--danger-soft);  color: #991B1B; }
.badge-info    { background: var(--info-soft);    color: #075985; }
.badge-brand   { background: rgb(37 99 235 / 0.12); color: var(--brand-primary); }

.badge-count {
    background: rgba(100, 116, 139, 0.2);
    color: inherit;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.badge-count.is-complete { background: var(--success-soft); color: #065F46; }

/* ===============================================================
   MODAL — pequeñas mejoras estéticas SIN romper el legacy
   =============================================================== */
.modal {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}
.modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ===============================================================
   TOASTS — design system v2 (nuevo stack)
   El app.js antiguo usaba .toast-container, ahora usa .toast-stack
   =============================================================== */
.toast-stack {
    position: fixed;
    top: max(env(safe-area-inset-top), 16px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast, 1000);
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: 100%;
}
@media (min-width: 768px) {
    .toast-stack {
        top: 16px; left: auto; right: 16px;
        transform: none; max-width: 420px;
    }
}

.toast-stack .toast {
    background: #ffffff;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #94A3B8;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    animation: toast-in 250ms var(--ease-out);
    font-size: var(--text-sm);
    line-height: 1.4;
}
@keyframes toast-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.toast-stack .toast .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-stack .toast-body { flex: 1; }
.toast-stack .toast-success { border-left-color: var(--success); }
.toast-stack .toast-success .icon { color: var(--success); }
.toast-stack .toast-info    { border-left-color: var(--info); }
.toast-stack .toast-info    .icon { color: var(--info); }
.toast-stack .toast-warning { border-left-color: var(--warning); }
.toast-stack .toast-warning .icon { color: var(--warning); }
.toast-stack .toast-urgent  { border-left-color: var(--danger); }
.toast-stack .toast-urgent  .icon { color: var(--danger); }

/* ===============================================================
   PHOTO SLOT — componente nuevo del design system v2
   Se aplica solo dentro del modal de fotos cuando renderPhotosModal
   genera markup nuevo con .photo-slot__*
   =============================================================== */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-4);
    }
}

.photo-slot {
    position: relative;
    aspect-ratio: 1;
    border: 1.5px dashed var(--border-strong, #CBD5E1);
    border-radius: var(--radius-lg);
    background: var(--surface-card, #FFFFFF);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.photo-slot:hover { box-shadow: var(--shadow-md); border-color: var(--brand-secondary); }
.photo-slot:active { transform: scale(0.98); }
.photo-slot:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.photo-slot.uploaded {
    border-style: solid;
    border-color: var(--border-default, #E2E8F0);
}

.photo-slot__content {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
    color: var(--text-secondary, #475569);
}
.photo-slot__content .icon-placeholder {
    width: 32px; height: 32px;
    color: var(--neutral-400, #94A3B8);
}
.photo-slot__number {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary, #475569);
}
.photo-slot__label {
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-tertiary, #64748B);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.photo-slot__image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.photo-slot__overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 8px 4px;
    background: linear-gradient(to top, rgb(15 23 42 / 0.85) 0%, rgb(15 23 42 / 0) 100%);
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.photo-slot__badge {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-sm);
    line-height: 1;
    white-space: nowrap;
}
.photo-slot__badge .icon { width: 12px; height: 12px; }
.photo-slot__badge--pending { background: var(--warning); color: #fff; }
.photo-slot__badge--synced  { background: var(--success); color: #fff; }
.photo-slot__badge--error   { background: var(--danger); color: #fff; }

.photo-slot__delete {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 3;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(220 38 38 / 0.95);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--duration-fast);
}
.photo-slot__delete:hover { background: #B91C1C; }
.photo-slot__delete .icon { width: 14px; height: 14px; }

/* ===============================================================
   UTILIDADES sueltas (clases sin selectores que choquen)
   =============================================================== */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }

/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce) {
    .photo-slot, .btn, .toast-stack .toast { transition: none !important; }
    .toast-stack .toast { animation: none !important; }
}

/* ===============================================================
   DARK MODE — Fix de contraste para textos invisibles
   El legacy theme-variables.css define --text-primary muy oscuro
   para el modo dark y eso hace que algunos headers/titles queden
   casi negros sobre fondo dark.
   Detectamos dark mode por la presencia de body[data-theme="dark"]
   o html.dark o por prefers-color-scheme.
   =============================================================== */

/* Por defecto (dark mode legacy activo) aclaramos algunos textos */
body[data-theme="dark"] .card-header h3,
body[data-theme="dark"] .card-header,
html.dark .card-header h3,
html.dark .card-header,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header {
    color: #F1F5F9 !important;
}

body[data-theme="dark"] .top-bar,
body[data-theme="dark"] .top-bar h2,
body[data-theme="dark"] .top-bar h1,
html.dark .top-bar,
html.dark .top-bar h1,
html.dark .top-bar h2 {
    color: #F1F5F9 !important;
}

/* Card titles y cualquier h1-h4 dentro de cards */
body[data-theme="dark"] .card h1,
body[data-theme="dark"] .card h2,
body[data-theme="dark"] .card h3,
body[data-theme="dark"] .card h4,
html.dark .card h1,
html.dark .card h2,
html.dark .card h3,
html.dark .card h4 {
    color: #F1F5F9 !important;
}

/* Tablas: headers de tabla con buen contraste */
body[data-theme="dark"] .data-table th,
body[data-theme="dark"] table th,
html.dark .data-table th,
html.dark table th {
    color: #CBD5E1 !important;
}

body[data-theme="dark"] .data-table td,
body[data-theme="dark"] table td,
html.dark .data-table td,
html.dark table td {
    color: #E2E8F0 !important;
}

/* Nombres / labels en filas */
body[data-theme="dark"] td span,
body[data-theme="dark"] td strong,
html.dark td span,
html.dark td strong {
    color: inherit;
}

/* Sidebar branding: el "SFV Control" en gris claro mejora visibilidad */
body[data-theme="dark"] .sidebar-logo,
body[data-theme="dark"] .sidebar-logo > div > div:first-child,
html.dark .sidebar-logo,
html.dark .sidebar-logo > div > div:first-child {
    color: #F1F5F9 !important;
}

/* Fallback: si NO hay atributo data-theme y el modo es dark del SO,
   también aplicar (para que la app respete prefers-color-scheme cuando
   el legacy no haya marcado el body) */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .card-header h3,
    body:not([data-theme="light"]) .card-header {
        color: #F1F5F9;
    }
}