.sp5-widget {
    font-family: 'Segoe UI', Arial, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(30,58,95,0.18);
    margin: 24px 0;
    max-width: 780px;
    background: #f8f4ff;
}
.sp5-cab {
    background: linear-gradient(135deg, #1e3a5f 0%, #8e44ad 100%);
    padding: 28px 24px 20px;
    text-align: center;
    color: #fff;
}
.sp5-logo { font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.sp5-reloj { font-size: 52px; font-weight: 200; letter-spacing: 4px; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
.sp5-fechas { display:flex; justify-content:center; gap:14px; margin-bottom:10px; font-size:13px; flex-wrap:wrap; }
.sp5-proxima { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:5px 18px; font-size:13px; font-weight:600; }
.sp5-buscar { background:#fff; padding:18px 20px; border-bottom:1px solid #ede8f5; }
.sp5-btn-gps { width:100%; padding:12px; background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:12px; transition:opacity .2s; }
.sp5-btn-gps:hover { opacity:.88; }
.sp5-sep { text-align:center; position:relative; margin-bottom:12px; }
.sp5-sep::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#ede8f5; }
.sp5-sep span { background:#fff; padding:0 12px; position:relative; font-size:12px; color:#aaa; }
.sp5-fila { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.sp5-campo { position:relative; }
.sp5-campo label { display:block; font-size:11px; font-weight:700; color:#8e44ad; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
.sp5-input { width:100%; padding:10px 12px; border:2px solid #ede8f5; border-radius:10px; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
.sp5-input:focus { border-color:#8e44ad; }
.sp5-select { width:100%; padding:10px 12px; border:2px solid #ede8f5; border-radius:10px; font-size:13px; outline:none; background:#fff; box-sizing:border-box; }
.sp5-select:focus { border-color:#8e44ad; }
.sp5-sug-list { position:absolute; top:100%; left:0; right:0; background:#fff; border:2px solid #ede8f5; border-radius:10px; z-index:999; overflow:hidden; display:none; box-shadow:0 6px 18px rgba(0,0,0,.1); }
.sp5-sug-item { padding:9px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid #f3f0f9; }
.sp5-sug-item:hover { background:#f0e8ff; color:#8e44ad; font-weight:600; }
.sp5-btn { width:100%; padding:13px; background:linear-gradient(135deg,#1e3a5f,#8e44ad); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; transition:opacity .2s; }
.sp5-btn:hover { opacity:.9; }
.sp5-hoy { padding:20px; }
.sp5-hoy-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.sp5-hoy-ciudad { font-size:20px; font-weight:800; color:#1e3a5f; }
.sp5-hoy-fecha  { font-size:13px; color:#8e44ad; font-weight:600; margin-top:3px; }
.sp5-cambiar { background:linear-gradient(135deg,#1e3a5f,#8e44ad); color:#fff; border:none; border-radius:10px; padding:8px 16px; font-size:13px; cursor:pointer; font-weight:700; white-space:nowrap; }
.sp5-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:500px){ .sp5-grid { grid-template-columns:repeat(2,1fr); } }
.sp5-card { background:#fff; border-radius:14px; border:2px solid #ede8f5; border-top:4px solid var(--c); padding:14px 10px 10px; text-align:center; position:relative; transition:all .2s; }
.sp5-card.activa { box-shadow:0 4px 18px rgba(142,68,173,.2); border-color:var(--c); transform:translateY(-2px); }
.sp5-card-ico    { font-size:26px; margin-bottom:4px; }
.sp5-card-nombre { font-size:14px; font-weight:800; color:#1e3a5f; }
.sp5-card-ar     { font-size:18px; color:#8e44ad; font-family:'Traditional Arabic','Arabic Typesetting',serif; direction:rtl; margin:2px 0; }
.sp5-card-desc   { font-size:11px; color:#aaa; margin-bottom:6px; }
.sp5-card-hora   { font-size:22px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; }
.sp5-nb { position:absolute; top:8px; right:8px; background:none; border:1.5px solid #ede8f5; border-radius:6px; padding:2px 5px; cursor:pointer; font-size:12px; color:#bbb; transition:all .2s; }
.sp5-nb:hover { border-color:#8e44ad; color:#8e44ad; }
.sp5-nb.on { border-color:#27ae60; color:#27ae60; background:#ecfdf5; }
.sp5-mes { padding:0 20px 20px; }
.sp5-mes-nav { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#1e3a5f,#8e44ad); color:#fff; border-radius:12px; padding:12px 18px; margin-bottom:12px; }
.sp5-mes-nav button { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:6px 14px; cursor:pointer; font-size:13px; font-weight:600; }
.sp5-mes-nav button:hover { background:rgba(255,255,255,.35); }
.sp5-tabla-wrap { overflow-x:auto; border-radius:12px; border:1px solid #ede8f5; }
.sp5-tabla { width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
.sp5-tabla thead tr { background:linear-gradient(135deg,#1e3a5f,#8e44ad); color:#fff; }
.sp5-tabla th { padding:10px 8px; text-align:center; font-size:12px; white-space:nowrap; }
.sp5-tabla td { padding:9px 8px; text-align:center; border-bottom:1px solid #f3f0f9; font-variant-numeric:tabular-nums; }
.sp5-tabla tbody tr:hover { background:#f8f4ff; }
.sp5-tabla tbody tr.hoy-row { background:linear-gradient(90deg,rgba(142,68,173,.1),rgba(30,58,95,.05)); font-weight:700; }
.sp5-tabla tbody tr.hoy-row td:first-child { background:#8e44ad; color:#fff; border-radius:6px; }
.sp5-footer { background:linear-gradient(90deg,#1e3a5f,#8e44ad); color:rgba(255,255,255,.7); text-align:center; font-size:11px; padding:9px; }
.sp5-error { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; border-radius:10px; padding:11px 14px; font-size:13px; margin:10px 0 0; }