*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Arial,sans-serif;background-color:#f0f2f5;color:#2c3e50;line-height:1.6;min-height:100vh}.header{background-color:#2c3e50;color:#ecf0f1;padding:16px 24px;display:flex;align-items:center;gap:10px}.header h1{font-size:1.3rem;font-weight:600;letter-spacing:.5px}.header span{font-size:1.5rem}.main{max-width:900px;margin:0 auto;padding:28px 20px}.search-section{background-color:#fff;border:1px solid #dde1e7;border-radius:6px;padding:20px 24px;margin-bottom:28px}.search-section h2{font-size:1rem;font-weight:600;margin-bottom:14px;color:#34495e}.autocomplete-wrapper{position:relative}.autocomplete-input{width:100%;padding:9px 36px 9px 12px;border:1px solid #bdc3c7;border-radius:4px;font-size:.95rem;outline:none;transition:border-color .2s}.autocomplete-input:focus{border-color:#2980b9}.autocomplete-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1rem;color:#6b7280;pointer-events:none}.autocomplete-lista{position:absolute;top:calc(100% + 2px);left:0;right:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:4px;box-shadow:0 4px 10px #00000014;list-style:none;z-index:100;max-height:240px;overflow-y:auto}.autocomplete-item{display:flex;flex-direction:column;padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f2f5;transition:background-color .15s}.autocomplete-item:last-child{border-bottom:none}.autocomplete-item:hover{background-color:#eaf4fb}.autocomplete-item--vacio{color:#6b7280;font-size:.88rem;cursor:default}.autocomplete-item--vacio:hover{background-color:transparent}.item-nombre{font-weight:600;font-size:.9rem;color:#2c3e50}.item-detalle{font-size:.8rem;color:#7f8c8d;margin-top:2px}.msg-error{margin-top:8px;font-size:.85rem;color:#c0392b}.cards-section h2{font-size:1rem;font-weight:600;color:#34495e;margin-bottom:16px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.weather-card{background-color:#fff;border:1px solid #dde1e7;border-radius:6px;padding:22px 24px}.weather-card__titulo{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#7f8c8d;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #ecf0f1}.weather-card__ciudad{font-size:1.1rem;font-weight:600;color:#2c3e50;margin-bottom:14px}.weather-card__icono{font-size:3rem;margin-bottom:10px}.weather-card__temp{font-size:2rem;font-weight:700;color:#2c3e50;margin-bottom:4px}.weather-card__desc{font-size:.9rem;color:#7f8c8d;margin-bottom:16px}.weather-card__detalles{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid #ecf0f1;padding-top:14px}.detalle{display:flex;flex-direction:column}.detalle__label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.detalle__valor{font-size:.9rem;font-weight:600;color:#2c3e50}.estado-cargando,.estado-vacio{text-align:center;padding:40px 20px;color:#6b7280;background-color:#fff;border:1px solid #dde1e7;border-radius:6px;font-size:.95rem}.footer{text-align:center;padding:18px;font-size:.78rem;color:#6b7280;border-top:1px solid #dde1e7;margin-top:40px;background-color:#fff}