@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F4EE;
  --surface:#FFFFFF;
  --surface-2:#FBF9F4;
  --ink:#1E1526;
  --ink-soft:#584F63;
  --muted:#948C9E;
  --line:#E7E2D6;

  --primary:#4B2E83;
  --primary-dark:#341F5C;
  --primary-tint:#EFE9FA;
  --aqua:var(--primary);
  --aqua-tint:var(--primary-tint);
  --sand:#EFE7D8;

  --success:var(--primary);
  --success-tint:var(--primary-tint);
  --warn:#C97A2B;
  --warn-tint:#FBEEDD;
  --danger:#C24545;
  --danger-tint:#FBE7E7;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(30,21,38,.05), 0 8px 24px -12px rgba(30,21,38,.12);
  --shadow-lg:0 20px 60px -20px rgba(30,21,38,.35);

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:var(--font-body);}
::selection{background:var(--primary-tint); color:var(--primary-dark);}

/* ---------------- shell layout ---------------- */
/* Escritorio: menú horizontal arriba. En móvil (media query al final del
   archivo) se convierte de nuevo en un cajón lateral deslizable. */
#shell{display:flex; flex-direction:column; min-height:100vh;}

#sidebar{
  background:var(--primary);
  color:#EFEAE0;
  padding:0 20px;
  display:flex; flex-direction:row; align-items:center; gap:22px;
  position:sticky; top:0; z-index:30;
  min-height:60px;
}
.menu-toggle{display:none;}
.sidebar-close{display:none;}
.sidebar-backdrop{display:none;}

.brand{display:flex; align-items:center; gap:10px; padding:10px 0; flex-shrink:0;}
.brand-mark{width:34px; height:34px; position:relative; flex:0 0 34px;}
.brand-mark span{position:absolute; border-radius:50%; background:var(--aqua); opacity:.9;}
.brand-mark span:nth-child(1){width:20px;height:20px; left:0; top:8px; background:var(--primary-dark);}
.brand-mark span:nth-child(2){width:14px;height:14px; left:16px; top:0; background:var(--aqua);}
.brand-mark span:nth-child(3){width:10px;height:10px; left:14px; top:18px; background:#EFEAE0; opacity:.85;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.1; color:#fff;}
.brand-sub{font-size:11px; color:#B0A3C2; letter-spacing:.04em; text-transform:uppercase;}

.nav-scroll{display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; row-gap:4px; flex:1; min-width:0;}

/* Cada grupo (General, CRM, Equipo…) es un desplegable propio, para que la
   barra de arriba quede compacta en vez de mostrar los ~12 ítems sueltos. */
.nav-group{position:relative; margin-top:0;}
.nav-group-trigger{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  padding:9px 12px; border-radius:10px; cursor:pointer; user-select:none;
  color:#D2C7E0; font-size:13.5px; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.nav-group-trigger:hover{background:rgba(255,255,255,.1); color:#fff;}
.nav-group-trigger .caret{font-size:9px; opacity:.75; transition:transform .15s ease;}
.nav-group.open .nav-group-trigger{background:rgba(255,255,255,.14); color:#fff;}
.nav-group.open .nav-group-trigger .caret{transform:rotate(180deg);}
.nav-group.active .nav-group-trigger{color:#fff; background:var(--primary-dark);}

.nav-dropdown{
  display:none; position:absolute; left:0; top:calc(100% + 6px); min-width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; z-index:35;
}
.nav-group.open .nav-dropdown{display:block;}

/* Subtítulo dentro de un desplegable con varias secciones (ej. "Operaciones"
   agrupa Equipo/Dinero/Sistema) — solo texto, no es clickeable. */
.nav-dropdown-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--muted); padding:10px 10px 4px;
}
.nav-dropdown-label:first-child{padding-top:6px;}

.nav-item{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  padding:9px 10px; border-radius:9px; cursor:pointer;
  color:var(--ink-soft); font-size:13.5px; font-weight:500;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.nav-item:hover{background:var(--surface-2); color:var(--ink);}
.nav-item.active{background:var(--primary-tint); color:var(--primary-dark); font-weight:700;}
.nav-item .ic{width:18px; text-align:center; opacity:.9;}
.nav-badge{
  margin-left:auto; background:var(--warn); color:#fff; font-size:10.5px;
  border-radius:20px; padding:1px 7px; font-weight:700;
}

#user-box{
  margin-top:0; padding:0; border-top:none; flex-shrink:0;
  display:flex; align-items:center; gap:12px;
}
#user-name{font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap;}
#user-role{display:none;}
#logout-btn{width:auto; color:#EFEAE0; border-color:rgba(255,255,255,.3);}
#logout-btn:hover{background:rgba(255,255,255,.12); color:#fff;}

#main{padding:26px 34px 60px; min-width:0;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px;}
.page-title{font-size:24px; font-weight:700;}
.page-sub{color:var(--ink-soft); font-size:13.5px; margin-top:2px;}

/* ---------------- buttons ---------------- */
.btn{
  border:none; border-radius:10px; padding:9px 16px; font-weight:600; font-size:13.5px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--danger-tint); color:var(--danger);}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px;}
.btn-icon{padding:8px; border-radius:9px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------------- cards / surfaces ---------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}

.stat{padding:16px 18px;}
.stat .k{color:var(--ink-soft); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.stat .v{font-family:var(--font-display); font-size:28px; font-weight:700; margin-top:6px;}
.stat .d{font-size:12px; color:var(--muted); margin-top:2px;}

/* ---------------- badges ---------------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap;}
.badge-dot{width:6px;height:6px;border-radius:50%;}
.b-activo,.b-completado,.b-pagada{background:var(--success-tint); color:var(--success);}
.b-inactivo,.b-cancelado,.b-perdido{background:var(--danger-tint); color:var(--danger);}
.b-pendiente,.b-nuevo{background:var(--warn-tint); color:var(--warn);}
.b-cat{background:var(--aqua-tint); color:var(--aqua);}
.b-neutral{background:var(--sand); color:#7A6B45;}

/* ---------------- menú de acciones "⋮" ---------------- */
.action-menu-wrap{position:relative; display:inline-block;}
.action-menu{
  display:none; position:absolute; right:0; top:calc(100% + 4px); min-width:170px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-lg); z-index:20; overflow:hidden; padding:4px;
}
.action-menu.open{display:block;}
.action-menu-item{padding:8px 12px; font-size:13px; border-radius:7px; cursor:pointer; color:var(--ink); white-space:nowrap;}
.action-menu-item:hover{background:var(--surface-2);}
.action-menu-item.danger{color:var(--danger);}
.action-menu-item.danger:hover{background:var(--danger-tint);}

/* ---------------- table-list rows ---------------- */
.list{display:flex; flex-direction:column; gap:10px;}
.row-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
}
.row-main{flex:1; min-width:0;}
.row-title{font-weight:700; font-size:14.5px;}
.row-meta{color:var(--ink-soft); font-size:12.5px; margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.row-actions{display:flex; gap:6px; flex-shrink:0;}

/* ---------------- forms ---------------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.ctrl{
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:13.5px;
  font-family:var(--font-body); background:var(--surface-2); color:var(--ink);
}
.ctrl:focus{outline:2px solid var(--primary); outline-offset:1px; background:#fff;}
textarea.ctrl{resize:vertical; min-height:64px;}
.field-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px;}
.check-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);}

/* ---------------- modal ---------------- */
dialog{
  border:none; border-radius:var(--radius-lg); padding:0; width:min(560px,92vw);
  box-shadow:var(--shadow-lg);
}
dialog.modal-wide{width:min(1280px,96vw);}
dialog::backdrop{background:rgba(30,21,38,.45); backdrop-filter:blur(2px);}
.modal-head{padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{font-size:17px;}
.modal-body{padding:20px 22px; max-height:70vh; overflow:auto;}
dialog.modal-wide .modal-body{max-height:90vh;}
.modal-foot{padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
.modal-close{cursor:pointer; border:none; background:none; font-size:18px; color:var(--muted);}
.modal-toast{background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:16px; animation:slidein .2s ease;}
.modal-toast.err{background:var(--danger);}

/* ---------------- checklist / progress ring ---------------- */
.progress-wrap{background:#EDEBE3; border-radius:999px; height:8px; overflow:hidden;}
.progress-bar{background:linear-gradient(90deg,var(--aqua),var(--primary)); height:100%; border-radius:999px; transition:width .3s ease;}
.ring{transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:#EDEBE3; stroke-width:6;}
.ring-fg{fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .4s ease;}

.task-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); margin-bottom:6px; cursor:pointer;}
.task-item.done{background:var(--success-tint); border-color:#D6C4EC;}
.task-check{width:20px;height:20px;border-radius:50%; flex:0 0 20px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:#DDD8CA; color:#fff;}
.task-check.on{background:var(--success);}
.task-text{font-size:13.5px;}
.task-text.done{text-decoration:line-through; color:var(--muted);}

.task-details{margin-bottom:14px;}
.task-details > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:15px; font-weight:700; padding:2px 0;
}
.task-details > summary::-webkit-details-marker{display:none;}
.task-details > summary::before{content:'▸'; color:var(--muted); font-size:11px; margin-right:8px; display:inline-block; transition:transform .15s ease;}
.task-details[open] > summary::before{transform:rotate(90deg);}
.task-details > summary > *:first-child{display:flex; align-items:center; flex:1; min-width:0;}

/* ---------------- kanban ---------------- */
.kanban-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.kcol-head{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:10px; font-weight:700; font-size:13px; margin-bottom:10px;}
.kcol-pend{background:var(--warn-tint); color:var(--warn);}
.kcol-comp{background:var(--success-tint); color:var(--success);}
.kcard{display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:var(--shadow);}
.kcard .body{flex:1; min-width:0;}
.kcard .t{font-weight:700; font-size:13.5px;}
.kcard .m{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.kcard .task-check{margin-top:1px;}
.colab-head{display:flex; align-items:center; gap:10px; margin:26px 0 10px;}
.avatar{width:36px;height:36px;border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}

/* ---------------- calendar ---------------- */
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:10px;}
.cal-day{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:150px;}
.cal-day.today{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-tint);}
.cal-day-head{font-weight:700; font-size:12.5px; margin-bottom:8px; display:flex; justify-content:space-between;}
.cal-ev{background:var(--aqua-tint); color:var(--primary-dark); border-radius:8px; padding:6px 8px; font-size:11.5px; margin-bottom:6px; cursor:pointer; font-weight:600;}
.cal-ev.completado{background:var(--success-tint); color:var(--success);}
.cal-ev.cancelado{background:var(--danger-tint); color:var(--danger); text-decoration:line-through;}

/* ---------------- agenda horaria (estilo Teams) ---------------- */
.hcal-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);}
.hcal-headrow{display:flex; border-bottom:1px solid var(--line); background:var(--bg);}
.hcal-time-col-head{width:56px; flex-shrink:0;}
.hcal-day-head{flex:1; min-width:110px; text-align:center; padding:10px 4px; font-weight:700; font-size:12.5px; border-left:1px solid var(--line);}
.hcal-day-head .muted{font-weight:500;}
.hcal-day-head.today{color:var(--primary);}
.hcal-body{display:flex; overflow-y:auto; overflow-x:auto; max-height:640px;}
/* Dentro del modal de disponibilidad se deja crecer completo (sin scroll propio):
   el modal ya es alto y ancho, así se ve toda la jornada del colaborador de una vez. */
dialog .hcal-body{max-height:none; overflow-y:visible;}
.hcal-time-col{width:56px; flex-shrink:0;}
.hcal-hour-label{height:48px; font-size:11px; color:var(--muted); text-align:right; padding-right:6px; box-sizing:border-box; transform:translateY(-6px);}
.hcal-day-col{flex:1; min-width:110px; position:relative; border-left:1px solid var(--line);
  background-image:repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 48px);
  cursor:pointer;}
.hcal-day-col.today{background-color:var(--primary-tint);}
.hcal-event{position:absolute; left:2px; right:2px; background:var(--aqua-tint); color:var(--primary-dark);
  border-left:3px solid var(--primary); border-radius:6px; padding:2px 6px; font-size:11px; font-weight:600;
  overflow:hidden; cursor:pointer; line-height:1.3;}
.hcal-event.completado{background:var(--success-tint); color:var(--success); border-left-color:var(--success);}
.hcal-event.cancelado{background:var(--danger-tint); color:var(--danger); border-left-color:var(--danger); text-decoration:line-through;}

/* ---------------- misc ---------------- */
.empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:13.5px;}
.tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:11px; border:1px solid var(--line); width:fit-content;}
.tab{padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft);}
.tab.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
.search-input{border:1px solid var(--line); border-radius:10px; padding:9px 13px; font-size:13.5px; background:var(--surface); min-width:260px;}
.section-title{font-size:15px; font-weight:700; margin:26px 0 12px;}
.muted{color:var(--muted);}
.toast{position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; font-size:13.5px; box-shadow:var(--shadow-lg); z-index:999; animation:slidein .2s ease; max-width:calc(100vw - 44px);}
.toast.err{background:var(--danger);}
@keyframes slidein{from{transform:translateY(10px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.loading{padding:60px; text-align:center; color:var(--muted);}
hr.sep{border:none; border-top:1px solid var(--line); margin:16px 0;}

/* ---------------- login ---------------- */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.login-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; width:340px; max-width:calc(100vw - 32px); box-shadow:var(--shadow-lg);}
.login-error{background:var(--danger-tint); color:var(--danger); font-size:12.5px; padding:8px 10px; border-radius:8px; margin:6px 0 4px;}
.login-card .brand-name{color:var(--ink);}
.login-card .brand-sub{color:var(--ink-soft);}

/* ---------------- matriz de permisos ---------------- */
.perm-matrix{width:100%; border-collapse:collapse; font-size:12.5px;}
.perm-matrix th, .perm-matrix td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:center;}
.perm-matrix th:first-child, .perm-matrix td:first-child{text-align:left;}

/* ---------------- plantillas (tabla editable tipo Excel) ---------------- */
.plantilla-table{border-collapse:collapse; width:100%; min-width:600px;}
.plantilla-table th, .plantilla-table td{border:1px solid var(--line); padding:0; vertical-align:middle;}
.plantilla-table th{background:var(--surface-2);}
.plantilla-table .cell-ctrl{
  width:100%; border:none; background:transparent; padding:8px 10px; font-size:13px;
  font-family:var(--font-body); color:var(--ink); border-radius:0;
}
.plantilla-table .cell-ctrl:focus{outline:2px solid var(--primary); outline-offset:-2px; background:var(--primary-tint);}
.plantilla-table th .cell-ctrl{font-weight:700;}
.plantilla-col-head{display:flex; align-items:center;}
.plantilla-col-head .cell-ctrl{flex:1; min-width:0;}
.plantilla-row-del, .plantilla-col-del{
  border:none; background:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:0 8px; flex-shrink:0;
}
.plantilla-row-del:hover, .plantilla-col-del:hover{color:var(--danger);}

/* ---------------- impresión ---------------- */
@media print{
  #sidebar, .menu-toggle, .sidebar-backdrop, .no-print{display:none !important;}
  #main{padding:0;}
  .plantilla-table .cell-ctrl{padding:4px 6px; font-size:11px;}
  .plantilla-table .cell-ctrl:focus{outline:none; background:transparent;}
}

/* ---------------- versión app / móvil ---------------- */
/* Recupera el cajón lateral vertical deslizable: en escritorio #sidebar es
   una barra horizontal arriba, pero en pantallas chicas eso no entra, así
   que aquí se revierte a columna, fijo, oculto fuera de pantalla. */
@media(max-width:860px){
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:40;
    width:38px; height:38px; border-radius:10px; border:none;
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
    font-size:17px; cursor:pointer;
  }
  .sidebar-close{
    display:flex; align-items:center; justify-content:center;
    margin-left:auto; width:28px; height:28px; border-radius:8px; border:none;
    background:rgba(255,255,255,.12); color:#fff; font-size:14px; cursor:pointer; flex-shrink:0;
  }
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(30,21,38,.45); z-index:44;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .sidebar-backdrop.open{opacity:1; pointer-events:auto;}

  #sidebar{
    position:fixed; top:0; left:0; height:100vh; width:250px; max-width:82vw;
    z-index:45; transform:translateX(-100%); transition:transform .22s ease;
    flex-direction:column; align-items:stretch; gap:6px; padding:22px 16px;
    overflow-y:auto;
  }
  #sidebar.open{transform:translateX(0);}

  .brand{padding:6px 8px 22px 8px;}
  .nav-scroll{flex-direction:column; align-items:stretch; flex-wrap:nowrap; flex:none;}

  /* En el cajón móvil no hace falta desplegar nada: se ve todo de una, como
     antes — el grupo es solo un encabezado y su contenido siempre visible. */
  .nav-group{margin-top:10px;}
  .nav-group-trigger{
    padding:6px 10px; cursor:default; background:none !important; color:#9088A0 !important;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  }
  .nav-group-trigger .caret{display:none;}
  .nav-dropdown{
    display:flex !important; flex-direction:column; position:static; box-shadow:none;
    background:none; border:none; padding:0; min-width:0;
  }
  .nav-item{white-space:normal; color:#D2C7E0;}
  .nav-item:hover{background:rgba(255,255,255,.1); color:#fff;}
  .nav-item.active{background:var(--primary-dark); color:#fff;}
  .nav-dropdown-label{color:#9088A0;}
  .nav-dropdown-label:first-child{padding-top:4px;}

  #user-box{
    margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.15);
    flex-direction:column; align-items:stretch; gap:4px;
  }
  #user-role{display:block; font-size:11px; color:#9088A0; margin-bottom:4px;}
  #logout-btn{width:100%;}

  #main{padding:70px 16px 40px;}
  .topbar{flex-wrap:wrap;}
  .topbar .btn-primary{width:100%; justify-content:center;}
  .page-title{font-size:20px;}

  .grid-4, .grid-3, .grid-2, .field-row, .kanban-cols{grid-template-columns:1fr;}
  .search-input{min-width:0; width:100%;}
  .row-card{flex-wrap:wrap;}
  .row-actions{width:100%; justify-content:flex-end;}

  .cal-scroll{overflow-x:auto;}
  .cal-grid{grid-template-columns:repeat(7, minmax(120px,1fr));}
}