Voici mon actuelle code-travail.html: <!DOCTYPE html> <html lang="fr"> <head> <!-- =====================================

"Create a modern AI creative studio application with a premium interface. The home screen should display six main tools:

"Create a modern AI creative studio application with a premium interface. The home screen should display six main tools: AI Video, AI Image, AI Voice, AI Script, AI Ads, and Settings. The design should be minimal, elegant, dark mode by default, optimized for Android and iPhone, with smooth animations and a modern dashboard layout."

tengo este HTML de mi página web: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" c

tengo este HTML de mi página web: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Planificar Semana — estructura de la vista</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root{ --sub:#64748B; --borde:#E2E8F0; --texto:#1E293B; --ink:#0F172A; --card-bg:#FFFFFF; --page-bg:#F1F5F9; --fondo:#F8FAFC; --accent:#0E8C7F; --accent-strong:#0B6E63; --accent-hover:#0A5F55; --accent-wash:#E1EFEC; --brass:#C4863A; --accent-green:#1E9E6A; --accent-red:#CE4A44; --r-sm:6px; --r:8px; --r-lg:12px; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace; } *{box-sizing:border-box;} body{margin:0;background:var(--page-bg);color:var(--texto);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;} .wrap{max-width:1100px;margin:0 auto;padding:28px 24px 64px;} .pg-title{font-size:1.4rem;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;} .pg-sub{font-size:0.9rem;color:var(--sub);margin:0 0 24px;} .ps-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;} @media(max-width:820px){.ps-grid2{grid-template-columns:1fr;}} .ps-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .dash-card{background:var(--card-bg);border:1px solid var(--borde);border-radius:var(--r-lg);margin-bottom:18px;overflow:hidden;} .ps-grid2 .dash-card{margin-bottom:0;} .dash-card-header{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--borde);} .dash-card-title{font-size:0.98rem;font-weight:700;color:var(--ink);} .dash-card-subtitle{font-size:0.8rem;color:var(--sub);margin-top:2px;} .dash-card-body{padding:16px 18px;} .ps-hdr-left{display:flex;align-items:center;gap:11px;} .ps-hdr-icon{width:34px;height:34px;border-radius:9px;background:var(--accent-wash);display:grid;place-items:center;flex:0 0 auto;} .ps-hdr-icon svg{width:17px;height:17px;color:var(--accent-strong);} input,select{font-family:inherit;color:var(--texto);} input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);outline:none;} .ps-table{width:100%;border-collapse:collapse;font-size:0.84rem;} .ps-table thead th{text-align:left;font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--sub);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--borde);background:var(--fondo);} .ps-table th.ta-r,.ps-table td.ta-r{text-align:right;} .ps-table tbody td{padding:6px 10px;border-bottom:1px solid var(--borde);color:var(--texto);vertical-align:middle;} .ps-table tbody tr:last-child td{border-bottom:0;} .ps-table tbody input,.ps-table tbody select{width:100%;border:1px solid var(--borde);border-radius:6px;padding:6px 8px;font-size:0.83rem;background:#fff;} .ps-table tbody input[type=number]{text-align:right;font-family:var(--mono);} .ps-btn-ico{width:15px;height:15px;flex:0 0 auto;} .ps-btn-add{margin-top:12px;display:inline-flex;align-items:center;gap:7px;background:none;border:1px dashed var(--accent);color:var(--accent-strong);border-radius:8px;padding:8px 14px;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;} .ps-btn-add:hover{background:var(--accent-wash);} .ps-upload-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--borde);color:var(--ink);border-radius:8px;padding:8px 13px;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;} .ps-upload-btn:hover{background:var(--fondo);} .ps-upload-btn.ps-btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;} .ps-upload-btn.ps-btn-primary:hover{background:var(--accent-hover);} .ps-upload-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;} .ps-upload-name{font-size:0.8rem;color:var(--sub);} .ps-file-hidden{display:none;} .ps-clear-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--borde);color:var(--sub);border-radius:8px;padding:7px 11px;font-family:inherit;font-size:0.78rem;font-weight:600;cursor:pointer;} .ps-clear-btn:hover{color:var(--accent-red);border-color:var(--accent-red);} .ps-clear-btn svg{width:13px;height:13px;} .ps-row-del{border:0;background:none;color:var(--sub);cursor:pointer;font-size:1.15rem;line-height:1;padding:2px 6px;border-radius:6px;} .ps-row-del:hover{color:var(--accent-red);} .ps-collapse-arrow{display:inline-block;color:var(--sub);font-size:0.7rem;margin-right:4px;transition:transform .15s;} details summary{list-style:none;} details summary::-webkit-details-marker{display:none;} details[open] .ps-collapse-arrow{transform:rotate(90deg);} .u-hidden{display:none;} .ps-cardonal-warn{font-size:0.76rem;color:var(--accent-red);font-weight:600;} .psng-empty{padding:22px;text-align:center;color:var(--sub);font-size:0.84rem;border:1px dashed var(--borde);border-radius:10px;} .psng-wins{margin-top:10px;} .psng-hint{margin-top:10px;font-size:0.74rem;color:var(--sub);line-height:1.5;} .ps-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:11px 18px;background:var(--fondo);border-top:1px solid var(--borde);font-size:0.76rem;color:var(--sub);} .ps-sum-item{display:inline-flex;align-items:center;gap:6px;} .ps-sum-item svg{width:14px;height:14px;color:var(--sub);} .ps-sum-item strong{color:var(--ink);font-weight:700;} .ps-run-progress{margin-top:12px;display:flex;flex-direction:column;gap:9px;padding:13px 15px;border:1px solid var(--borde);border-radius:10px;background:#fff;max-width:560px;} .ps-run-progress[hidden]{display:none;} .ps-rp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;} .ps-rp-state{display:inline-flex;align-items:center;gap:8px;font-size:0.84rem;font-weight:600;color:var(--texto);} .ps-rp-dot{width:9px;height:9px;border-radius:50%;background:var(--brass);} .ps-rp-clock{font-family:var(--mono);font-size:0.9rem;font-weight:600;} .ps-rp-track{height:6px;border-radius:999px;background:var(--borde);overflow:hidden;} .ps-rp-bar{height:100%;width:0;background:var(--brass);} .ps-rp-msg{font-size:0.78rem;color:var(--sub);} .blank-note{font-size:0.72rem;color:var(--accent-strong);background:var(--accent-wash);border-radius:6px;padding:2px 7px;font-weight:600;} </style> </head> <body> <div class="wrap"> <h1 class="pg-title">Planificar Semana</h1> <p class="pg-sub">Estructura de la vista: tablas, cargadores de Excel y campos a rellenar. Las filas en blanco marcadas se generan dinámicamente en la app; aquí se muestra una vacía para ver los campos.</p> <section class="dash-view active" data-view="planificar"> <!-- Fila 1: Horizonte + Cargar desde Plan de Cosecha --> <div class="ps-grid2"> <!-- Horizonte de planificacion --> <div class="dash-card"> <div class="dash-card-header"> <div class="ps-hdr-left"> <span class="ps-hdr-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg></span> <div> <div class="dash-card-title">Horizonte de planificacion</div> <div class="dash-card-subtitle">Define el periodo sobre el cual optimizar</div> </div> </div> </div> <div class="dash-card-body"> <div class="ps-grid-2col"> <div> <label style="font-size:0.8rem; font-weight:600; color:var(--sub); display:block; margin-bottom:4px;">Fecha inicio</label> <input type="datetime-local" id="psFechaInicio" style="width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--borde); font-size:0.86rem; f