/* ============================================================
   Calculadora de Ritmos v3
   ============================================================ */
.cr-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:760px;margin:1.5rem auto;color:#111}
.cr-wrap *,.cr-wrap *::before,.cr-wrap *::after{box-sizing:border-box}

/* Cabecera */
.cr-header{display:flex;align-items:center;gap:14px;padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:1px solid #e5e5e5}
.cr-logo{height:54px;width:auto;max-width:110px;object-fit:contain;border-radius:6px}
.cr-header-label{display:block;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.07em}
.cr-header-club{display:block;font-size:20px;font-weight:700;color:#111;line-height:1.2}

/* Bloques */
.cr-block{margin-bottom:1.25rem}
.cr-block-title{display:block;font-size:11px;font-weight:600;color:#999;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}

/* Nombre atleta */
.cr-atleta-input{
    width:100%;max-width:380px;padding:9px 14px;
    border:1px solid #e0e0e0;border-radius:8px;
    font-size:15px;font-family:inherit;color:#111;
    outline:none;background:#fafafa;
    transition:border-color .15s,background .15s;
}
.cr-atleta-input:focus{border-color:#111;background:#fff}
.cr-atleta-input::placeholder{color:#bbb}

/* Botones distancia */
.cr-dist-btns{display:flex;flex-wrap:wrap;gap:6px}
.cr-d-btn{padding:6px 16px;border:1px solid #ddd;border-radius:20px;background:transparent;cursor:pointer;font-size:13px;font-family:inherit;color:#555;transition:all .15s}
.cr-d-btn:hover{border-color:#aaa;background:#f5f5f5;color:#111}
.cr-d-btn.cr-d-active{background:#111;color:#fff;border-color:#111}

/* ---- Input HH MM SS ---------------------------------------- */
.cr-time-wrap{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}

.cr-time-fields{
    display:flex;align-items:center;gap:4px;
    background:#f7f7f7;border:1px solid #e0e0e0;
    border-radius:12px;padding:12px 16px;
    flex-shrink:0;
}

.cr-time-unit{display:flex;flex-direction:column;align-items:center;gap:4px}
.cr-time-unit label{font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

.cr-hms{
    width:64px;text-align:center;
    font-size:30px;font-weight:700;
    font-family:'Courier New',Courier,monospace;
    border:none;border-bottom:2px solid #ddd;background:transparent;
    color:#111;padding:2px 4px;outline:none;
    -moz-appearance:textfield;
    transition:border-color .15s;
}
.cr-hms::-webkit-outer-spin-button,.cr-hms::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cr-hms:focus{border-bottom-color:#111}
.cr-hms::placeholder{color:#ccc;font-weight:400;font-size:26px}

.cr-hms-sep{font-size:22px;font-weight:300;color:#ccc;margin:0 2px;align-self:flex-end;padding-bottom:4px}

.cr-btn-clear{
    background:none;border:none;cursor:pointer;
    color:#ccc;font-size:18px;padding:0 6px;
    margin-left:6px;align-self:center;
    transition:color .15s;line-height:1;
}
.cr-btn-clear:hover{color:#999}

/* Resumen de ritmo junto al input */
.cr-pace-summary{display:flex;gap:10px;align-items:center}
.cr-pace-box{background:#f5f5f5;border:1px solid #e8e8e8;border-radius:8px;padding:10px 14px;text-align:center;min-width:88px}
.cr-pace-lbl{display:block;font-size:10px;color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.cr-pace-val{display:block;font-size:19px;font-weight:700;font-family:'Courier New',Courier,monospace;color:#111;white-space:nowrap}

/* Placeholder */
.cr-placeholder{text-align:center;padding:2.5rem 1rem;color:#bbb;font-size:14px;border:1.5px dashed #e5e5e5;border-radius:10px;margin-top:.5rem}
.cr-placeholder svg{display:block;margin:0 auto 10px;color:#ccc}
.cr-placeholder p{margin:0}

/* Zonas */
.cr-zones{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.cr-zone{border-radius:10px;padding:11px 6px;text-align:center;border:1px solid rgba(0,0,0,.07)}
.cr-zone-name{font-size:13px;font-weight:700;margin-bottom:2px}
.cr-zone-desc{font-size:9px;margin-bottom:6px;line-height:1.3;opacity:.85}
.cr-zone-pct{font-size:9px;font-family:monospace;margin-bottom:6px;opacity:.75}
.cr-zone-pace{font-size:12px;font-weight:700;font-family:'Courier New',Courier,monospace;line-height:1.6}
.cr-zone-unit{font-size:8px;opacity:.65;margin-top:2px}

/* Tablas */
.cr-tables{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:1rem}
.cr-table{width:100%;border-collapse:collapse;font-size:13px}
.cr-table th{font-size:11px;font-weight:600;color:#999;text-align:left;padding:6px 8px;border-bottom:1px solid #e5e5e5;text-transform:uppercase;letter-spacing:.05em}
.cr-table td{padding:7px 8px;border-bottom:1px solid #f2f2f2;color:#222}
.cr-table tr:last-child td{border-bottom:none}
.cr-table td:last-child{font-family:'Courier New',Courier,monospace;font-weight:700;text-align:right}
.cr-table tr:hover td{background:#fafafa}
.cr-pct-bar{display:inline-block;width:28px;height:4px;border-radius:2px;background:#ebebeb;vertical-align:middle;margin-left:5px;overflow:hidden}
.cr-pct-fill{height:100%;border-radius:2px;background:#bbb}

/* Acciones */
.cr-actions{display:flex;gap:10px;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f0f0}
.cr-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.cr-btn-email{background:#f0f0f0;color:#333}.cr-btn-email:hover{background:#e5e5e5}
.cr-btn-pdf  {background:#111;color:#fff}  .cr-btn-pdf:hover{background:#333}
.cr-btn:disabled{opacity:.45;cursor:not-allowed}

/* Modal */
.cr-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99999;align-items:center;justify-content:center}
.cr-modal-overlay.cr-open{display:flex}
.cr-modal{background:#fff;border-radius:12px;width:100%;max-width:400px;margin:1rem;box-shadow:0 8px 40px rgba(0,0,0,.16)}
.cr-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f0f0f0}
.cr-modal-hdr h3{margin:0;font-size:15px;font-weight:700}
.cr-modal-x{background:none;border:none;cursor:pointer;font-size:18px;color:#aaa;padding:0;line-height:1;transition:color .15s}
.cr-modal-x:hover{color:#333}
.cr-modal-body{padding:20px}
.cr-modal-body label{display:block;font-size:11px;color:#888;margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.cr-modal-body input[type="email"]{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.cr-modal-body input[type="email"]:focus{border-color:#111}
.cr-modal-note{margin-top:10px;font-size:13px;border-radius:6px;padding:8px 10px;display:none}
.cr-modal-note.cr-ok  {display:block;background:#E1F5EE;color:#085041}
.cr-modal-note.cr-err {display:block;background:#FCEBEB;color:#501313}
.cr-modal-note.cr-inf {display:block;background:#E6F1FB;color:#042C53}
.cr-modal-ftr{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #f0f0f0}
.cr-btn-sec{background:#f0f0f0;color:#333}.cr-btn-sec:hover{background:#e5e5e5}
.cr-btn-pri{background:#111;color:#fff}.cr-btn-pri:hover{background:#333}

/* Responsive */
@media(max-width:600px){
    .cr-zones{grid-template-columns:repeat(3,1fr)}
    .cr-tables{grid-template-columns:1fr}
    .cr-time-wrap{flex-direction:column}
    .cr-pace-summary{flex-wrap:wrap}
}
@media(max-width:380px){
    .cr-zones{grid-template-columns:repeat(2,1fr)}
    .cr-actions{flex-direction:column}
    .cr-hms{width:52px;font-size:26px}
}