:root{
      --bg:#0f1115; --panel:#161a22; --muted:#8a93a5; --brand:#4f46e5; --ok:#22c55e; --danger:#ef4444;
      --card:#1b2130; --chip:#111827; --ring:#334155; --text:#e5e7eb; --accent:#14b8a6;
    }
    *{box-sizing:border-box}
    body{margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; color:var(--text); background:radial-gradient(1000px 500px at 10% -10%, #1f2937 0, #0f1115 40%);}    
    a{color:inherit}
    .container{max-width:1100px; margin:40px auto; padding:0 16px}

    /* Stepper */
    .stepper{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px}
    .step{display:flex; align-items:center; gap:8px; background:var(--panel); padding:10px 12px; border-radius:14px; border:1px solid #22293a}
    .step.active{outline:2px solid var(--brand);}
    .step .dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#0b1220; border:1px solid var(--ring)}
    .step.active .dot{background:var(--brand); border-color:transparent}
    .step small{color:var(--muted)}

    @media(max-width:900px){
      .stepper{grid-template-columns:repeat(2,1fr);}
    }
    @media(max-width:600px){
      .stepper{display:flex; overflow-x:auto; gap:8px; scrollbar-width:none;}
      .stepper::-webkit-scrollbar{display:none;}
      .stepper .step{flex:0 0 auto; min-width:180px;}
    }

    /* Layout */
    .grid{display:grid; grid-template-columns:1.4fr .6fr; gap:18px}
    @media(max-width:980px){.grid{grid-template-columns:1fr}}

    /* Cards servicios */
    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:620px){.cards{grid-template-columns:1fr}}
    .card{background:var(--card); border:1px solid #202736; padding:14px; border-radius:16px; display:flex; flex-direction:column; gap:10px}
    .card h4{margin:0 0 2px 0}
    .meta{display:flex; gap:10px; flex-wrap:wrap; color:#cbd5e1}
    .chip{background:var(--chip); border:1px solid #223047; padding:2px 8px; border-radius:999px; font-size:12px}
    .row{display:flex; gap:10px; align-items:center; justify-content:space-between}
    .btn{appearance:none; border:1px solid #263147; background:#0b1220; color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer}
    .btn:hover{border-color:#3a4b6a}
    .btn.primary{background:var(--brand); border-color:transparent}
    .btn.ghost{background:transparent}
    .btn.warn{background:#3b0d0d; border-color:#7f1d1d}
    .btn.sm{padding:7px 10px; font-size:14px}
    .btn.block{display:block; width:100%}
    .btn[disabled]{opacity:.5; cursor:not-allowed}

    /* Summary */
    .summary{position:sticky; top:16px; background:var(--panel); padding:14px; border:1px solid #22293a; border-radius:16px; display:flex; flex-direction:column; gap:8px}
    .summary h3{margin:0 0 6px}
    .summary ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
    .summary li{display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0c1322; border:1px solid #202736; padding:8px 10px; border-radius:12px}
    .muted{color:var(--muted)}
    .fine{font-size:13px; color:var(--muted)}
    .tag{font-size:12px; padding:1px 7px; border-radius:999px; background:#0e1726; border:1px solid #273147; color:#cbd5e1}

    /* Date & slots */
    .date-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    input[type=date], input[type=text], input[type=tel]{background:#0b1220; border:1px solid #263147; color:var(--text); padding:10px 12px; border-radius:10px}
    .slots{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .slot{padding:8px 12px; border-radius:10px; background:#1f272f; border:1px solid #2b3647; cursor:pointer}
    .slot.disabled{opacity:.35; cursor:not-allowed; text-decoration:line-through}
    .slot.selected{background:var(--accent); border-color:transparent}

    /* Sections */
    section{background:var(--panel); padding:16px; border:1px solid #22293a; border-radius:16px}
    .hidden{display:none !important}
    .warnbox{background:#1e1515; border:1px solid #7f1d1d; color:#fecaca; padding:8px 10px; border-radius:12px}
    .okbox{background:#102318; border:1px solid #14532d; color:#bbf7d0; padding:8px 10px; border-radius:12px}
    .footer-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:16px}
    hr{border:0; border-top:1px solid #243045; margin:12px 0}
    .skeleton{height:34px; border-radius:10px; background:linear-gradient(90deg,#141a22, #1b2330, #141a22); background-size:200% 100%; animation:shine 1.2s linear infinite}
    @keyframes shine{to{background-position:-200% 0}}