/* Layout */
.tp-page{background:#F6F7FB;padding:60px 0;min-height:100vh;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.tp-container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#111827}

/* Headings */
.tp-title{text-align:center;font-size:42px;font-weight:800;margin:10px 0 6px;color:#7C3AED}
.tp-subtitle{text-align:center;color:#6B7280;margin:0 0 24px}
.tp-section-title{font-size:34px;font-weight:800;margin:6px 0 16px}
.tp-purple-text{color:#7C3AED}
.tp-green-text{color:#16A34A}
.tp-orange-text{color:#F97316}
.tp-pink-text{color:#F472B6}

/* Landing cards */
.tp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1100px;margin:0 auto}
@media (max-width:1200px){.tp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.tp-cards{grid-template-columns:1fr}}
.tp-card{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,0.06);padding:22px;text-align:center}
.tp-card h3{margin:10px 0 6px;font-size:20px}
.tp-card p{margin:0 0 16px;color:#6B7280}
.tp-card-icon{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-size:26px;margin-top:4px}
.tp-card .tp-purple{background:#7C3AED}
.tp-card .tp-green{background:#16A34A}
.tp-card .tp-orange{background:#F97316}
.tp-card .tp-pink{background:#F472B6}

/* Buttons */
.tp-btn{border:1px solid #E5E7EB;background:#F3F4F6;padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600}
.tp-btn:hover{filter:brightness(0.98)}
.tp-btn-primary{color:#fff;border:0}
.tp-btn-primary.tp-purple{background:#7C3AED}
.tp-btn-primary.tp-green{background:#16A34A}
.tp-btn-primary.tp-orange{background:#F97316}
.tp-btn-primary.tp-pink{background:#F472B6}
.tp-btn-outline{background:#FFFFFF;border:1px solid #D1D5DB}
.tp-btn-ghost{background:transparent;border:1px solid #E5E7EB}
.tp-back{background:transparent;border:0;color:#374151;margin:6px 0 10px;cursor:pointer;font-weight:600}
.tp-btn-dark{background:#111;color:#fff;border-color:#111}
.tp-btn-dark:hover{background:#000;color:#fff}

/* Panels (centrados) */
.tp-panel{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,0.06);padding:18px;max-width:920px;margin:0 auto}
.tp-panel-purple{box-shadow:0 10px 30px rgba(124,58,237,0.10)}
.tp-panel-green{box-shadow:0 10px 30px rgba(22,163,74,0.10)}
.tp-panel-orange{box-shadow:0 10px 30px rgba(249,115,22,0.10)}
.tp-panel-pink{box-shadow:0 10px 30px rgba(244,114,182,0.12)}

/* Forms */
.tp-label{display:block;font-weight:700;margin:12px 0 8px}
.tp-input{width:100%;height:44px;border:1px solid #E5E7EB;border-radius:10px;padding:0 12px;background:#F9FAFB}
.tp-task-list{display:grid;gap:10px}
.tp-task-row{display:flex;align-items:center;gap:10px}
.tp-badge{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:#7C3AED}
.tp-task-input{flex:1;height:44px;border:1px solid #E5E7EB;border-radius:10px;padding:0 12px;background:#F9FAFB}
.tp-trash{width:36px;height:36px;border:1px solid #FCA5A5;color:#DC2626;background:#FEF2F2;border-radius:8px;cursor:pointer}
.tp-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.tp-spacer{flex:1}

/* Black overrides for blancos que no se ven */
#tp-gen-add,#tp-day-add,#tp-week-add,#tp-rt-add,
#tp-week-prev,#tp-week-next,
#tp-run-pause,#tp-run-next,#tp-run-reset{
    background:#111!important;color:#fff!important;border-color:#111!important
}
#tp-gen-add:hover,#tp-day-add:hover,#tp-week-add:hover,#tp-rt-add:hover,
#tp-week-prev:hover,#tp-week-next:hover,
#tp-run-pause:hover,#tp-run-next:hover,#tp-run-reset:hover{
    background:#000!important;color:#fff!important
}

/* Day select */
.tp-day-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.tp-day-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-day-btn{padding:14px 12px;border-radius:12px;border:1px solid #C7F7D1;background:#EBFDF0;color:#16A34A;font-weight:700;cursor:pointer}

/* Week progress */
.tp-progress{margin:4px 0 12px}
.tp-progress-bar{height:6px;width:0%;background:#F97316;border-radius:8px;transition:width .2s ease}
.tp-progress-text{font-size:12px;color:#6B7280;margin-top:6px}
.tp-week-day{margin:2px 0 8px}
.tp-week-badge{display:inline-block;background:#F97316;color:#fff;padding:6px 12px;border-radius:14px;font-weight:700}

/* Routine builder */
.tp-rt-ex{border:1px dashed #FBCFE8;padding:12px;border-radius:12px;background:#fff}
.tp-rt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:800px){.tp-rt-grid{grid-template-columns:1fr}}
.tp-file{border:1px solid #E5E7EB;border-radius:10px;padding:10px;background:#F9FAFB}
.tp-chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:999px;padding:6px 10px}
.tp-rt-prev-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #FBCFE8;border-radius:16px;padding:12px;margin-bottom:10px}
.tp-rt-thumb{width:110px;height:90px;object-fit:cover;border-radius:12px}

/* Run view */
.tp-run-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tp-run-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.tp-run-exname{font-size:32px;font-weight:800;margin:6px 0 8px}
.tp-run-big{font-size:72px;font-weight:800;color:#F472B6;letter-spacing:2px}
.tp-run-sub{color:#6B7280;margin:6px 0 10px}
.tp-progress-lg{margin-top:8px}
.tp-run-imgbox{flex:0 0 340px}
.tp-run-img{width:100%;height:240px;object-fit:cover;border-radius:14px;border:3px solid #FBCFE8}
.tp-run-ctrls .tp-btn{min-width:140px}

/* Section colors */
#tp-day-form .tp-badge{background:#16A34A}
#tp-week .tp-badge{background:#F97316}

/* Toast modal centrado */
#tp-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,92vw);background:#fff;border:1px solid #FBCFE8;border-radius:16px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.18);z-index:100000}
#tp-toast.is-hidden{display:none}
#tp-toast-mask{display:none;position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:99999}

/* Visibility */
.tp-step.is-hidden{display:none}

/* PDF */
.tp-pdf{padding:16px}
.tp-pdf h1,.tp-pdf h2,.tp-pdf h3{margin:0 0 8px}
.tp-pdf .tp-hr{height:3px;background:#7C3AED;margin:10px 0 14px;border-radius:3px}
.tp-pdf .tp-meta{font-size:12px;color:#374151;margin-bottom:10px}
.tp-pdf ol{padding-left:20px}
.tp-pdf li{margin-bottom:6px}

#tp-rt-edit{
    background:#111 !important;
    color:#fff !important;
    border-color:#111 !important;
}
#tp-rt-edit:hover{
    background:#000 !important;
    color:#fff !important;
}

.tp-rt-del{
    background:#111 !important;
    color:#fff !important;
    border-color:#111 !important;
}
.tp-rt-del:hover{
    background:#000 !important;
    color:#fff !important;
}


/* Botón negro reutilizable */
.tp-btn-black{background:#111;color:#fff;border:1px solid #111}
.tp-btn-black:hover{background:#000;color:#fff}

/* Modal */
.tp-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.tp-modal.is-hidden{display:none}
.tp-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.tp-modal__dialog{
  position:relative;background:#fff;border-radius:16px;border:1px solid #E5E7EB;
  max-width:560px;width:92%;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.2)
}

/* Asegurar contraste: botones “ghost/outline” oscuros */
.tp-btn-ghost{background:transparent;border:1px solid #E5E7EB;color:#111}
.tp-btn-ghost:hover{background:#f3f4f6}