/* ToWork index — capa de rediseño 2026. Reestiliza el markup existente al
   design system (ui.css). Conserva nombres de variables originales para que
   los estilos inline var(--naranja/gris/...) sigan funcionando. */
:root{
  --naranja:#FF6B00; --naranja-oscuro:#E85D00; --azul:#10233B;
  --verde:#1FA463; --gris:#5B6774; --fondo:#F6F8FB; --texto:#14181F;
}
body{ font-family:var(--tw-font); color:var(--texto); background:#fff; margin:0; line-height:1.55; }
.container{ width:100%; max-width:1160px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* i18n visibility (default EN) */
body:not([lang="es"]) .lang-es{ display:none !important; }
body[lang="es"] .lang-en{ display:none !important; }

/* Header ------------------------------------------------------------ */
.header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--tw-line); padding:0; }
.header-content{ display:flex; align-items:center; justify-content:space-between; height:66px; max-width:1160px; margin:0 auto; padding:0 20px; }
.logo-container{ display:flex; align-items:center; gap:9px; }
.logo-text{ font-size:1.35rem; font-weight:800; letter-spacing:-.02em; color:var(--texto); display:flex; align-items:center; gap:8px; }
.logo-text i,.logo-text .fa-tools{ color:var(--naranja); }
.logo-text span{ color:var(--naranja); }
.header-right{ display:flex; align-items:center; gap:12px; }
.phone{ color:var(--gris); font-weight:700; text-decoration:none; font-size:.9rem; display:flex; align-items:center; gap:6px; }
.phone:hover{ color:var(--naranja); }
.nav-login{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--texto); border:1.5px solid var(--tw-line); padding:9px 16px; border-radius:999px; text-decoration:none; font-size:.92rem; }
.nav-login:hover{ border-color:var(--naranja); color:var(--naranja); }
.register-worker{ display:inline-flex; background:var(--naranja); border-radius:999px; box-shadow:0 8px 20px rgba(255,107,0,.28); }
.register-worker:hover{ background:var(--naranja-oscuro); }
.register-worker a{ display:inline-flex; align-items:center; gap:7px; color:#fff !important; text-decoration:none; padding:10px 18px; font-weight:700; font-size:.92rem; }
.mobile-menu-content .nav-login,.mobile-menu-content .register-worker{ width:100%; justify-content:center; }
.mobile-menu-content .register-worker a{ justify-content:center; width:100%; }
.language-switcher{ display:flex; gap:4px; }
.language-btn{ border:1px solid var(--tw-line); background:#fff; color:var(--gris); border-radius:999px; padding:6px 11px; font-weight:700; cursor:pointer; font-size:.8rem; }
.language-btn:hover{ border-color:var(--naranja); color:var(--naranja); }
.mobile-menu-btn{ display:none; background:none; border:none; font-size:1.4rem; color:var(--texto); cursor:pointer; }
.mobile-menu{ display:none; }
.mobile-menu.active{ display:block; position:fixed; inset:66px 0 auto 0; background:#fff; border-bottom:1px solid var(--tw-line); box-shadow:var(--tw-shadow-lg); z-index:99; }
.mobile-menu-content{ display:flex; flex-direction:column; gap:12px; padding:20px; }

/* Hero -------------------------------------------------------------- */
.hero{ background:linear-gradient(180deg,#FFF7F0 0%, #F6F8FB 100%); text-align:center; padding:64px 20px 34px; }
.hero h1{ font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:0 auto 16px; max-width:900px; color:var(--texto); }
.hero p{ font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--gris); max-width:660px; margin:0 auto; }

/* Formulario -------------------------------------------------------- */
.form-container{ background:#fff; border:1px solid var(--tw-line); border-radius:22px; box-shadow:var(--tw-shadow-lg); padding:30px; max-width:720px; margin:-18px auto 40px; box-sizing:border-box; }
.form-title{ font-size:1.5rem; font-weight:800; text-align:center; margin:0 0 22px; color:var(--texto); }
.form-group{ margin-bottom:16px; position:relative; }
.form-label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:7px; color:var(--texto); }
.form-control{ width:100%; font-family:inherit; font-size:16px; color:var(--texto); background:#fff; border:1.5px solid var(--tw-line); border-radius:10px; padding:13px 14px; min-height:48px; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.form-control:focus{ outline:none; border-color:var(--naranja); box-shadow:0 0 0 4px rgba(255,107,0,.18); }
textarea.form-control{ min-height:120px; resize:vertical; }
.phone-input-container{ display:flex; }
.phone-prefix{ display:flex; align-items:center; padding:0 14px; background:var(--fondo); border:1.5px solid var(--tw-line); border-right:0; border-radius:10px 0 0 10px; font-weight:700; color:var(--gris); }
.phone-input{ border-radius:0 10px 10px 0 !important; }
.submit-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--naranja); color:#fff; border:none; padding:15px; border-radius:999px; font-size:1.05rem; font-weight:700; cursor:pointer; min-height:52px; box-shadow:0 8px 20px rgba(255,107,0,.28); transition:background .2s; font-family:inherit; }
.submit-btn:hover{ background:var(--naranja-oscuro); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; }
.alert{ border-radius:10px; padding:14px 16px; font-size:.95rem; margin-top:14px; display:flex; align-items:center; gap:10px; }
.alert-loading{ background:var(--fondo); color:var(--gris); }
.alert-success{ background:rgba(31,164,99,.12); color:#12703f; }
.alert-error{ background:rgba(226,61,61,.1); color:#b71c1c; }

/* Secciones --------------------------------------------------------- */
.services-section,.reviews-section,.ciudades-section,.property-types{ padding:52px 0; }
.reviews-section{ background:var(--fondo); }
.section-title{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.015em; text-align:center; margin:0 0 30px; color:var(--texto); position:relative; }
.section-title:after{ content:none !important; }

/* Servicios / propiedades (cards) ----------------------------------- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; max-width:1160px; margin:0 auto; }
.service-card{ background:#fff; border:1px solid var(--tw-line); border-radius:16px; padding:22px 16px; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; box-shadow:var(--tw-shadow); }
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--tw-shadow-lg); border-color:var(--naranja); }
.service-icon{ width:56px; height:56px; margin:0 auto 12px; border-radius:14px; background:var(--tw-orange-50); color:var(--naranja); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.service-name{ font-weight:700; font-size:.98rem; color:var(--texto); }
.property-types .services-grid,.property-card{ }
.property-card{ background:#fff; border:1px solid var(--tw-line); border-radius:16px; padding:22px 16px; text-align:center; box-shadow:var(--tw-shadow); }
.property-icon{ font-size:1.6rem; color:var(--naranja); margin-bottom:10px; }

/* Reviews ----------------------------------------------------------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; max-width:1160px; margin:0 auto; }
.review-card{ background:#fff; border:1px solid var(--tw-line); border-radius:16px; padding:24px; box-shadow:var(--tw-shadow); }
.review-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-name{ font-weight:700; color:var(--texto); }
.review-date{ font-size:.82rem; color:var(--gris); }
.review-stars{ color:var(--tw-gold); margin-bottom:8px; }
.review-text{ color:var(--gris); font-size:.96rem; }

/* Ciudades ---------------------------------------------------------- */
.ciudad-item{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--tw-line); border-radius:999px; padding:9px 16px; margin:5px; font-size:.9rem; font-weight:600; color:var(--texto); }
.ciudad-icon{ color:var(--naranja); }
.ciudades-section .container{ text-align:center; }

/* Footer ------------------------------------------------------------ */
.footer{ background:var(--azul); color:#cdd7e4; padding:52px 0 26px; }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; max-width:1160px; margin:0 auto; }
.footer-title{ color:#fff; font-weight:700; margin-bottom:14px; font-size:1.05rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer a{ color:#cdd7e4; text-decoration:none; }
.footer a:hover{ color:#fff; }

/* Modal ------------------------------------------------------------- */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(16,35,59,.55); z-index:1000; align-items:center; justify-content:center; padding:18px; }
.modal-overlay.active{ display:flex; }
.modal-overlay .modal-content{ background:#fff; border-radius:20px; padding:30px; width:100%; max-width:440px; box-shadow:var(--tw-shadow-lg); max-height:92vh; overflow-y:auto; }
.modal-footer-links{ text-align:center; margin-top:16px; }
.skip-link{ color:var(--naranja); font-weight:700; text-decoration:none; }
.privacy-text{ font-size:.82rem; color:var(--gris); }

/* Preview de imágenes (AI) ------------------------------------------ */
.preview-image-wrapper{ position:relative; width:84px; height:84px; }
.preview-image{ width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--tw-line); }
.remove-image-btn{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:none; background:var(--tw-red); color:#fff; cursor:pointer; font-size:14px; line-height:1; }

@media(max-width:820px){
  .mobile-menu-btn{ display:block; }
  .header-right .phone,.header-right .register-worker,.header-right .nav-login,.header-right .language-switcher{ display:none; }
  .services-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}

/* ===== Extensiones para register / profile / review / admin-login ===== */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.form-subtitle{ font-size:1.1rem; font-weight:800; color:var(--texto); margin:28px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--tw-line); display:flex; align-items:center; gap:8px; }
.form-subtitle:before{ content:""; width:4px; height:18px; background:var(--naranja); border-radius:2px; }
.form-label.required:after{ content:" *"; color:var(--tw-red); }
.radio-group{ display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
.radio-option,.checkbox-option{ display:flex; align-items:center; gap:8px; padding:11px 14px; border:1.5px solid var(--tw-line); border-radius:10px; cursor:pointer; font-size:.95rem; transition:border-color .15s, background .15s; background:#fff; }
.radio-option:hover,.checkbox-option:hover{ border-color:var(--naranja); background:var(--tw-orange-50); }
.radio-option input,.checkbox-option input{ accent-color:var(--naranja); width:18px; height:18px; }
.checkbox-group{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.map-container{ height:300px; margin:14px 0; border-radius:14px; overflow:hidden; border:1px solid var(--tw-line); }
#map{ height:100%; width:100%; }

/* Bootstrap overrides -> marca */
.btn{ border-radius:999px !important; font-weight:700 !important; font-family:inherit; }
.btn-naranja,.btn-primary,.btn-login{ background:var(--naranja) !important; border-color:var(--naranja) !important; color:#fff !important; }
.btn-naranja:hover,.btn-primary:hover,.btn-login:hover{ background:var(--naranja-oscuro) !important; border-color:var(--naranja-oscuro) !important; }
.form-check-input:checked{ background-color:var(--naranja); border-color:var(--naranja); }
.form-control:focus{ border-color:var(--naranja) !important; box-shadow:0 0 0 4px rgba(255,107,0,.18) !important; }

/* admin-login card */
.login-container{ max-width:420px; width:100%; margin:0 auto; padding:34px; background:#fff; border:1px solid var(--tw-line); border-radius:20px; box-shadow:var(--tw-shadow-lg); }
.login-logo{ text-align:center; margin-bottom:26px; }
.login-logo .logo-text{ font-size:1.5rem; justify-content:center; }
body.admin-bg{ background:var(--fondo); }

/* profile / review genericos */
.badge-verified{ display:inline-flex; align-items:center; gap:6px; background:rgba(31,164,99,.12); color:var(--verde); padding:5px 12px; border-radius:999px; font-weight:700; font-size:.82rem; }