.kit-cal-page { background:var(--bg); color:var(--text-1); }
.kit-cal-page * { box-sizing:border-box; }
.kit-cal-wrap { max-width:1180px; margin:0 auto; padding:0 20px; }

.kit-cal-hero { background:linear-gradient(180deg,#1F0046 0%, #2A0B61 100%); color:#fff; padding:42px 20px 64px; }
.kit-cal-hero .eyebrow { display:inline-block; background:rgba(255,203,71,.2); color:#FFE08A; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.kit-cal-hero h1 { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:800; line-height:1.15; margin:6px 0 12px; letter-spacing:-.02em; }
.kit-cal-hero h1 .accent { background:linear-gradient(90deg,#FFCB47,#FFE08A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kit-cal-hero p { font-size:1rem; color:rgba(255,255,255,.82); max-width:680px; line-height:1.55; margin:0; }

/* Tabs */
.kit-cal-tabs { display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap; overflow-x:auto; padding-bottom:6px; position:relative; z-index:2; }
.kit-cal-tab { background:var(--bg-card); border:1.5px solid var(--border); padding:10px 16px; border-radius:11px; cursor:pointer; font-size:.84rem; font-weight:700; color:var(--text-2); white-space:nowrap; transition:border-color .12s, color .12s, background .12s; display:inline-flex; align-items:center; gap:6px; }
.kit-cal-tab:hover { border-color:#7B2FBE; color:var(--accent-text, #7B2FBE); }
.kit-cal-tab.is-active { background:#1F0046; color:#fff; border-color:#1F0046; }
.kit-cal-tab-badge { background:rgba(123,47,190,.2); color:var(--accent-text, #7B2FBE); font-size:.7rem; font-weight:800; padding:2px 7px; border-radius:999px; }
.kit-cal-tab.is-active .kit-cal-tab-badge { background:rgba(255,255,255,.22); color:#fff; }
.kit-cal-tab.has-overdue .kit-cal-tab-badge { background:#FFE3E7; color:var(--error); }
.kit-cal-tab.is-active.has-overdue .kit-cal-tab-badge { background:rgba(255,255,255,.22); color:#fff; }

/* Toolbar */
.kit-cal-toolbar { background:var(--bg-card); border:1px solid var(--border); border-radius:13px; padding:12px 14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.kit-cal-toolbar-info { flex:1; color:var(--text-2); font-size:.86rem; }
.kit-cal-toolbar-info strong { color:var(--text-1); }
.kit-cal-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:9px; font-weight:600; font-size:.84rem; cursor:pointer; border:0; transition:background .12s; text-decoration:none; }
.kit-cal-btn-primary { background:#7B2FBE; color:#fff; }
.kit-cal-btn-primary:hover { background:#6A26A8; }
.kit-cal-btn-secondary { background:var(--bg-card-2); color:var(--text-2); border:1px solid var(--border); }
.kit-cal-btn-secondary:hover { background:var(--bg-card-2); color:var(--accent-text, #7B2FBE); }
.kit-cal-btn-danger { background:transparent; color:var(--error); border:0; padding:6px 10px; font-weight:600; font-size:.82rem; cursor:pointer; }
.kit-cal-btn-danger:hover { background:#FFE3E7; border-radius:7px; }

/* Empty state */
.kit-cal-empty { background:var(--bg-card); border:2px dashed #EDE5F8; border-radius:14px; padding:60px 30px; text-align:center; margin-top:18px; }
.kit-cal-empty svg { width:56px; height:56px; opacity:.5; margin-bottom:14px; color:var(--accent-text, #7B2FBE); }
.kit-cal-empty h2 { font-size:1.15rem; font-weight:700; margin:0 0 6px; color:var(--text-1); }
.kit-cal-empty p { font-size:.92rem; color:var(--text-3); margin:0 0 20px; line-height:1.5; }
.kit-cal-empty-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Table */
.kit-cal-tbl-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:13px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kit-cal-tbl { width:100%; min-width:600px; border-collapse:collapse; font-size:.88rem; }
.kit-cal-tbl thead { background:var(--bg-card-2); }
.kit-cal-tbl th { padding:11px 14px; text-align:left; font-size:.7rem; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.kit-cal-tbl td { padding:11px 14px; border-top:1px solid var(--border); vertical-align:middle; }
.kit-cal-tbl tr:hover { background:var(--bg-card-2); }
.kit-cal-row-nombre { font-weight:700; color:var(--text-1); }
.kit-cal-row-servicio { font-size:.82rem; color:var(--text-2); }
.kit-cal-row-precio { font-weight:600; color:var(--text-1); }
.kit-cal-row-actions { display:flex; gap:6px; justify-content:flex-end; }
.kit-cal-row-actions button, .kit-cal-row-actions a { background:transparent; border:0; color:var(--accent-text, #7B2FBE); cursor:pointer; padding:6px 10px; border-radius:6px; font-size:.78rem; font-weight:600; text-decoration:none; transition:background .12s; }
.kit-cal-row-actions button:hover, .kit-cal-row-actions a:hover { background:var(--bg-card-2); }
.kit-cal-row-actions .renovar { color:var(--teal); }
.kit-cal-row-actions .renovar:hover { background:#E6F9F0; }
.kit-cal-row-actions .borrar { color:var(--error); }
.kit-cal-row-actions .borrar:hover { background:#FFE3E7; }

.kit-cal-fecha-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap; }
.kit-cal-fecha-pill.vencido { background:#FFE3E7; color:var(--error); }
.kit-cal-fecha-pill.hoy     { background:#FFCB47; color:#5C3D00; }
.kit-cal-fecha-pill.manana  { background:#FFF6DA; color:var(--warn); }
.kit-cal-fecha-pill.semana  { background:var(--bg-card-2); color:var(--accent-text, #7B2FBE); }
.kit-cal-fecha-pill.mes     { background:#E6F9F0; color:var(--teal); }
.kit-cal-fecha-pill.lejos   { background:#F0EAF8; color:var(--text-2); }

/* Modal */
.kit-cal-modal { padding:0; margin:auto; border:1px solid var(--border-mid); border-radius:16px; background:var(--bg-card); color:var(--text-1); width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 32px); }
.kit-cal-modal::backdrop { background:rgb(15 0 32 / .65); }
.kit-cal-modal-box { background:var(--bg-card); border-radius:16px; padding:24px; max-width:480px; width:100%; max-height:90vh; overflow:auto; }
.kit-cal-modal-box h2 { font-size:1.05rem; font-weight:700; margin:0 0 14px; color:var(--text-1); }
.kit-cal-form-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.kit-cal-form-field { flex:1; min-width:140px; }
.kit-cal-form-field label { display:block; font-size:.74rem; color:var(--text-2); font-weight:600; margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em; }
.kit-cal-form-field input { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:9px; font-size:.92rem; outline:none; }
.kit-cal-form-field input:focus { border-color:#7B2FBE; }
.kit-cal-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

/* Banner CTA */
.kit-cal-cta-account { background:linear-gradient(135deg,#F5F0FC 0%, #EDE5F8 100%); border:1px solid #C9B6E8; border-radius:13px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kit-cal-cta-account-text { flex:1; min-width:220px; }
.kit-cal-cta-account-text strong { display:block; color:var(--text-1); font-size:.92rem; font-weight:700; margin-bottom:2px; }
.kit-cal-cta-account-text span { color:var(--text-2); font-size:.82rem; }

.kit-cal-views { display:flex; gap:8px; margin:16px 0; }
.kit-cal-tab.is-active { background:var(--accent-solid); color:#fff; border-color:var(--accent-solid); }
.kit-cal-tab-badge { background:var(--bg-card-2); color:var(--text-2); }
.kit-cal-file-actions summary { min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; color:var(--text-2); cursor:pointer; font-size:.9rem; }
.kit-cal-file-actions[open] { flex-basis:100%; }
.kit-cal-file-actions > div { padding:16px 0; }
.kit-cal-file-actions label { display:block; font-weight:600; margin-bottom:8px; }
.kit-cal-csv-help { margin:10px 0 16px; color:var(--text-2); font-size:.85rem; line-height:1.5; }
.kit-cal-notice, .kit-cal-error { margin:12px 0; font-size:.9rem; color:var(--text-2); }
.kit-cal-error { color:var(--error); }
.kit-cal-day { background:var(--bg-card-2); border:1px solid var(--border); border-radius:8px; min-height:100px; padding:6px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.kit-cal-day.is-today { border-color:var(--accent-text); }
.kit-cal-day.is-empty { background:transparent; border-color:transparent; }
.kit-cal-day-number { font-weight:600; color:var(--text-2); }
.kit-cal-event { background:var(--bg-card); color:var(--text-1); border:1px solid var(--border); border-radius:6px; text-align:left; padding:6px; font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.kit-cal-month-wrap { overflow:auto; }
.kit-cal-month-grid { min-width:680px; }
.kit-cal-tbl-wrap:focus-visible, .kit-cal-month-wrap:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
.kit-cal-tbl th { text-transform:none; font-size:.8rem; letter-spacing:0; }
.kit-cal-tbl th:first-child, .kit-cal-tbl td:first-child { position:sticky; left:0; background:var(--bg-card); z-index:1; min-width:140px; max-width:200px; }
.kit-cal-row-nombre { background:transparent; border:0; padding:0; text-align:left; color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.kit-cal-row-actions { flex-wrap:wrap; min-width:250px; }
.kit-cal-row-actions a { display:inline-flex; align-items:center; min-height:44px; }
.kit-cal-fecha-pill.vencido, .kit-cal-fecha-pill.manana, .kit-cal-fecha-pill.mes { background:var(--bg-card); }
.kit-cal-fecha-pill.hoy { background:var(--bg-card); color:var(--warn); }
.kit-cal-fecha-pill.lejos { background:var(--bg-card-2); color:var(--text-2); }
.kit-cal-form-field label { text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--text-2); }
.kit-cal-form-field { min-width:0; flex-basis:150px; }
.kit-cal-form-field input { min-width:0; }
.kit-cal-cta-account { background:var(--bg-card); border-color:var(--border); margin-top:20px; }
@media(max-width:640px) { .kit-cal-wrap { padding:0 16px; } .kit-cal-modal-box { padding:20px; } .kit-cal-month-wrap { padding:12px !important; } .kit-cal-tab { padding:8px 10px; } .kit-cal-empty { padding:32px 16px; } }

.kit-cal-csv-help code { overflow-wrap:anywhere; }
