html,body{margin:0; padding:0; background:#FAF6EE;}
a{color:inherit; text-decoration:none;}
:root{
  --green:#16261C;
  --green-soft:#1F3327;
  --cream:#FAF6EE;
  --cream-dim:#F3EDE0;
  --orange:#D98E4A;
  --orange-dark:#C77B37;
  --ink:#20291F;
  --ink-soft:#5B6459;
  --line:rgba(32,41,31,0.12);
  --white:#ffffff;
}
.cs *{box-sizing:border-box; margin:0; padding:0;}
.cs{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.cs img, .cs svg{display:block;}
.cs a{color:inherit; text-decoration:none;}
.cs h1, .cs h2, .cs h3{font-family:'Playfair Display', serif; font-weight:500; color:var(--ink); letter-spacing:-0.01em;}
.cs button{font-family:inherit;}
.cs .app{display:grid; grid-template-columns:260px 1fr; min-height:100vh;}
.cs .sidebar{
  background:var(--green); color:rgba(255,255,255,0.82);
  padding:28px 20px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.cs .sb-logo{font-family:'Playfair Display', serif; font-size:24px; color:#fff; margin-bottom:2px; padding:0 8px;}
.cs .sb-tag{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-weight:600; padding:0 8px; margin-bottom:38px;}
.cs .sb-nav{list-style:none; display:flex; flex-direction:column; gap:2px; flex-grow:1;}
.cs .sb-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:8px; font-size:14.5px; font-weight:500;
  color:rgba(255,255,255,0.72);
}
.cs .sb-nav a svg{width:18px; height:18px; stroke:currentColor; flex-shrink:0;}
.cs .sb-nav a:hover{background:rgba(255,255,255,0.06); color:#fff;}
.cs .sb-nav a.active{background:rgba(255,255,255,0.1); color:#fff;}
.cs .sb-help{
  background:rgba(255,255,255,0.06); border-radius:10px; padding:20px 18px; margin-top:16px;
}
.cs .sb-help h4{font-family:'Playfair Display', serif; font-size:15px; color:#fff; font-weight:500; margin-bottom:8px;}
.cs .sb-help p{font-size:12.5px; color:rgba(255,255,255,0.6); margin-bottom:16px; line-height:1.5;}
.cs .sb-help .btn{width:100%; justify-content:center;}
.cs .main{padding:36px 44px 60px;}
.cs .topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:34px;}
.cs .topbar h1{font-size:28px; margin-bottom:6px;}
.cs .topbar .sub{color:var(--ink-soft); font-size:14.5px;}
.cs .top-actions{display:flex; align-items:center; gap:18px;}
.cs .user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.cs .avatar-photo{width:38px; height:38px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:15px;}
.cs .user-chip .name{font-size:14px; font-weight:600;}
.cs .user-chip svg{width:14px; height:14px; stroke:var(--ink-soft);}
.cs .card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 26px;}
.cs .grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:22px;}
.cs .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.cs .stack{display:flex; flex-direction:column; gap:22px;}
.cs .eyebrow-sm{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-dark); margin-bottom:6px;}
.cs .card h2{font-size:19px; margin-bottom:4px;}
.cs .card .desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}
.cs .progress-track{height:9px; background:var(--cream-dim); border-radius:20px; overflow:hidden; margin:14px 0 10px;}
.cs .progress-fill{height:100%; background:var(--green); border-radius:20px;}
.cs .progress-meta{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); margin-bottom:26px;}
.cs .progress-meta b{color:var(--ink); font-family:'Playfair Display', serif; font-size:16px;}
.cs .phase-list{list-style:none; display:flex; flex-direction:column;}
.cs .phase{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line);}
.cs .phase:first-child{border-top:none;}
.cs .phase-dot{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-size:13px; font-weight:600;
  background:var(--green); color:#fff;
}
.cs .phase-dot.pending{background:var(--cream-dim); color:var(--ink-soft); border:1px solid var(--line);}
.cs .phase-dot.progress{background:var(--orange); color:#fff;}
.cs .phase-body{flex-grow:1;}
.cs .phase-body .row{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.cs .phase-body h4{font-size:14.5px; font-weight:600;}
.cs .phase-body p{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.cs .phase-date{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.cs .phase-date.tag{color:var(--orange-dark); font-weight:600;}
.cs .doc-item, .cs .msg-item{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line);}
.cs .doc-item:first-child, .cs .msg-item:first-child{border-top:none;}
.cs .doc-icon{width:36px; height:36px; border-radius:8px; background:var(--cream-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cs .doc-icon svg{width:17px; height:17px; stroke:var(--orange-dark);}
.cs .doc-item .name{font-size:13.5px; font-weight:600;}
.cs .doc-item .meta{font-size:12px; color:var(--ink-soft);}
.cs .doc-dl{margin-left:auto; width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0;}
.cs .doc-dl svg{width:15px; height:15px; stroke:currentColor;}
.cs .doc-dl:hover{background:var(--cream-dim);}
.cs .msg-avatar{width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:13px; flex-shrink:0;}
.cs .msg-item .top{display:flex; justify-content:space-between; gap:10px;}
.cs .msg-item .who{font-size:13.5px; font-weight:600;}
.cs .msg-item .when{font-size:11.5px; color:var(--ink-soft);}
.cs .msg-item .preview{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.cs .link-more{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--orange-dark); margin-top:16px;}
.cs .milestone-banner{
  display:flex; align-items:center; gap:20px; background:var(--cream-dim); border:1px solid var(--line);
  border-radius:12px; padding:22px 26px; margin-top:22px;
}
.cs .milestone-icon{width:48px; height:48px; border-radius:10px; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cs .milestone-icon svg{width:22px; height:22px; stroke:#fff;}
.cs .milestone-body{flex-grow:1;}
.cs .milestone-body .eyebrow-sm{margin-bottom:2px;}
.cs .milestone-body h3{font-size:18px;}
.cs .milestone-body p{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.cs .milestone-date{text-align:right; flex-shrink:0;}
.cs .milestone-date .day{font-family:'Playfair Display', serif; font-size:28px; line-height:1;}
.cs .milestone-date .mo{font-size:12px; color:var(--orange-dark); font-weight:600;}
.cs .btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px;
  font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cs .btn-primary{background:var(--orange); color:#fff;}
.cs .btn-primary:hover{background:var(--orange-dark);}
.cs .btn-dark{background:var(--green); color:#fff;}
.cs .btn-dark:hover{background:var(--green-soft);}
.cs .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.cs .btn-ghost:hover{border-color:var(--ink);}
.cs .btn-sm{padding:9px 16px; font-size:13px;}
.cs footer.app-footer{
  grid-column:1/-1; padding:22px 44px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:8px;
}
.cs footer.app-footer a{color:var(--ink-soft);}
@media (max-width:980px){.cs .app{grid-template-columns:1fr;}
.cs .sidebar{position:relative; height:auto;}
.cs .grid-2, .cs .grid-3{grid-template-columns:1fr;}
}


.clario-shell *{box-sizing:border-box;}
.clario-shell{background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif;}
.shellbar{position:sticky; top:0; z-index:120; display:flex; align-items:center; gap:22px; height:54px; padding:0 20px 0 22px;
  background:var(--green); color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.08);}
.shellbar .brand{font-family:'Playfair Display',serif; font-size:17px; color:#fff; letter-spacing:-.01em;}
.shellbar .brand span{font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-weight:600; display:block; margin-top:-2px;}
.roleswitch{display:flex; gap:3px; padding:3px; background:rgba(255,255,255,.08); border-radius:999px;}
.roleswitch button{border:none; background:none; color:rgba(255,255,255,.7); font:600 12.5px/1 'Inter',sans-serif; padding:8px 15px; border-radius:999px; cursor:pointer;}
.roleswitch button:hover{color:#fff;}
.roleswitch button.on{background:var(--orange); color:#fff;}
.chiprow{display:none; gap:4px; flex-wrap:wrap; margin-left:auto;}
.chiprow.on{display:flex;}
.chip{border:none; background:none; color:rgba(255,255,255,.6); font:500 12.5px/1 'Inter',sans-serif; padding:8px 12px; border-radius:7px; cursor:pointer;}
.chip:hover{background:rgba(255,255,255,.07); color:#fff;}
.chip.on{background:rgba(255,255,255,.13); color:#fff;}.cs{display:none;}
.cs.on{display:block;}
.cs .sidebar{top:54px; height:calc(100vh - 54px);}
.cs .app{min-height:calc(100vh - 54px);}
.cs .sb-nav a{cursor:pointer;}
.cs .sb-soon{opacity:.42; cursor:default;}
.cs .sb-soon:hover{background:none; color:rgba(255,255,255,.72);}
.cs .sb-badge{margin-left:auto; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--orange); border:1px solid rgba(217,142,74,.45); border-radius:999px; padding:2px 6px;}
@media (max-width:980px){ .shellbar{height:auto; flex-wrap:wrap; padding:10px 14px; gap:10px;} .cs .sidebar{top:0; height:auto;} }


/* admin-panel */
[data-screen="admin-panel"] .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:22px;}
[data-screen="admin-panel"] .kpi-card{display:flex; flex-direction:column; gap:10px;}
[data-screen="admin-panel"] .kpi-top{display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="admin-panel"] .kpi-icon{width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-panel"] .kpi-icon svg{width:18px; height:18px;}
[data-screen="admin-panel"] .kpi-icon.green{background:#E5F1E8;}
[data-screen="admin-panel"] .kpi-icon.green svg{stroke:#2E5F41;}
[data-screen="admin-panel"] .kpi-icon.orange{background:#FBEFE0;}
[data-screen="admin-panel"] .kpi-icon.orange svg{stroke:var(--orange-dark);}
[data-screen="admin-panel"] .kpi-icon.red{background:#FBEAE6;}
[data-screen="admin-panel"] .kpi-icon.red svg{stroke:#B4472F;}
[data-screen="admin-panel"] .kpi-icon.blue{background:#E7EEF3;}
[data-screen="admin-panel"] .kpi-icon.blue svg{stroke:#2C5C86;}
[data-screen="admin-panel"] .kpi-num{font-family:'Playfair Display', serif; font-size:28px; line-height:1;}
[data-screen="admin-panel"] .kpi-label{font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-panel"] .kpi-sub{font-size:11.5px; color:var(--orange-dark); font-weight:600;}
[data-screen="admin-panel"] .panel-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}
[data-screen="admin-panel"] .activity-item{display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--line);}
[data-screen="admin-panel"] .activity-item:first-child{border-top:none;}
[data-screen="admin-panel"] .act-icon{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-panel"] .act-icon svg{width:15px; height:15px;}
[data-screen="admin-panel"] .act-icon.pay{background:#E5F1E8;}
[data-screen="admin-panel"] .act-icon.pay svg{stroke:#2E5F41;}
[data-screen="admin-panel"] .act-icon.msg{background:#E7EEF3;}
[data-screen="admin-panel"] .act-icon.msg svg{stroke:#2C5C86;}
[data-screen="admin-panel"] .act-icon.phase{background:var(--cream-dim);}
[data-screen="admin-panel"] .act-icon.phase svg{stroke:var(--ink-soft);}
[data-screen="admin-panel"] .act-icon.user{background:#FBEFE0;}
[data-screen="admin-panel"] .act-icon.user svg{stroke:var(--orange-dark);}
[data-screen="admin-panel"] .act-icon.late{background:#FBEAE6;}
[data-screen="admin-panel"] .act-icon.late svg{stroke:#B4472F;}
[data-screen="admin-panel"] .act-body{flex-grow:1;}
[data-screen="admin-panel"] .act-body .t{font-size:13.5px;}
[data-screen="admin-panel"] .act-body .t b{font-weight:600;}
[data-screen="admin-panel"] .act-time{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
[data-screen="admin-panel"] .ev-mini{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:center;}
[data-screen="admin-panel"] .ev-mini:first-child{border-top:none;}
[data-screen="admin-panel"] .ev-date-box{width:42px; height:42px; border-radius:8px; background:var(--cream-dim); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-panel"] .ev-date-box .d{font-family:'Playfair Display', serif; font-size:15px; line-height:1;}
[data-screen="admin-panel"] .ev-date-box .m{font-size:9px; text-transform:uppercase; color:var(--ink-soft); font-weight:600;}
[data-screen="admin-panel"] .ev-mini .t{font-size:13px; font-weight:600;}
[data-screen="admin-panel"] .ev-mini .c{font-size:11.5px; color:var(--ink-soft);}
[data-screen="admin-panel"] .ev-type-dot{width:7px; height:7px; border-radius:50%; margin-left:auto; flex-shrink:0;}
[data-screen="admin-panel"] .ev-type-dot.call{background:#3F7D57;}
[data-screen="admin-panel"] .ev-type-dot.delivery{background:var(--orange);}
[data-screen="admin-panel"] .attn-item{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line);}
[data-screen="admin-panel"] .attn-item:first-child{border-top:none;}
[data-screen="admin-panel"] .attn-item .avatar-photo{width:34px; height:34px; font-size:13px;}
[data-screen="admin-panel"] .attn-info .n{font-size:13.5px; font-weight:600;}
[data-screen="admin-panel"] .attn-info .r{font-size:12px; color:#B4472F;}
[data-screen="admin-panel"] .attn-item .btn{margin-left:auto;}

/* admin-usuarios */
[data-screen="admin-usuarios"] .search-box{
    display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
    border-radius:8px; padding:9px 14px; width:280px;
  }
[data-screen="admin-usuarios"] .search-box svg{width:16px; height:16px; stroke:var(--ink-soft); flex-shrink:0;}
[data-screen="admin-usuarios"] .search-box input{border:none; outline:none; font-family:'Inter',sans-serif; font-size:13.5px; width:100%; background:none;}
[data-screen="admin-usuarios"] .user-table{width:100%; border-collapse:collapse;}
[data-screen="admin-usuarios"] .user-table th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
    font-weight:600; padding:0 14px 12px; border-bottom:1px solid var(--line);
  }
[data-screen="admin-usuarios"] .user-table td{padding:14px; border-bottom:1px solid var(--line); vertical-align:middle;}
[data-screen="admin-usuarios"] .user-table tr:last-child td{border-bottom:none;}
[data-screen="admin-usuarios"] .user-table tbody tr{cursor:pointer; transition:background .12s ease;}
[data-screen="admin-usuarios"] .user-table tbody tr:hover{background:var(--cream-dim);}
[data-screen="admin-usuarios"] .u-cell{display:flex; align-items:center; gap:12px;}
[data-screen="admin-usuarios"] .u-cell .avatar-photo{width:36px; height:36px; font-size:14px;}
[data-screen="admin-usuarios"] .u-name{font-size:14px; font-weight:600;}
[data-screen="admin-usuarios"] .u-email{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-usuarios"] .mini-progress{display:flex; align-items:center; gap:8px;}
[data-screen="admin-usuarios"] .mini-track{width:70px; height:6px; background:var(--cream-dim); border-radius:10px; overflow:hidden;}
[data-screen="admin-usuarios"] .mini-fill{height:100%; background:var(--green); border-radius:10px;}
[data-screen="admin-usuarios"] .mini-pct{font-size:12px; color:var(--ink-soft); min-width:32px;}
[data-screen="admin-usuarios"] .status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600;}
[data-screen="admin-usuarios"] .status-pill.active{background:#E5F1E8; color:#3F7D57;}
[data-screen="admin-usuarios"] .status-pill.pending{background:#FBEFE0; color:var(--orange-dark);}
[data-screen="admin-usuarios"] .status-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
[data-screen="admin-usuarios"] .row-actions{display:flex; gap:6px; justify-content:flex-end;}
[data-screen="admin-usuarios"] .icon-btn{
    width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
[data-screen="admin-usuarios"] .icon-btn svg{width:15px; height:15px; stroke:var(--ink-soft);}
[data-screen="admin-usuarios"] .icon-btn:hover{border-color:var(--ink); background:var(--cream-dim);}
[data-screen="admin-usuarios"] .overlay{
    position:fixed; inset:0; background:rgba(22,38,28,0.35); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
[data-screen="admin-usuarios"] .overlay.show{opacity:1; pointer-events:auto;}
[data-screen="admin-usuarios"] .drawer{
    position:fixed; top:50%; left:50%; width:760px; max-width:calc(100vw - 48px); max-height:calc(100vh - 56px);
    background:var(--cream); border-radius:16px; overflow:hidden;
    z-index:95; box-shadow:0 40px 90px rgba(22,38,28,0.4);
    transform:translate(-50%,-46%); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease; display:flex; flex-direction:column;
  }
[data-screen="admin-usuarios"] .drawer.show{transform:translate(-50%,-50%); opacity:1; pointer-events:auto;}
[data-screen="admin-usuarios"] .drawer-head{padding:26px 32px 22px;}
[data-screen="admin-usuarios"] .drawer-body{padding:26px 32px;}
[data-screen="admin-usuarios"] .drawer-foot{padding:18px 32px;}
[data-screen="admin-usuarios"] .drawer .kv-grid{grid-template-columns:repeat(3, 1fr);}
[data-screen="admin-usuarios"] .drawer .drawer-msg-list{max-height:none;}
[data-screen="admin-usuarios"] .drawer-head{padding:26px 26px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="admin-usuarios"] .drawer-close{width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
[data-screen="admin-usuarios"] .drawer-close svg{width:15px; height:15px; stroke:var(--ink-soft);}
[data-screen="admin-usuarios"] .drawer-user{display:flex; gap:14px; align-items:center;}
[data-screen="admin-usuarios"] .drawer-user .avatar-photo{width:52px; height:52px; font-size:19px;}
[data-screen="admin-usuarios"] .drawer-user h3{font-size:19px; margin-bottom:2px;}
[data-screen="admin-usuarios"] .drawer-user .email{font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-usuarios"] .drawer-body{padding:22px 26px; overflow-y:auto; flex-grow:1;}
[data-screen="admin-usuarios"] .drawer-section{margin-bottom:26px;}
[data-screen="admin-usuarios"] .drawer-section h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); font-weight:600; margin-bottom:12px;}
[data-screen="admin-usuarios"] .kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 10px;}
[data-screen="admin-usuarios"] .kv .label{font-size:11.5px; color:var(--ink-soft); margin-bottom:2px;}
[data-screen="admin-usuarios"] .kv .value{font-size:13.5px; font-weight:600;}
[data-screen="admin-usuarios"] .drawer-msg-list{display:flex; flex-direction:column; gap:12px; margin-bottom:14px; max-height:220px; overflow-y:auto;}
[data-screen="admin-usuarios"] .compose{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:16px;}
[data-screen="admin-usuarios"] .compose textarea{
    width:100%; min-height:70px; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
    font-family:'Inter',sans-serif; font-size:13.5px; resize:vertical; background:#fff;
  }
[data-screen="admin-usuarios"] .drawer-foot{padding:18px 26px; border-top:1px solid var(--line); display:flex; gap:10px;}
[data-screen="admin-usuarios"] .modal{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:560px; max-width:92vw;
    background:var(--cream); border-radius:14px; z-index:96; box-shadow:0 40px 80px rgba(22,38,28,0.35);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-height:88vh; display:flex; flex-direction:column;
  }
[data-screen="admin-usuarios"] .modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
[data-screen="admin-usuarios"] .modal-head{padding:24px 26px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="admin-usuarios"] .modal-head h3{font-size:20px; margin-bottom:4px;}
[data-screen="admin-usuarios"] .modal-head p{font-size:13px; color:var(--ink-soft);}
[data-screen="admin-usuarios"] .modal-body{padding:22px 26px; overflow-y:auto;}
[data-screen="admin-usuarios"] .form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
[data-screen="admin-usuarios"] .form-grid2 .full{grid-column:1/-1;}
[data-screen="admin-usuarios"] .f-field .label{font-size:12px; color:var(--ink-soft); margin-bottom:5px; display:block; font-weight:500;}
[data-screen="admin-usuarios"] .f-field input, [data-screen="admin-usuarios"] .f-field select{
    width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 12px; font-family:'Inter',sans-serif;
    font-size:13.5px; background:#fff;
  }
[data-screen="admin-usuarios"] .modal-foot{padding:18px 26px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
[data-screen="admin-usuarios"] .hint{background:var(--cream-dim); border-radius:8px; padding:12px 14px; font-size:12.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start; margin-top:16px;}
[data-screen="admin-usuarios"] .hint svg{width:15px; height:15px; stroke:var(--orange-dark); flex-shrink:0; margin-top:1px;}

/* admin-proyectos */
[data-screen="admin-proyectos"] .board{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:start; margin-bottom:36px;}
[data-screen="admin-proyectos"] .board-col{background:var(--cream-dim); border-radius:12px; padding:14px; min-height:160px; transition:background .15s ease, outline .15s ease;}
[data-screen="admin-proyectos"] .board-col.drag-over{background:#EFE6D3; outline:2px dashed var(--orange);}
[data-screen="admin-proyectos"] .board-col-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:0 2px;}
[data-screen="admin-proyectos"] .board-col-head h3{font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3;}
[data-screen="admin-proyectos"] .board-count{font-size:11px; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:20px; padding:2px 8px; flex-shrink:0;}
[data-screen="admin-proyectos"] .proj-card{
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 14px; margin-bottom:10px;
    cursor:grab; transition:box-shadow .15s ease, transform .15s ease, opacity .15s ease;
  }
[data-screen="admin-proyectos"] .proj-card:hover{box-shadow:0 10px 20px -8px rgba(22,38,28,0.2); transform:translateY(-1px);}
[data-screen="admin-proyectos"] .proj-card.dragging{opacity:0.35;}
[data-screen="admin-proyectos"] .proj-card .top{display:flex; align-items:center; gap:9px; margin-bottom:8px; pointer-events:none;}
[data-screen="admin-proyectos"] .proj-card .avatar-photo{width:28px; height:28px; font-size:11px;}
[data-screen="admin-proyectos"] .proj-card .name{font-size:12.5px; font-weight:600; line-height:1.25;}
[data-screen="admin-proyectos"] .proj-card .spec{font-size:10.5px; color:var(--ink-soft);}
[data-screen="admin-proyectos"] .proj-card .due{font-size:10.5px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; margin-top:6px; pointer-events:none;}
[data-screen="admin-proyectos"] .proj-card .due svg{width:11px; height:11px; stroke:var(--ink-soft); flex-shrink:0;}
[data-screen="admin-proyectos"] .empty-col{font-size:11.5px; color:var(--ink-soft); text-align:center; padding:16px 4px; pointer-events:none;}
[data-screen="admin-proyectos"] .section-divider{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
[data-screen="admin-proyectos"] .section-divider h2{font-size:19px; white-space:nowrap;}
[data-screen="admin-proyectos"] .section-divider .line{height:1px; background:var(--line); flex-grow:1;}
[data-screen="admin-proyectos"] .section-divider .hint{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
[data-screen="admin-proyectos"] .proj-row{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; overflow:hidden;}
[data-screen="admin-proyectos"] .proj-row-head{display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer;}
[data-screen="admin-proyectos"] .proj-row-head:hover{background:var(--cream-dim);}
[data-screen="admin-proyectos"] .proj-row-head .avatar-photo{width:38px; height:38px; font-size:14px; flex-shrink:0;}
[data-screen="admin-proyectos"] .proj-row-name{font-size:14.5px; font-weight:600;}
[data-screen="admin-proyectos"] .proj-row-spec{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-proyectos"] .proj-row-phase{
    font-size:12px; font-weight:600; color:var(--orange-dark); background:#FBEFE0; padding:5px 12px; border-radius:20px;
    white-space:nowrap; margin-left:auto;
  }
[data-screen="admin-proyectos"] .proj-row-due{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; min-width:120px; text-align:right;}
[data-screen="admin-proyectos"] .proj-row-chevron{width:20px; height:20px; stroke:var(--ink-soft); flex-shrink:0; transition:transform .2s ease;}
[data-screen="admin-proyectos"] .proj-row.open .proj-row-chevron{transform:rotate(180deg);}
[data-screen="admin-proyectos"] .proj-row-body{max-height:0; overflow:hidden; transition:max-height .3s ease; border-top:1px solid transparent;}
[data-screen="admin-proyectos"] .proj-row.open .proj-row-body{border-top:1px solid var(--line);}
[data-screen="admin-proyectos"] .proj-row-inner{padding:22px 24px; display:grid; grid-template-columns:1fr 1fr; gap:28px;}
[data-screen="admin-proyectos"] .block h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); font-weight:600; margin-bottom:12px;}
[data-screen="admin-proyectos"] .block-note{font-size:11.5px; color:var(--ink-soft); margin-top:-6px; margin-bottom:12px;}
[data-screen="admin-proyectos"] .phase-line{display:flex; align-items:center; gap:11px; padding:8px 8px; border-radius:8px; cursor:pointer;}
[data-screen="admin-proyectos"] .phase-line:hover{background:var(--cream-dim);}
[data-screen="admin-proyectos"] .phase-line.current{background:var(--cream-dim); border:1px solid var(--line);}
[data-screen="admin-proyectos"] .ph-dot{width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display', serif; font-size:11px; font-weight:600;}
[data-screen="admin-proyectos"] .ph-dot.done{background:var(--green); color:#fff;}
[data-screen="admin-proyectos"] .ph-dot.now{background:var(--orange); color:#fff;}
[data-screen="admin-proyectos"] .ph-dot.pending{background:#fff; color:var(--ink-soft); border:1px solid var(--line);}
[data-screen="admin-proyectos"] .ph-name{font-size:12.5px; font-weight:500; flex-grow:1;}
[data-screen="admin-proyectos"] .phase-line.current .ph-name{font-weight:600;}
[data-screen="admin-proyectos"] .ph-tag{font-size:10px; color:var(--orange-dark); font-weight:600;}
[data-screen="admin-proyectos"] .dropzone{
    border:1.5px dashed var(--line); border-radius:10px; padding:16px; text-align:center;
    cursor:pointer; margin-bottom:12px; transition:border-color .15s ease, background .15s ease;
  }
[data-screen="admin-proyectos"] .dropzone:hover, [data-screen="admin-proyectos"] .dropzone.drag{border-color:var(--orange-dark); background:var(--cream-dim);}
[data-screen="admin-proyectos"] .dropzone svg{width:18px; height:18px; stroke:var(--orange-dark); margin:0 auto 6px;}
[data-screen="admin-proyectos"] .dropzone .dz-title{font-size:12.5px; font-weight:600;}
[data-screen="admin-proyectos"] .dropzone .dz-sub{font-size:11px; color:var(--ink-soft); margin-top:2px;}
[data-screen="admin-proyectos"] .fdoc-item{display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line);}
[data-screen="admin-proyectos"] .fdoc-item:first-of-type{border-top:none;}
[data-screen="admin-proyectos"] .fdoc-icon{width:30px; height:30px; border-radius:7px; background:var(--cream-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-proyectos"] .fdoc-icon svg{width:14px; height:14px; stroke:var(--orange-dark);}
[data-screen="admin-proyectos"] .fdoc-info{flex-grow:1; min-width:0;}
[data-screen="admin-proyectos"] .fdoc-info .n{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
[data-screen="admin-proyectos"] .fdoc-info .m{font-size:11px; color:var(--ink-soft);}
[data-screen="admin-proyectos"] .fdoc-actions{display:flex; gap:5px; flex-shrink:0;}
[data-screen="admin-proyectos"] .fdoc-btn{width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
[data-screen="admin-proyectos"] .fdoc-btn svg{width:12px; height:12px; stroke:var(--ink-soft);}
[data-screen="admin-proyectos"] .fdoc-btn:hover{border-color:var(--ink); background:var(--cream-dim);}
[data-screen="admin-proyectos"] .fdoc-btn.danger:hover{border-color:#B4472F; background:#FBEAE6;}
[data-screen="admin-proyectos"] .fdoc-btn.danger:hover svg{stroke:#B4472F;}
[data-screen="admin-proyectos"] .empty-mini{font-size:12px; color:var(--ink-soft); padding:4px 0;}
[data-screen="admin-proyectos"] .note-item{padding:10px 0; border-top:1px solid var(--line);}
[data-screen="admin-proyectos"] .note-item:first-child{border-top:none;}
[data-screen="admin-proyectos"] .note-item .meta{font-size:10.5px; color:var(--ink-soft); margin-bottom:2px;}
[data-screen="admin-proyectos"] .note-item .txt{font-size:12.5px; line-height:1.5;}
[data-screen="admin-proyectos"] .note-compose{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px; margin-top:8px;}
[data-screen="admin-proyectos"] .note-compose textarea{
    width:100%; min-height:56px; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
    font-family:'Inter',sans-serif; font-size:12.5px; resize:vertical; background:var(--cream);
  }
[data-screen="admin-proyectos"] .row-footer{grid-column:1/-1; display:flex; gap:10px; border-top:1px solid var(--line); padding-top:18px; margin-top:4px;}
@media (max-width:1200px){[data-screen="admin-proyectos"] .board{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){[data-screen="admin-proyectos"] .board{grid-template-columns:repeat(2,1fr);}
[data-screen="admin-proyectos"] .proj-row-inner{grid-template-columns:1fr;}
}

/* admin-calendario */
[data-screen="admin-calendario"] .cal-layout{display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start;}
[data-screen="admin-calendario"] .cal-nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
[data-screen="admin-calendario"] .cal-nav-btns{display:flex; align-items:center; gap:14px;}
[data-screen="admin-calendario"] .cal-nav-btns button{background:#fff; border:1px solid var(--line); width:32px; height:32px; border-radius:7px; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
[data-screen="admin-calendario"] .cal-nav-btns button:hover{border-color:var(--ink); color:var(--ink);}
[data-screen="admin-calendario"] .legend{display:flex; gap:16px; align-items:center;}
[data-screen="admin-calendario"] .legend-item{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-calendario"] .legend-dot{width:8px; height:8px; border-radius:50%;}
[data-screen="admin-calendario"] .legend-dot.call{background:#3F7D57;}
[data-screen="admin-calendario"] .legend-dot.delivery{background:var(--orange);}
[data-screen="admin-calendario"] .month-grid{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:10px; overflow:hidden;}
[data-screen="admin-calendario"] .dow-head{background:var(--cream-dim); text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-soft); padding:10px 0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
[data-screen="admin-calendario"] .day-cell{
    background:#fff; min-height:104px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:4px; position:relative;
  }
[data-screen="admin-calendario"] .day-cell:hover{background:var(--cream-dim);}
[data-screen="admin-calendario"] .day-cell.muted{background:var(--cream-dim); color:rgba(32,41,31,0.3);}
[data-screen="admin-calendario"] .day-cell.muted .day-num{color:rgba(32,41,31,0.3);}
[data-screen="admin-calendario"] .day-cell.selected{outline:2px solid var(--green); outline-offset:-2px; z-index:1;}
[data-screen="admin-calendario"] .day-num{font-size:13px; font-weight:600; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
[data-screen="admin-calendario"] .day-cell.today .day-num{background:var(--green); color:#fff;}
[data-screen="admin-calendario"] .day-chip{
    font-size:10.5px; font-weight:600; padding:3px 6px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; gap:5px;
  }
[data-screen="admin-calendario"] .day-chip .cdot{width:5px; height:5px; border-radius:50%; flex-shrink:0;}
[data-screen="admin-calendario"] .day-chip.call{background:#E5F1E8; color:#2E5F41;}
[data-screen="admin-calendario"] .day-chip.call .cdot{background:#3F7D57;}
[data-screen="admin-calendario"] .day-chip.delivery{background:#FBEFE0; color:var(--orange-dark);}
[data-screen="admin-calendario"] .day-chip.delivery .cdot{background:var(--orange);}
[data-screen="admin-calendario"] .day-more{font-size:10.5px; color:var(--ink-soft); padding-left:6px;}
[data-screen="admin-calendario"] .side-title{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px;}
[data-screen="admin-calendario"] .side-title h2{font-size:17px; margin:0;}
[data-screen="admin-calendario"] .side-title span{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-calendario"] .event-card{
    display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); align-items:flex-start;
  }
[data-screen="admin-calendario"] .event-card:first-child{border-top:none;}
[data-screen="admin-calendario"] .event-icon{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-calendario"] .event-icon.call{background:#E5F1E8;}
[data-screen="admin-calendario"] .event-icon.call svg{stroke:#2E5F41;}
[data-screen="admin-calendario"] .event-icon.delivery{background:#FBEFE0;}
[data-screen="admin-calendario"] .event-icon.delivery svg{stroke:var(--orange-dark);}
[data-screen="admin-calendario"] .event-icon svg{width:16px; height:16px;}
[data-screen="admin-calendario"] .event-info .t{font-size:13.5px; font-weight:600;}
[data-screen="admin-calendario"] .event-info .c{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-top:2px;}
[data-screen="admin-calendario"] .event-info .c .mini-avatar{width:16px; height:16px; border-radius:50%; background:var(--green); color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif;}
[data-screen="admin-calendario"] .event-time{font-size:12px; color:var(--ink-soft); margin-left:auto; white-space:nowrap; flex-shrink:0;}
[data-screen="admin-calendario"] .event-actions{display:flex; gap:6px; flex-shrink:0; margin-left:10px;}
[data-screen="admin-calendario"] .event-btn{
    width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
[data-screen="admin-calendario"] .event-btn svg{width:12.5px; height:12.5px; stroke:var(--ink-soft);}
[data-screen="admin-calendario"] .event-btn:hover{border-color:var(--ink); background:var(--cream-dim);}
[data-screen="admin-calendario"] .event-btn.danger:hover{border-color:#B4472F; background:#FBEAE6;}
[data-screen="admin-calendario"] .event-btn.danger:hover svg{stroke:#B4472F;}
[data-screen="admin-calendario"] .empty-day{font-size:13px; color:var(--ink-soft); padding:18px 0; text-align:center;}
[data-screen="admin-calendario"] .overlay{
    position:fixed; inset:0; background:rgba(22,38,28,0.35); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
[data-screen="admin-calendario"] .overlay.show{opacity:1; pointer-events:auto;}
[data-screen="admin-calendario"] .modal{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:520px; max-width:92vw;
    background:var(--cream); border-radius:14px; z-index:96; box-shadow:0 40px 80px rgba(22,38,28,0.35);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-height:88vh; display:flex; flex-direction:column;
  }
[data-screen="admin-calendario"] .modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
[data-screen="admin-calendario"] .modal-head{padding:24px 26px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="admin-calendario"] .modal-head h3{font-size:20px; margin-bottom:4px;}
[data-screen="admin-calendario"] .modal-head p{font-size:13px; color:var(--ink-soft);}
[data-screen="admin-calendario"] .modal-close{width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
[data-screen="admin-calendario"] .modal-close svg{width:15px; height:15px; stroke:var(--ink-soft);}
[data-screen="admin-calendario"] .modal-body{padding:22px 26px; overflow-y:auto;}
[data-screen="admin-calendario"] .form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
[data-screen="admin-calendario"] .form-grid2 .full{grid-column:1/-1;}
[data-screen="admin-calendario"] .f-field .label{font-size:12px; color:var(--ink-soft); margin-bottom:5px; display:block; font-weight:500;}
[data-screen="admin-calendario"] .f-field input, [data-screen="admin-calendario"] .f-field select{
    width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 12px; font-family:'Inter',sans-serif;
    font-size:13.5px; background:#fff;
  }
[data-screen="admin-calendario"] .type-toggle{display:flex; gap:10px;}
[data-screen="admin-calendario"] .type-opt{
    flex:1; border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; align-items:center; gap:10px;
    cursor:pointer; background:#fff; font-size:13.5px; font-weight:600; color:var(--ink-soft);
  }
[data-screen="admin-calendario"] .type-opt svg{width:16px; height:16px; stroke:currentColor; flex-shrink:0;}
[data-screen="admin-calendario"] .type-opt.selected{border-color:var(--green); background:var(--cream-dim); color:var(--ink);}
[data-screen="admin-calendario"] .modal-foot{padding:18px 26px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}

/* admin-pagos */
[data-screen="admin-pagos"] .summary-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:22px;}
[data-screen="admin-pagos"] .summary-card{display:flex; align-items:center; gap:16px;}
[data-screen="admin-pagos"] .summary-icon{width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
[data-screen="admin-pagos"] .summary-icon.orange{background:#FBEFE0;}
[data-screen="admin-pagos"] .summary-icon.orange svg{stroke:var(--orange-dark);}
[data-screen="admin-pagos"] .summary-icon.green{background:#E5F1E8;}
[data-screen="admin-pagos"] .summary-icon.green svg{stroke:#2E5F41;}
[data-screen="admin-pagos"] .summary-icon.red{background:#FBEAE6;}
[data-screen="admin-pagos"] .summary-icon.red svg{stroke:#B4472F;}
[data-screen="admin-pagos"] .summary-icon svg{width:20px; height:20px;}
[data-screen="admin-pagos"] .summary-num{font-family:'Playfair Display', serif; font-size:24px;}
[data-screen="admin-pagos"] .summary-label{font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .pay-table{width:100%; border-collapse:collapse;}
[data-screen="admin-pagos"] .pay-table th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
    font-weight:600; padding:0 14px 12px; border-bottom:1px solid var(--line);
  }
[data-screen="admin-pagos"] .pay-table td{padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13.5px;}
[data-screen="admin-pagos"] .pay-table tr:last-child td{border-bottom:none;}
[data-screen="admin-pagos"] .pay-table tbody tr{cursor:pointer;}
[data-screen="admin-pagos"] .pay-table tbody tr:hover{background:var(--cream-dim);}
[data-screen="admin-pagos"] .u-cell{display:flex; align-items:center; gap:12px;}
[data-screen="admin-pagos"] .u-cell .avatar-photo{width:36px; height:36px; font-size:14px;}
[data-screen="admin-pagos"] .u-name{font-size:14px; font-weight:600;}
[data-screen="admin-pagos"] .u-sub{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .pkg-name{font-weight:600;}
[data-screen="admin-pagos"] .pkg-total{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .mini-progress{display:flex; align-items:center; gap:8px;}
[data-screen="admin-pagos"] .mini-track{width:64px; height:6px; background:var(--cream-dim); border-radius:10px; overflow:hidden;}
[data-screen="admin-pagos"] .mini-fill{height:100%; background:var(--green); border-radius:10px;}
[data-screen="admin-pagos"] .status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600;}
[data-screen="admin-pagos"] .status-pill.ok{background:#E5F1E8; color:#3F7D57;}
[data-screen="admin-pagos"] .status-pill.late{background:#FBEAE6; color:#B4472F;}
[data-screen="admin-pagos"] .status-pill.wait{background:#FBEFE0; color:var(--orange-dark);}
[data-screen="admin-pagos"] .status-pill.done{background:var(--cream-dim); color:var(--ink-soft);}
[data-screen="admin-pagos"] .status-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
[data-screen="admin-pagos"] .row-actions{display:flex; gap:6px; justify-content:flex-end;}
[data-screen="admin-pagos"] .icon-btn{
    width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
[data-screen="admin-pagos"] .icon-btn svg{width:15px; height:15px; stroke:var(--ink-soft);}
[data-screen="admin-pagos"] .icon-btn:hover{border-color:var(--ink); background:var(--cream-dim);}
[data-screen="admin-pagos"] .overlay{position:fixed; inset:0; background:rgba(22,38,28,0.35); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease;}
[data-screen="admin-pagos"] .overlay.show{opacity:1; pointer-events:auto;}
[data-screen="admin-pagos"] .drawer{
    position:fixed; top:0; right:0; height:100vh; width:460px; max-width:92vw; background:var(--cream);
    z-index:95; box-shadow:-20px 0 50px rgba(22,38,28,0.2); transform:translateX(100%);
    transition:transform .25s ease; display:flex; flex-direction:column;
  }
[data-screen="admin-pagos"] .drawer.show{transform:translateX(0);}
[data-screen="admin-pagos"] .drawer-head{padding:26px 26px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="admin-pagos"] .drawer-close{width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
[data-screen="admin-pagos"] .drawer-close svg{width:15px; height:15px; stroke:var(--ink-soft);}
[data-screen="admin-pagos"] .drawer-user{display:flex; gap:14px; align-items:center;}
[data-screen="admin-pagos"] .drawer-user .avatar-photo{width:48px; height:48px; font-size:18px;}
[data-screen="admin-pagos"] .drawer-user h3{font-size:18px; margin-bottom:2px;}
[data-screen="admin-pagos"] .drawer-user .sub{font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .drawer-body{padding:22px 26px; overflow-y:auto; flex-grow:1;}
[data-screen="admin-pagos"] .drawer-section{margin-bottom:26px;}
[data-screen="admin-pagos"] .drawer-section h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); font-weight:600; margin-bottom:12px;}
[data-screen="admin-pagos"] .pkg-box{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px;}
[data-screen="admin-pagos"] .pkg-box .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
[data-screen="admin-pagos"] .pkg-box .top .name{font-family:'Playfair Display', serif; font-size:17px;}
[data-screen="admin-pagos"] .pkg-box .top .price{font-family:'Playfair Display', serif; font-size:17px; color:var(--orange-dark);}
[data-screen="admin-pagos"] .progress-track{height:8px; background:var(--cream-dim); border-radius:20px; overflow:hidden; margin:6px 0 8px;}
[data-screen="admin-pagos"] .progress-fill{height:100%; background:var(--green); border-radius:20px;}
[data-screen="admin-pagos"] .pkg-meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .installment{
    display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line);
  }
[data-screen="admin-pagos"] .installment:first-of-type{border-top:none;}
[data-screen="admin-pagos"] .inst-icon{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:600;}
[data-screen="admin-pagos"] .inst-icon.ok{background:var(--green); color:#fff;}
[data-screen="admin-pagos"] .inst-icon.wait{background:var(--cream-dim); border:1px solid var(--line); color:var(--ink-soft);}
[data-screen="admin-pagos"] .inst-icon.late{background:#FBEAE6; color:#B4472F; border:1px solid #F0B9AC;}
[data-screen="admin-pagos"] .inst-body{flex-grow:1;}
[data-screen="admin-pagos"] .inst-body .name{font-size:13.5px; font-weight:600;}
[data-screen="admin-pagos"] .inst-body .date{font-size:12px; color:var(--ink-soft); margin-top:1px;}
[data-screen="admin-pagos"] .inst-amount{font-size:13.5px; font-weight:600; text-align:right; white-space:nowrap;}
[data-screen="admin-pagos"] .inst-action{margin-left:6px;}
[data-screen="admin-pagos"] .btn-tiny{
    background:var(--green); color:#fff; border:none; border-radius:6px; padding:7px 12px; font-size:12px; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
[data-screen="admin-pagos"] .btn-tiny:hover{background:var(--green-soft);}
[data-screen="admin-pagos"] .iban-box{
    display:flex; gap:12px; align-items:center; background:var(--cream-dim); border-radius:10px; padding:14px 16px; margin-top:6px;
  }
[data-screen="admin-pagos"] .iban-box svg{width:20px; height:20px; stroke:var(--orange-dark); flex-shrink:0;}
[data-screen="admin-pagos"] .iban-box .lbl{font-size:11.5px; color:var(--ink-soft);}
[data-screen="admin-pagos"] .iban-box .val{font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:500;}

/* admin-mensajes */
[data-screen="admin-mensajes"] .main{padding:36px 0 0; display:flex; flex-direction:column; height:100vh;}
[data-screen="admin-mensajes"] .main .topbar{padding:0 44px; margin-bottom:26px;}
[data-screen="admin-mensajes"] .inbox{
    flex-grow:1; display:grid; grid-template-columns:320px 1fr;
    border-top:1px solid var(--line); overflow:hidden;
  }
[data-screen="admin-mensajes"] .conv-list{border-right:1px solid var(--line); display:flex; flex-direction:column; background:#fff;}
[data-screen="admin-mensajes"] .conv-search{padding:16px 18px; border-bottom:1px solid var(--line);}
[data-screen="admin-mensajes"] .conv-search .search-box{width:100%;}
[data-screen="admin-mensajes"] .conv-tabs{display:flex; gap:6px; padding:12px 18px 0;}
[data-screen="admin-mensajes"] .conv-tab{
    font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer; color:var(--ink-soft);
  }
[data-screen="admin-mensajes"] .conv-tab.active{background:var(--cream-dim); color:var(--ink);}
[data-screen="admin-mensajes"] .conv-items{overflow-y:auto; flex-grow:1; padding:8px 8px 8px;}
[data-screen="admin-mensajes"] .conv-item{
    display:flex; gap:12px; padding:13px 10px; border-radius:10px; cursor:pointer; align-items:flex-start; position:relative;
  }
[data-screen="admin-mensajes"] .conv-item:hover{background:var(--cream-dim);}
[data-screen="admin-mensajes"] .conv-item.active{background:var(--cream-dim);}
[data-screen="admin-mensajes"] .conv-item .avatar-photo{width:40px; height:40px; font-size:15px; flex-shrink:0;}
[data-screen="admin-mensajes"] .conv-info{flex-grow:1; min-width:0;}
[data-screen="admin-mensajes"] .conv-top{display:flex; justify-content:space-between; gap:8px;}
[data-screen="admin-mensajes"] .conv-name{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
[data-screen="admin-mensajes"] .conv-time{font-size:11px; color:var(--ink-soft); flex-shrink:0;}
[data-screen="admin-mensajes"] .conv-preview{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
[data-screen="admin-mensajes"] .conv-item.unread .conv-name{font-weight:700;}
[data-screen="admin-mensajes"] .conv-item.unread .conv-preview{color:var(--ink); font-weight:500;}
[data-screen="admin-mensajes"] .unread-badge{
    width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px;
  }
[data-screen="admin-mensajes"] .thread{display:flex; flex-direction:column; background:var(--cream-dim);}
[data-screen="admin-mensajes"] .thread-head{
    background:#fff; border-bottom:1px solid var(--line); padding:16px 26px;
    display:flex; justify-content:space-between; align-items:center;
  }
[data-screen="admin-mensajes"] .thread-user{display:flex; gap:12px; align-items:center;}
[data-screen="admin-mensajes"] .thread-user .avatar-photo{width:38px; height:38px; font-size:14px;}
[data-screen="admin-mensajes"] .thread-user .t-name{font-size:14.5px; font-weight:600;}
[data-screen="admin-mensajes"] .thread-user .t-meta{font-size:12px; color:var(--ink-soft);}
[data-screen="admin-mensajes"] .thread-body{flex-grow:1; overflow-y:auto; padding:26px 30px; display:flex; flex-direction:column; gap:4px;}
[data-screen="admin-mensajes"] .day-divider{text-align:center; font-size:11.5px; color:var(--ink-soft); margin:14px 0 10px; position:relative;}
[data-screen="admin-mensajes"] .bubble-row{display:flex; margin-bottom:12px;}
[data-screen="admin-mensajes"] .bubble-row.out{justify-content:flex-end;}
[data-screen="admin-mensajes"] .bubble{max-width:62%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5;}
[data-screen="admin-mensajes"] .bubble-row.in .bubble{background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px;}
[data-screen="admin-mensajes"] .bubble-row.out .bubble{background:var(--green); color:#fff; border-bottom-right-radius:4px;}
[data-screen="admin-mensajes"] .bubble-time{display:block; font-size:10.5px; margin-top:5px; opacity:0.6;}
[data-screen="admin-mensajes"] .thread-compose{
    background:#fff; border-top:1px solid var(--line); padding:16px 26px; display:flex; gap:12px; align-items:flex-end;
  }
[data-screen="admin-mensajes"] .thread-compose textarea{
    flex-grow:1; border:1px solid var(--line); border-radius:10px; padding:11px 14px; resize:none;
    font-family:'Inter',sans-serif; font-size:13.5px; min-height:44px; max-height:120px; background:var(--cream);
  }
[data-screen="admin-mensajes"] .compose-icon{
    width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--cream);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
[data-screen="admin-mensajes"] .compose-icon svg{width:17px; height:17px; stroke:var(--ink-soft);}
[data-screen="admin-mensajes"] .send-btn{
    width:40px; height:40px; border-radius:8px; background:var(--orange); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
[data-screen="admin-mensajes"] .send-btn svg{width:17px; height:17px; stroke:#fff;}
[data-screen="admin-mensajes"] .send-btn:hover{background:var(--orange-dark);}

/* cliente-mi-proyecto */
[data-screen="cliente-mi-proyecto"] .info-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
[data-screen="cliente-mi-proyecto"] .field .label{font-size:12px; color:var(--ink-soft); margin-bottom:4px;}
[data-screen="cliente-mi-proyecto"] .field .value{font-size:14.5px; font-weight:600;}
[data-screen="cliente-mi-proyecto"] .status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:var(--cream-dim); font-size:12.5px; font-weight:600; color:#3F7D57;}
[data-screen="cliente-mi-proyecto"] .status-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
[data-screen="cliente-mi-proyecto"] .readonly-hint{
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft);
    background:var(--cream-dim); border-radius:8px; padding:9px 12px; margin-bottom:18px;
  }
[data-screen="cliente-mi-proyecto"] .readonly-hint svg{width:14px; height:14px; stroke:var(--ink-soft); flex-shrink:0;}
[data-screen="cliente-mi-proyecto"] .phase-list .phase{cursor:default;}
@media (max-width:980px){[data-screen="cliente-mi-proyecto"] .info-grid{grid-template-columns:repeat(2,1fr);}
}

/* cliente-mensajes */
[data-screen="cliente-mensajes"] .main{padding:36px 0 0; display:flex; flex-direction:column; height:100vh;}
[data-screen="cliente-mensajes"] .main .topbar{padding:0 44px; margin-bottom:22px;}
[data-screen="cliente-mensajes"] .chat-wrap{
    flex-grow:1; display:flex; flex-direction:column; margin:0 44px 0;
    background:#fff; border:1px solid var(--line); border-radius:14px 14px 0 0; overflow:hidden;
  }
[data-screen="cliente-mensajes"] .chat-head{
    padding:18px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; background:#fff;
  }
[data-screen="cliente-mensajes"] .chat-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff; display:flex;
    align-items:center; justify-content:center; font-family:'Playfair Display', serif; font-size:16px; flex-shrink:0; position:relative;
  }
[data-screen="cliente-mensajes"] .chat-avatar .online{position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:#4C9A6A; border:2px solid #fff;}
[data-screen="cliente-mensajes"] .chat-head .t-name{font-size:15px; font-weight:600;}
[data-screen="cliente-mensajes"] .chat-head .t-meta{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-top:1px;}
[data-screen="cliente-mensajes"] .chat-head .t-meta .dot{width:5px; height:5px; border-radius:50%; background:#4C9A6A;}
[data-screen="cliente-mensajes"] .chat-body{
    flex-grow:1; overflow-y:auto; padding:26px 30px; display:flex; flex-direction:column; background:var(--cream-dim);
  }
[data-screen="cliente-mensajes"] .day-divider{text-align:center; font-size:11.5px; color:var(--ink-soft); margin:16px 0 12px;}
[data-screen="cliente-mensajes"] .day-divider:first-child{margin-top:0;}
[data-screen="cliente-mensajes"] .bubble-row{display:flex; margin-bottom:12px; align-items:flex-end; gap:8px;}
[data-screen="cliente-mensajes"] .bubble-row.out{justify-content:flex-end;}
[data-screen="cliente-mensajes"] .bubble-row.in .mini-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; font-family:'Playfair Display', serif;
    font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
[data-screen="cliente-mensajes"] .bubble{max-width:60%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5;}
[data-screen="cliente-mensajes"] .bubble-row.in .bubble{background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px;}
[data-screen="cliente-mensajes"] .bubble-row.out .bubble{background:var(--green); color:#fff; border-bottom-right-radius:4px;}
[data-screen="cliente-mensajes"] .bubble-time{display:block; font-size:10.5px; margin-top:5px; opacity:0.6;}
[data-screen="cliente-mensajes"] .attach-card{
    display:flex; align-items:center; gap:10px; background:var(--cream-dim); border:1px solid var(--line);
    border-radius:8px; padding:9px 12px; margin-top:8px; font-size:12.5px; font-weight:600;
  }
[data-screen="cliente-mensajes"] .bubble-row.out .attach-card{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); color:#fff;}
[data-screen="cliente-mensajes"] .attach-card svg{width:14px; height:14px; stroke:currentColor; flex-shrink:0;}
[data-screen="cliente-mensajes"] .chat-compose{
    background:#fff; border-top:1px solid var(--line); padding:16px 26px; display:flex; gap:12px; align-items:flex-end;
  }
[data-screen="cliente-mensajes"] .chat-compose textarea{
    flex-grow:1; border:1px solid var(--line); border-radius:10px; padding:11px 14px; resize:none;
    font-family:'Inter',sans-serif; font-size:13.5px; min-height:44px; max-height:120px; background:var(--cream);
  }
[data-screen="cliente-mensajes"] .compose-icon{
    width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--cream);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
[data-screen="cliente-mensajes"] .compose-icon svg{width:17px; height:17px; stroke:var(--ink-soft);}
[data-screen="cliente-mensajes"] .send-btn{
    width:40px; height:40px; border-radius:8px; background:var(--orange); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
[data-screen="cliente-mensajes"] .send-btn svg{width:17px; height:17px; stroke:#fff;}
[data-screen="cliente-mensajes"] .send-btn:hover{background:var(--orange-dark);}

/* cliente-calendario */
[data-screen="cliente-calendario"] .cal-wrap{display:grid; grid-template-columns:1fr 1.6fr; gap:22px; align-items:start;}
[data-screen="cliente-calendario"] .cal-left{display:flex; flex-direction:column; gap:22px;}
[data-screen="cliente-calendario"] .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:18px;}
[data-screen="cliente-calendario"] .cal-dow{text-align:center; font-size:11.5px; color:var(--ink-soft); font-weight:600; padding-bottom:8px;}
[data-screen="cliente-calendario"] .cal-day{
    min-height:78px; border-radius:8px; padding:6px 6px;
    font-size:12.5px; color:var(--ink); cursor:default; position:relative;
    display:flex; flex-direction:column; gap:3px;
  }
[data-screen="cliente-calendario"] .cal-day .num{font-size:12.5px; font-weight:600; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
[data-screen="cliente-calendario"] .cal-day.muted{color:rgba(32,41,31,0.25);}
[data-screen="cliente-calendario"] .cal-day.muted .num{color:rgba(32,41,31,0.25);}
[data-screen="cliente-calendario"] .cal-day.today .num{background:var(--green); color:#fff; font-weight:600;}
[data-screen="cliente-calendario"] .cal-chip{
    font-size:10px; font-weight:600; padding:2px 6px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; gap:4px;
  }
[data-screen="cliente-calendario"] .cal-chip .cdot{width:5px; height:5px; border-radius:50%; flex-shrink:0;}
[data-screen="cliente-calendario"] .cal-chip.call{background:#E5F1E8; color:#2E5F41;}
[data-screen="cliente-calendario"] .cal-chip.call .cdot{background:#3F7D57;}
[data-screen="cliente-calendario"] .cal-chip.delivery{background:#FBEFE0; color:var(--orange-dark);}
[data-screen="cliente-calendario"] .cal-chip.delivery .cdot{background:var(--orange);}
[data-screen="cliente-calendario"] .cal-nav{display:flex; justify-content:space-between; align-items:center;}
[data-screen="cliente-calendario"] .cal-nav button{background:none; border:none; cursor:pointer; color:var(--ink-soft); width:28px; height:28px;}
[data-screen="cliente-calendario"] .cal-legend{display:flex; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
[data-screen="cliente-calendario"] .cal-legend-item{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft);}
[data-screen="cliente-calendario"] .cal-legend-dot{width:8px; height:8px; border-radius:50%;}
[data-screen="cliente-calendario"] .cal-legend-dot.call{background:#3F7D57;}
[data-screen="cliente-calendario"] .cal-legend-dot.delivery{background:var(--orange);}
[data-screen="cliente-calendario"] .appt-card{background:var(--cream-dim); border-radius:10px; padding:16px 18px; display:flex; justify-content:space-between; align-items:flex-start;}
[data-screen="cliente-calendario"] .appt-card + .appt-card{margin-top:12px;}
[data-screen="cliente-calendario"] .appt-card h4{font-size:14.5px; font-weight:600; margin-bottom:4px;}
[data-screen="cliente-calendario"] .appt-card .meta{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
[data-screen="cliente-calendario"] .appt-card .meta svg{width:13px; height:13px; stroke:var(--ink-soft);}
[data-screen="cliente-calendario"] .appt-right{text-align:right; font-size:12.5px; color:var(--ink-soft);}
[data-screen="cliente-calendario"] .appt-right b{display:block; font-size:13.5px; color:var(--ink);}
[data-screen="cliente-calendario"] .empty-appts{font-size:13px; color:var(--ink-soft); text-align:center; padding:14px 0;}

/* cliente-pagos */
[data-screen="cliente-pagos"] .big-amount{font-family:'Playfair Display', serif; font-size:32px; margin:6px 0 4px;}
[data-screen="cliente-pagos"] .pay-row{display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-top:1px solid var(--line);}
[data-screen="cliente-pagos"] .pay-row:first-of-type{border-top:none;}
[data-screen="cliente-pagos"] .pay-left{display:flex; gap:14px; align-items:center;}
[data-screen="cliente-pagos"] .pay-check{width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;}
[data-screen="cliente-pagos"] .pay-check.pending{background:var(--cream-dim); border:1px solid var(--line); color:var(--ink-soft);}
[data-screen="cliente-pagos"] .pay-name{font-size:14px; font-weight:600;}
[data-screen="cliente-pagos"] .pay-desc{font-size:12.5px; color:var(--ink-soft);}
[data-screen="cliente-pagos"] .pay-date{font-size:13px; color:var(--ink-soft); min-width:100px; text-align:right;}
[data-screen="cliente-pagos"] .pay-amount{font-size:14px; font-weight:600; min-width:90px; text-align:right;}
[data-screen="cliente-pagos"] .pay-amount.pending{color:var(--orange-dark);}
[data-screen="cliente-pagos"] .badge{display:inline-flex; align-items:center; gap:6px; background:var(--cream-dim); color:var(--ink); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px;}
[data-screen="cliente-pagos"] .badge .dot{width:7px; height:7px; border-radius:50%; background:#4C9A6A;}
[data-screen="cliente-pagos"] .iban{font-family:'IBM Plex Mono', monospace; font-size:13px;}

/* cliente-perfil */
[data-screen="cliente-perfil"] .field{margin-bottom:20px;}
[data-screen="cliente-perfil"] .field:last-child{margin-bottom:0;}
[data-screen="cliente-perfil"] .field .label{font-size:12px; color:var(--ink-soft); margin-bottom:4px;}
[data-screen="cliente-perfil"] .field .value{font-size:15px; font-weight:500;}
[data-screen="cliente-perfil"] .account-info{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
[data-screen="cliente-perfil"] .account-item .label{font-size:12px; color:var(--ink-soft); margin-bottom:4px;}
[data-screen="cliente-perfil"] .account-item .value{font-size:14px; font-weight:600;}
[data-screen="cliente-perfil"] .status-pill{display:inline-flex; padding:5px 12px; border-radius:20px; background:var(--cream-dim); font-size:12.5px; font-weight:600; color:#3F7D57;}
[data-screen="cliente-perfil"] .danger{color:#B4472F; font-weight:600; font-size:13.5px;}
[data-screen="cliente-perfil"] .avatar-large{
    width:76px; height:76px; border-radius:50%; background:var(--orange); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Playfair Display', serif;
    font-size:28px; flex-shrink:0; overflow:hidden;
  }
[data-screen="cliente-perfil"] .avatar-large img{width:100%; height:100%; object-fit:cover;}
[data-screen="cliente-perfil"] .avatar-hint{font-size:12px; color:var(--ink-soft); margin-top:9px;}
[data-screen="cliente-perfil"] .field-input{margin-bottom:16px;}
[data-screen="cliente-perfil"] .field-input:last-of-type{margin-bottom:6px;}
[data-screen="cliente-perfil"] .field-input label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:5px; font-weight:500;}
[data-screen="cliente-perfil"] .field-input input{
    width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 12px;
    font-family:'Inter',sans-serif; font-size:13.5px; background:#fff;
  }


/* fixes admin-calendario */
[data-screen="admin-calendario"] .month-grid, [data-screen="admin-calendario"] .day-cell{min-width:0;}
[data-screen="admin-calendario"] .day-chip{min-width:0; max-width:100%;}
[data-screen="admin-calendario"] .dow-head{min-width:0; overflow:hidden;}
@media (max-width:1180px){
  [data-screen="admin-calendario"] .cal-layout{grid-template-columns:1fr;}
}

/* fixes cliente-calendario */
[data-screen="cliente-calendario"] .month-grid, [data-screen="cliente-calendario"] .day-cell{min-width:0;}
[data-screen="cliente-calendario"] .day-chip{min-width:0; max-width:100%;}
[data-screen="cliente-calendario"] .dow-head{min-width:0; overflow:hidden;}
@media (max-width:1180px){
  [data-screen="cliente-calendario"] .cal-layout{grid-template-columns:1fr;}
}

/* fixes generales de rejilla */
@media (max-width:1180px){
  .cs .grid-2, .cs .grid-3{grid-template-columns:1fr;}
  .cs .kv-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .cs .main{padding:26px 20px 48px;}
  .cs .kv-grid, [data-screen="admin-usuarios"] .drawer .kv-grid{grid-template-columns:1fr;}
  .cs .topbar{flex-direction:column; gap:16px;}
}
.cs .table-wrap, .cs .tbl-wrap{overflow-x:auto;}
.cs .btn{white-space:nowrap;}

/* ================== RESPONSIVE ==================
   Completa los saltos que ya existían más arriba. Va al final de la hoja a
   propósito: así gana por orden a las reglas de escritorio sin subir
   especificidad. Los !important son solo para los estilos en línea del HTML. */

/* ---------- ≤980px: el lateral se convierte en barra de pestañas ---------- */
@media (max-width:980px){
  .cs .sidebar{
    flex-direction:row; align-items:center; gap:8px;
    height:auto; padding:10px 14px; overflow-x:auto;
    position:relative; top:auto;
  }
  .cs .sb-logo, .cs .sb-tag, .cs .sb-help{display:none;}
  .cs .sb-nav{flex-direction:row; gap:6px; flex-grow:0;}
  .cs .sb-nav a{white-space:nowrap; padding:9px 12px; font-size:13px;}
  .cs .sb-nav a svg{width:16px; height:16px;}
  .cs .sb-badge{display:none;}

  [data-screen="admin-panel"] .kpi-grid{grid-template-columns:repeat(2,1fr);}
  [data-screen="admin-panel"] .panel-grid{grid-template-columns:1fr;}
  [data-screen="admin-pagos"] .summary-grid{grid-template-columns:repeat(2,1fr);}
  [data-screen="cliente-calendario"] .cal-wrap{grid-template-columns:1fr;}

  /* Bandeja de mensajes: lista encima, conversación debajo. */
  [data-screen="admin-mensajes"] .main{height:auto;}
  [data-screen="admin-mensajes"] .inbox{grid-template-columns:1fr;}
  [data-screen="admin-mensajes"] .main .topbar{padding-left:20px; padding-right:20px;}
  [data-screen="admin-mensajes"] .conv-list{border-right:0; border-bottom:1px solid var(--line);}
}

/* ---------- ≤760px: móvil ---------- */
@media (max-width:760px){
  .cs .main{padding:22px 16px 44px;}
  .cs footer.app-footer{padding:20px 16px;}
  .cs .topbar h1{font-size:23px;}
  .cs .card{padding:20px 18px;}
  .cs .top-actions{gap:12px; flex-wrap:wrap;}

  [data-screen="admin-panel"] .kpi-grid,
  [data-screen="admin-pagos"] .summary-grid,
  [data-screen="cliente-mi-proyecto"] .info-grid,
  [data-screen="admin-proyectos"] .board,
  [data-screen="admin-usuarios"] .form-grid2,
  [data-screen="admin-calendario"] .form-grid2{grid-template-columns:1fr;}

  /* Rejillas escritas en línea dentro del HTML. */
  .cs [style*="grid-template-columns"]{grid-template-columns:1fr !important;}

  /* 16px evita que iOS haga zoom automático al enfocar un campo. */
  .cs input, .cs select, .cs textarea{font-size:16px !important;}

  .shellbar{gap:8px;}
  .shellbar .chiprow{width:100%; margin-left:0; overflow-x:auto; flex-wrap:nowrap;}
  .shellbar .chip{white-space:nowrap;}
}

/* ===========================================================================
   Aplicación real (portal.html)
   Lo de arriba viene del prototipo de diseño y se conserva tal cual. Aquí solo
   se neutraliza lo que era propio del prototipo —la barra superior con el
   conmutador de rol— y se añade lo que la aplicación necesita de verdad:
   pantalla de acceso, diálogos, avisos y estados vacíos.
   =========================================================================== */

/* El atributo `hidden` tiene que poder esconder el acceso y la aplicacion.
   La regla del navegador es [hidden]{display:none}, y pierde frente a
   .acceso{display:flex} o .cs.on{display:block}, que son mas especificas. Sin
   esto la pantalla de acceso se quedaba encima tapando el portal ya cargado:
   parecia que no se iniciaba sesion cuando en realidad si lo hacia. */
[hidden]{display:none !important;}

.clario-app{background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; line-height:1.55;}
.clario-app *{box-sizing:border-box;}
.clario-app img, .clario-app svg{display:block;}
.clario-app a{color:inherit; text-decoration:none;}

/* Sin barra superior, el lateral arranca arriba del todo. */
.cs .sidebar, .clario-app .sidebar{top:0; height:100vh;}
.clario-app .app{min-height:100vh;}
.col-principal{display:flex; flex-direction:column; min-width:0;}
.col-principal .main{flex-grow:1;}

/* ---------- Pantalla de acceso ----------
   Calcada de la ventana que se abre desde la web publica
   (data-auth-overlay en Clario Web.dc.html): mismos colores, mismos radios y
   los mismos campos en forma de pastilla. Aqui no hay web detras que
   difuminar, asi que el velo verde se apoya sobre la foto de portada. */
.acceso{
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:24px; overflow-y:auto; position:relative;
  background:#16261C;
}
.acceso::before{
  content:''; position:fixed; inset:0;
  background:url('hero-inicio.jpg') center/cover no-repeat;
  filter:blur(6px); transform:scale(1.06);
}
.acceso::after{
  content:''; position:fixed; inset:0; background:rgba(22,38,28,.72);
}
.acceso-caja{
  position:relative; z-index:1;
  width:100%; max-width:440px; margin:auto;
  background:#FAF6EE; border-radius:16px;
  box-shadow:0 40px 90px rgba(22,38,28,.4);
  padding:38px 38px 32px;
}
.acceso-marca{font-family:'Playfair Display',serif; font-size:24px; color:#16261C; line-height:1;}
.acceso-tag{
  font-size:7.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#5B6459; font-weight:600; margin-top:3px;
}
.acceso-caja h1{
  font-family:'Playfair Display',serif; font-size:25px; font-weight:500;
  color:#16261C; margin:26px 0 0; letter-spacing:-.015em;
}
.acceso-texto{margin:10px 0 0; font-size:13.5px; color:#5B6459; text-wrap:pretty;}
.acceso-caja label{display:block; font-size:12px; color:#5B6459; font-weight:500; margin:24px 0 6px;}
.acceso-caja label[for="acceso-pass"]{margin-top:16px;}
.acceso-caja input{
  width:100%; padding:13px 15px; border:1px solid rgba(32,41,31,.18);
  border-radius:999px; font-family:'Inter',sans-serif; font-size:13.5px;
  background:#fff; color:#20291F; outline:none;
}
.acceso-caja input:focus-visible{border-color:#C77B37; outline:2px solid rgba(217,142,74,.35); outline-offset:1px;}
.acceso-error{display:block; margin-top:8px; font-size:12px; color:#B4472F;}
.acceso-error[hidden]{display:none;}
.acceso-entrar{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:18px; padding:14px 22px; background:#16261C; color:#fff; border:0;
  border-radius:999px; font-family:'Inter',sans-serif; font-size:13.5px;
  font-weight:600; cursor:pointer;
}
.acceso-entrar:hover{background:#1F3327;}
.acceso-entrar[disabled]{opacity:.6; cursor:wait;}
.acceso-olvido-fila{display:flex; justify-content:center; margin-top:14px;}
.acceso-olvido{
  border:0; background:none; padding:0; font-family:'Inter',sans-serif;
  font-size:12.5px; color:#5B6459; cursor:pointer; text-decoration:underline;
}
.acceso-olvido:hover{color:#C77B37;}
.acceso-pie{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(32,41,31,.12);
}
.acceso-pie svg{width:16px; height:16px; flex-shrink:0; margin-top:2px;}
.acceso-pie p{font-size:12.5px; color:#5B6459; margin:0;}
.acceso-pie a{color:#C77B37; font-weight:600;}

/* ---------- Avisos ---------- */
.aviso{
  margin-top:16px; padding:12px 14px; border-radius:9px; font-size:13px;
  background:rgba(163,53,39,.09); color:#A33527; border:1px solid rgba(163,53,39,.28);
}
.aviso.ok{background:rgba(61,107,75,.10); color:#2F5A3C; border-color:rgba(61,107,75,.3);}
.aviso.info{background:var(--cream-dim); color:var(--ink-soft); border-color:var(--line);}

/* ---------- Estados de carga y vacío ---------- */
.cargando{padding:60px 0; text-align:center; color:var(--ink-faint, #8A9187); font-size:13.5px;}
.vacio{
  padding:34px 26px; text-align:center; border:1px dashed var(--line);
  border-radius:12px; background:#fff;
}
.vacio h3{font-family:'Playfair Display',serif; font-size:19px; font-weight:500; margin:0 0 6px;}
.vacio p{font-size:13.5px; color:var(--ink-soft); margin:0 auto; max-width:46ch;}
.vacio .btn{margin-top:18px;}

/* ---------- Diálogos ---------- */
.modal-fondo{
  position:fixed; inset:0; z-index:300; background:rgba(22,38,28,.55);
  display:flex; align-items:flex-start; justify-content:center; padding:24px; overflow-y:auto;
}
.modal-fondo[hidden]{display:none;}
.modal-caja{
  width:100%; max-width:560px; margin:auto; background:var(--cream);
  border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.modal-cabecera{
  display:flex; align-items:center; gap:16px; padding:22px 26px 16px; border-bottom:1px solid var(--line);
}
.modal-cabecera h2{font-family:'Playfair Display',serif; font-size:21px; font-weight:500; margin:0; flex-grow:1;}
.modal-cerrar{
  border:1px solid var(--line); background:#fff; width:30px; height:30px; border-radius:8px;
  cursor:pointer; color:var(--ink-soft); font-size:13px; line-height:1;
}
.modal-cerrar:hover{border-color:var(--green); color:var(--green);}
.modal-cuerpo{padding:22px 26px 26px;}
.modal-cuerpo label{display:block; font-size:12px; color:var(--ink-soft); font-weight:500; margin:16px 0 6px;}
.modal-cuerpo input, .modal-cuerpo select, .modal-cuerpo textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--ink); outline:none;
}
.modal-cuerpo textarea{min-height:110px; resize:vertical;}
.modal-acciones{display:flex; gap:10px; justify-content:flex-end; margin-top:26px; flex-wrap:wrap;}
.campo-doble{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}

/* ---------- Ficha de un cliente (gestionar su cuenta) ---------- */
.ficha-cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.ficha-acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.ficha-nota{
  margin-top:18px; font-size:13.5px; color:var(--ink-soft);
  background:var(--cream-dim); border-radius:8px; padding:13px 15px;
}

/* Lo irreversible va aparte y se ve distinto del resto: separado por un filete,
   sobre fondo propio y con el botón apagado hasta que se confirma. Un borrado
   que se parece a los demás botones es un borrado que alguien hará sin querer. */
.ficha-peligro{
  margin-top:24px; padding:16px 17px; border-radius:10px;
  background:#FBEAE6; border:1px solid #F0B9AC;
}
.ficha-peligro h4{font-family:'Playfair Display',serif; font-size:16px; font-weight:600; color:#8F2E22;}
.ficha-peligro p{margin-top:7px; font-size:13px; line-height:1.55; color:#6B3A32;}
.ficha-peligro label{display:block; margin-top:14px; font-size:12px; color:#6B3A32;}
.ficha-peligro label b{font-weight:600; color:#8F2E22;}
.ficha-peligro input{margin-top:6px; border-color:#E0A79A;}
.btn.btn-peligro{
  margin-top:12px; background:#B4472F; color:#fff; border:1px solid #B4472F;
}
.btn.btn-peligro:hover:not(:disabled){background:#8F2E22; border-color:#8F2E22;}
.btn.btn-peligro:disabled{background:#E3BDB4; border-color:#E3BDB4; color:#fff; cursor:not-allowed;}

/* ---------- Aviso flotante ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:400;
  background:var(--green); color:#fff; padding:13px 22px; border-radius:999px;
  font-size:13.5px; box-shadow:0 14px 40px rgba(22,38,28,.35); max-width:calc(100vw - 32px);
}
.toast[hidden]{display:none;}
.toast.error{background:#A33527;}

/* ---------- Detalles reutilizados ---------- */
.fila-clic{cursor:pointer;}
.fila-clic:hover{background:var(--cream-dim);}
.barra-progreso{height:6px; border-radius:999px; background:var(--cream-dim); overflow:hidden;}
.barra-progreso span{display:block; height:100%; background:var(--orange); border-radius:999px;}
.sb-pie{margin-top:auto;}
.btn[disabled]{opacity:.55; cursor:wait;}
.nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}

@media (max-width:980px){
  .clario-app .sidebar{height:auto;}
  .acceso-caja{padding:28px 22px 24px;}
}
@media (max-width:760px){
  .campo-doble{grid-template-columns:1fr;}
  .modal-fondo{padding:12px;}
}

/* ---------------------------------------------------------------------------
   Promocion de componentes
   El prototipo acotaba muchas piezas a una sola pantalla, con selectores del
   tipo [data-screen="admin-pagos"] .summary-card. La aplicacion las reutiliza
   en varias pantallas, asi que aqui se redeclaran bajo `.cs`, que esta siempre
   presente. Misma especificidad que las originales y van despues, de modo que
   ganan sin cambiar nada donde ya se veian bien. Cubre tambien `.acceso` y los
   dialogos, que viven fuera de `.cs`.
   --------------------------------------------------------------------------- */

.acceso .btn, .modal-fondo .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:9px; font-size:13.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.acceso .btn-primary, .modal-fondo .btn-primary{background:var(--orange); color:#fff;}
.acceso .btn-primary:hover, .modal-fondo .btn-primary:hover{background:var(--orange-dark);}
.modal-fondo .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.modal-fondo .btn-ghost:hover{border-color:var(--ink);}
.modal-fondo .btn-sm{padding:9px 16px; font-size:13px;}

/* Texto auxiliar propio de la aplicacion: el `.hint` heredado es una caja. */
.cs .nota, .modal-fondo .nota{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
.cs .nota + .nota{margin-top:3px;}

/* Tarjetas de totales */
.cs .summary-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:22px;}
.cs .summary-card{display:flex; align-items:center; gap:16px;}
.cs .summary-icon{width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cs .summary-icon svg{width:20px; height:20px;}
.cs .summary-icon.green{background:#E5F1E8;}   .cs .summary-icon.green svg{stroke:#2E5F41;}
.cs .summary-icon.orange{background:#FBEFE0;}  .cs .summary-icon.orange svg{stroke:var(--orange-dark);}
.cs .summary-icon.red{background:#FBEAE6;}     .cs .summary-icon.red svg{stroke:#B4472F;}
.cs .summary-icon.blue{background:#E7EEF3;}    .cs .summary-icon.blue svg{stroke:#2C5C86;}
.cs .summary-num{font-family:'Playfair Display',serif; font-size:24px;}
.cs .summary-label{font-size:12.5px; color:var(--ink-soft);}
.cs .big-amount{font-family:'Playfair Display',serif; font-size:32px; color:var(--green); line-height:1.1; margin:6px 0 4px;}

/* Iconos de indicador */
.cs .kpi-icon{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cs .kpi-icon svg{width:18px; height:18px;}
.cs .kpi-icon.green{background:#E5F1E8;}   .cs .kpi-icon.green svg{stroke:#2E5F41;}
.cs .kpi-icon.orange{background:#FBEFE0;}  .cs .kpi-icon.orange svg{stroke:var(--orange-dark);}
.cs .kpi-icon.red{background:#FBEAE6;}     .cs .kpi-icon.red svg{stroke:#B4472F;}
.cs .kpi-icon.blue{background:#E7EEF3;}    .cs .kpi-icon.blue svg{stroke:#2C5C86;}

/* Listas de eventos */
.cs .ev-mini{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:center;}
.cs .ev-mini:first-of-type{border-top:none;}
.cs .ev-date-box{
  width:42px; height:42px; border-radius:8px; background:var(--cream-dim); flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cs .ev-date-box b{font-family:'Playfair Display',serif; font-size:15px; line-height:1; font-weight:500;}
.cs .ev-date-box span{font-size:9px; text-transform:uppercase; color:var(--ink-soft); font-weight:600;}
.cs .event-card{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); align-items:flex-start;}
.cs .event-card:first-of-type{border-top:none;}
.cs .event-icon{
  width:34px; height:34px; border-radius:8px; background:var(--cream-dim); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.cs .event-icon svg{width:16px; height:16px; stroke:var(--ink-soft);}
.cs .event-info{flex-grow:1; min-width:0;}
.cs .event-time{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.cs .event-actions{display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end;}

/* Filas de pago y de detalle */
.cs .pay-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line);}
.cs .pay-row:first-of-type{border-top:none;}
.cs .pay-left{min-width:0;}
.cs .pay-name{font-size:13.5px; font-weight:600;}
.cs .pay-date{font-size:12px; color:var(--ink-soft); margin-top:2px;}

/* Identidad de persona */
.cs .u-cell{display:flex; align-items:center; gap:12px;}
.cs .u-name{font-size:14px; font-weight:600;}
.cs .u-email{font-size:12px; color:var(--ink-soft);}
.cs .u-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.cs .avatar-photo{
  width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:14px;
}

/* Tablas */
.cs .user-table{width:100%; border-collapse:collapse;}
.cs .user-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:600; padding:0 14px 12px; border-bottom:1px solid var(--line);
}
.cs .user-table td{padding:14px; border-bottom:1px solid var(--line); vertical-align:middle;}
.cs .user-table tr:last-child td{border-bottom:none;}

/* Estados */
.cs .status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap;}
.cs .status-pill.active{background:#E5F1E8; color:#3F7D57;}
.cs .status-pill.pending{background:#FBEFE0; color:var(--orange-dark);}
.cs .status-pill.danger{background:#FBEAE6; color:#B4472F;}

/* Pares etiqueta/valor */
.cs .info-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.cs .kv span{display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:2px;}
.cs .kv b{font-size:13.5px; font-weight:600;}
.cs .account-info{display:flex; flex-direction:column;}
.cs .account-item{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:13.5px;}
.cs .account-item:first-child{border-top:none;}
.cs .account-item span{color:var(--ink-soft);}

/* Atencion y actividad */
.cs .attn-item{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line);}
.cs .attn-item:first-of-type{border-top:none;}
.cs .attn-item.danger .u-name{color:#B4472F;}
.cs .attn-info{flex-grow:1; min-width:0;}
.cs .activity-item{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); align-items:center;}
.cs .activity-item:first-of-type{border-top:none;}
.cs .act-icon{width:32px; height:32px; border-radius:8px; background:var(--cream-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cs .act-icon svg{width:15px; height:15px; stroke:var(--ink-soft);}
.cs .act-body{flex-grow:1; min-width:0;}
.cs .act-time{font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}

/* Opciones del cuestionario */
.cs .type-toggle{display:flex; gap:10px;}
.cs .type-opt{
  border:1px solid var(--line); border-radius:8px; padding:11px 13px; display:flex; align-items:center;
  gap:9px; cursor:pointer; background:#fff; font-size:13px;
}
.cs .type-opt:hover{border-color:var(--orange);}
.cs .type-opt input{width:15px; height:15px; accent-color:var(--orange); flex-shrink:0;}
.cs .f-field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px;}
.cs .f-field input[type=text], .cs .f-field input[type=number], .cs .f-field input[type=date],
.cs .f-field input[type=range], .cs .f-field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--ink);
}
.cs .f-field textarea{min-height:90px; resize:vertical;}

/* Bandeja de mensajes */
.cs .inbox{display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; min-height:520px;}
.cs .conv-list{border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0;}
.cs .conv-items{overflow-y:auto; max-height:600px;}
.cs .conv-item{padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer;}
.cs .conv-item:hover{background:var(--cream-dim);}
.cs .conv-item.active{background:var(--cream-dim); box-shadow:inset 3px 0 0 var(--orange);}
.cs .conv-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.cs .conv-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs .conv-time{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.cs .conv-preview{font-size:12px; color:var(--ink-soft); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs .thread{display:flex; flex-direction:column; min-width:0;}
.cs .thread-head{padding:16px 20px; border-bottom:1px solid var(--line);}
.cs .thread-user{display:flex; align-items:center; gap:12px;}
.cs .chat-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:15px;
}
.cs .thread-body{flex-grow:1; overflow-y:auto; max-height:460px; padding:20px; background:var(--cream);}
.cs .thread-compose{display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); align-items:flex-end;}
.cs .bubble-row{display:flex; margin-bottom:12px;}
.cs .bubble-row.me{justify-content:flex-end;}
.cs .bubble{max-width:66%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px;}
.cs .bubble.me{background:var(--green); color:#fff; border-color:var(--green); border-bottom-left-radius:14px; border-bottom-right-radius:4px;}
.cs .bubble.me .u-sub{color:rgba(255,255,255,.7);}
.cs .bubble-time{display:block; font-size:10.5px; margin-top:5px; opacity:.6;}

/* Aviso destacado de la pantalla de inicio del cliente */
.cs .milestone-banner{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.cs .milestone-body{flex-grow:1; min-width:220px;}

@media (max-width:980px){
  .cs .summary-grid{grid-template-columns:1fr;}
  .cs .info-grid{grid-template-columns:repeat(2,1fr);}
  .cs .inbox{grid-template-columns:1fr; min-height:0;}
  .cs .conv-list{border-right:0; border-bottom:1px solid var(--line);}
  .cs .conv-items{max-height:240px;}
  .cs .bubble{max-width:85%;}
}
@media (max-width:600px){
  .cs .info-grid{grid-template-columns:1fr;}
  .cs .type-toggle{flex-direction:column;}
}

/* ---------- Desplegables ----------
   Mismo criterio que en la web publica: se sustituye la flecha del sistema por
   una propia para que el desplegable tenga la altura y el aire de un campo de
   texto. El SVG lleva width/height propios a proposito: sin ellos `auto` lo
   estira a lo alto del campo y la flecha se pega al borde superior. */
.cs select, .modal-cuerpo select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235B6459' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:calc(100% - 12px) center;
  background-size:11px 7px;
  padding-right:34px;
  cursor:pointer;
}
.cs select:hover, .modal-cuerpo select:hover{border-color:rgba(32,41,31,0.32);}
.cs select:focus-visible, .modal-cuerpo select:focus-visible{
  border-color:var(--orange);
  outline:2px solid rgba(217,142,74,0.3); outline-offset:1px;
}
.cs select option, .modal-cuerpo select option{background:#fff; color:var(--ink);}

/* ---------- Volver a la web ----------
   El portal era un callejon sin salida: una vez dentro no habia forma de
   regresar al sitio publico. Se resuelve por dos vias, porque el logo
   pulsable es una convencion que no todo el mundo conoce: un enlace explicito
   y, ademas, la marca clicable. */

/* Pantalla de acceso */
.acceso-volver{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  margin-bottom:22px; text-decoration:none;
}
.acceso-volver svg{width:14px; height:14px;}
.acceso-volver:hover{color:var(--orange-dark);}
/* La marca no es enlace: el "Volver a la web" de arriba ya cubre esa salida, y
   dos caminos al mismo sitio —uno de ellos sin señalar— solo despistan. */
.acceso-logo{display:block; text-align:center;}
.acceso-logo .acceso-marca, .acceso-logo .acceso-tag{display:block;}
/* El letter-spacing del rotulo deja un hueco tras la ultima letra que descentra
   la linea; el sangrado equivalente lo devuelve a su sitio. */
.acceso-logo .acceso-tag{text-indent:.26em;}

/* Barra lateral de la aplicacion */
.cs .sb-marca{display:block; text-decoration:none; color:inherit;}
.cs .sb-marca .sb-logo, .cs .sb-marca .sb-tag{display:block;}
.cs .sb-marca:hover .sb-logo{color:var(--orange);}
.cs .sb-marca .sb-logo{transition:color .15s ease;}
/* El margen inferior lo llevaba .sb-tag; al envolverlos pasa al contenedor. */
.cs .sb-marca .sb-tag{margin-bottom:0;}
.cs .sb-marca{margin-bottom:38px;}

@media (max-width:980px){
  /* Con el lateral convertido en barra de pestanas, la marca estorba y ya
     esta el enlace del pie de la aplicacion. */
  .cs .sb-marca{display:none;}
}

/* Pie de la aplicacion: la salida que esta disponible en cualquier ancho. */
.pie-enlaces{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.pie-enlaces a, .pie-enlaces #pie-salir{color:var(--ink-soft); text-decoration:none;}
.pie-enlaces a:hover, .pie-enlaces #pie-salir:hover{color:var(--orange-dark);}
.pie-enlaces #pie-salir{
  display:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:12.5px;
}
@media (max-width:980px){
  /* En movil la barra lateral es una fila de pestanas y .sb-help queda oculta,
     asi que este es el unico sitio desde el que se puede cerrar sesion. */
  .pie-enlaces #pie-salir{display:inline;}
}

/* ---------- Calendario de mes ----------
   Un solo componente para las dos areas, por eso cuelga de `.cs` y no de un
   data-screen concreto: el cliente ve sus citas y el equipo las de todos, pero
   la rejilla, la navegacion y los colores son los mismos.

   El color de cada cita codifica su estado, no su tipo: lo que hay que ver de
   un vistazo es que hay una propuesta sin responder, no si es de seguimiento
   o de revision. */

.cs .cal-pagina{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start;}

.cs .cal-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.cs .cal-titulo{font-size:19px; margin-right:auto;}
.cs .cal-mandos{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.cs .cal-flecha{
  width:30px; height:30px; border:1px solid var(--line); border-radius:7px;
  background:#fff; color:var(--ink-soft); cursor:pointer; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cs .cal-flecha:hover{border-color:var(--ink); color:var(--ink);}
.cs .cal-flecha:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.cs .cal-sem{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cs .cal-sem span{
  text-align:center; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; padding-bottom:8px;
}

.cs .cal-rejilla{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
/* Cada dia es un boton de verdad: se llega con el tabulador y se abre con Enter,
   que es lo que se espera de algo que cambia el panel de al lado. */
.cs .cal-celda{
  min-height:94px; border:1px solid transparent; border-radius:9px; padding:6px;
  background:var(--cream-dim); color:var(--ink); font:inherit; text-align:left;
  cursor:pointer; display:flex; flex-direction:column; gap:3px; overflow:hidden;
}
.cs .cal-celda:hover{border-color:var(--line);}
.cs .cal-celda:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
/* Los dias del mes vecino se ven, pero apagados: la semana no se corta. */
.cs .cal-celda.fuera{background:transparent; color:rgba(32,41,31,0.28);}
.cs .cal-celda.con-citas{background:#fff; border-color:var(--line);}
.cs .cal-celda.elegido{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange);}
.cs .cal-num{
  font-size:12.5px; font-weight:600; width:23px; height:23px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.cs .cal-celda.hoy .cal-num{background:var(--green); color:#fff;}

.cs .cal-chip{
  font-size:9.5px; font-weight:600; padding:2px 4px; border-radius:5px;
  display:flex; align-items:center; gap:3px; min-width:0;
}
.cs .cal-chip > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs .cal-chip i{width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0;}
.cs .cal-chip.propuesta{background:#FBEFE0; color:var(--orange-dark);}
.cs .cal-chip.confirmada{background:#E5F1E8; color:#2E5F41;}
.cs .cal-chip.realizada{background:var(--cream-dim); color:var(--ink-soft);}
.cs .cal-chip.cancelada, .cs .cal-chip.no_asistida{background:#FBEAE6; color:#B4472F;}
.cs .cal-chip.cancelada > span{text-decoration:line-through;}
.cs .cal-mas{font-size:10px; color:var(--ink-soft); padding-left:5px;}

.cs .cal-leyenda{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.cs .cal-ley{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft);}
/* En la leyenda el chip es solo la muestra de color, sin texto dentro. */
.cs .cal-ley .cal-chip{width:12px; height:12px; padding:0; border-radius:4px;}

.cs .cal-dia-tit{font-size:17px;}

@media (max-width:1180px){
  .cs .cal-pagina{grid-template-columns:1fr;}
}
@media (max-width:760px){
  /* A este ancho una rejilla de siete columnas deja casillas de 40px: caben el
     numero y nada mas. Se conservan los dias y el punto de color, y el detalle
     se lee en el panel al pulsar. */
  .cs .cal-celda{min-height:56px; padding:4px;}
  /* Solo cabe un punto por cita. Tiene que tomar el color fuerte del estado
     —el `color` del chip— y no su fondo palido, que sobre crema no se ve. */
  .cs .cal-rejilla .cal-chip{padding:0; width:7px; height:7px; border-radius:50%; background:currentColor;}
  .cs .cal-rejilla .cal-chip i, .cs .cal-rejilla .cal-chip > span{display:none;}
  .cs .cal-mas{display:none;}
  .cs .cal-titulo{width:100%; margin-right:0;}
}

/* ---------- Campos de formulario y desplegables ----------
   Las etiquetas y los campos solo estaban vestidos dentro de los dialogos
   (`.modal-cuerpo`) y del cuestionario (`.f-field`). Un formulario colocado en
   una tarjeta —el de «Mi perfil»— salia con los controles en crudo del
   navegador: etiqueta pegada al campo, sin ancho y sin relleno. Y los
   desplegables sueltos de las tablas solo recibian la flecha, no el marco, asi
   que cada uno arrastraba sus propios estilos en linea y no habia dos iguales.

   Las reglas del cuestionario (`.cs .f-field ...`) tienen mas especificidad que
   estas, asi que siguen mandando donde ya habia un criterio propio. */

.cs form label{display:block; font-size:12px; color:var(--ink-soft); font-weight:500; margin:16px 0 6px;}

.cs form input[type=text], .cs form input[type=email], .cs form input[type=tel],
.cs form input[type=number], .cs form input[type=date], .cs form input[type=datetime-local],
.cs form input[type=password], .cs form input[type=url], .cs form input:not([type]),
.cs form textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--ink);
}
.cs form textarea{min-height:110px; resize:vertical;}
.cs form input:focus-visible, .cs form textarea:focus-visible{
  border-color:var(--orange); outline:2px solid rgba(217,142,74,0.3); outline-offset:1px;
}

/* El relleno va desglosado y no en atajo: el atajo borraria el hueco que la
   regla de la flecha reserva a la derecha y el texto pasaria por debajo. */
.cs select{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:11px 34px 11px 13px;
  font-family:'Inter',sans-serif; font-size:13.5px; background-color:#fff; color:var(--ink);
}
/* Desplegable dentro de una fila o una tabla: mismo marco, mas apretado y solo
   con el ancho que necesita. */
.cs select.compacta{
  width:auto; padding:7px 30px 7px 11px; font-size:12.5px;
  background-position:calc(100% - 10px) center;
}

/* ---------- Correcciones de componentes heredados del prototipo ----------
   Tres sitios donde una regla escrita para un marcado que ya no existe seguia
   aplicandose al componente que ocupo su lugar. */

/* `.account-info` era una fila horizontal de datos sueltos; ahora es una lista
   de pares etiqueta/valor. La regla vieja dejaba puestos `align-items:center` y
   `gap`, que centraban cada par en medio de la tarjeta. Hay que apagarlos
   explicitamente: la regla promovida solo redefinia `display`. */
.cs .account-info{
  display:flex; flex-direction:column;
  align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:0;
}

/* `.doc-dl` era un boton de solo icono de 30x30. La aplicacion escribe dentro
   «Descargar», que no cabia en ese cuadrado y se salia de la tarjeta. Ya lleva
   .btn .btn-ghost .btn-sm, asi que basta con devolverle su tamaño natural. */
.cs .doc-dl{width:auto; height:auto; border-radius:8px; flex-shrink:0; margin-left:auto;}

/* La pantalla de mensajes del cliente quita el relleno lateral de `.main`
   porque el prototipo ponia ahi un `.chat-wrap` con margen propio. La
   aplicacion pinta `.inbox`, que no lo tenia: la bandeja salia pegada a los dos
   bordes y sin llenar el alto. */
[data-screen="cliente-mensajes"] .inbox{
  flex-grow:1; min-height:0; margin:0 44px;
  border-bottom:0; border-radius:14px 14px 0 0;
}
@media (max-width:980px){
  [data-screen="cliente-mensajes"] .inbox{margin:0 20px;}
  [data-screen="cliente-mensajes"] .main .topbar{padding-left:20px; padding-right:20px;}
}

/* ---------- Caja de escribir mensajes ----------
   Antes eran dos piezas sueltas —un campo y un boton— flotando en una franja
   blanca, y el campo estaba clavado a dos lineas: un mensaje largo se escribia
   por una rendija. Ahora es una sola superficie que crece con el texto hasta un
   tope y lleva dentro el boton y la ayuda de teclado.

   Lleva nombres nuevos a proposito. El prototipo traia una caja distinta para
   cada area (`.thread-compose` en el panel, `.chat-compose` en el cliente) con
   medidas y fondos que no coincidian; con clases que ninguna de esas reglas
   busca, las dos areas comparten la misma caja sin pelearse con la cascada. */
.cs .compositor{padding:14px 20px 18px; border-top:1px solid var(--line); background:#fff;}
.cs .compositor-caja{
  border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cs .compositor-caja:focus-within{border-color:var(--orange); box-shadow:0 0 0 3px rgba(217,142,74,0.16);}
.cs .compositor textarea{
  display:block; width:100%; border:0; background:none; outline:none; resize:none;
  padding:4px 2px; font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.55;
  color:var(--ink); min-height:0; max-height:168px; overflow-y:auto;
}
.cs .compositor-pie{display:flex; align-items:center; gap:14px; margin-top:8px;}
.cs .compositor-pista{flex:1; min-width:0; font-size:11.5px; color:var(--ink-soft);}
.cs .compositor-pista kbd{
  font-family:inherit; font-size:11px; font-weight:600; color:var(--ink);
  background:var(--cream-dim); border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
/* Con la caja vacia no hay nada que enviar, y el boton lo dice. */
.cs .compositor .btn[disabled]{opacity:0.45; cursor:not-allowed;}
.cs .compositor .btn[disabled]:hover{background:var(--orange);}

@media (max-width:760px){
  /* Sin teclado fisico la ayuda no dice nada util y se come la fila entera. */
  .cs .compositor-pista{display:none;}
  .cs .compositor{padding:12px 14px 14px;}
  .cs .compositor-pie .btn{width:100%; justify-content:center;}
}

/* ---------- box-sizing fuera de la aplicacion ----------
   `box-sizing:border-box` solo estaba puesto para los descendientes de `.cs`.
   La pantalla de acceso y los dialogos cuelgan del body, fuera de ese
   contenedor: alli un campo con `width:100%` sumaba ademas su relleno y su
   borde, y se salia de la caja por la derecha justo lo que mide el relleno.
   Se veia en el formulario de «Nueva cita» y en el propio formulario de
   entrada. */
.acceso, .acceso *, .modal-fondo, .modal-fondo *{box-sizing:border-box;}

/* ---------- Mi perfil (cliente) ----------
   La pantalla se lee mucho mas que se edita, asi que por defecto muestra los
   datos y el formulario solo aparece al pulsar «Editar datos». Los campos que
   el cliente no puede cambiar —correo, especialidad y convocatoria— no se
   esconden: van con un candado, para que vea que hay guardado y por que no lo
   puede tocar. */

.cs .card-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;}
.cs .card-cab .desc{margin-bottom:0;}
/* Los iconos de `icono()` no traen color de trazo: lo heredan de donde caen. */
.cs .card-cab .btn svg{width:14px; height:14px; stroke:currentColor;}

.cs .perfil-lista{display:flex; flex-direction:column; margin-top:20px;}
.cs .perfil-dato{padding:15px 0; border-top:1px solid var(--line);}
.cs .perfil-dato:first-child{border-top:0; padding-top:0;}
.cs .perfil-clave{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.cs .perfil-candado{display:inline-flex;}
.cs .perfil-candado svg{width:12px; height:12px; stroke:var(--ink-soft); opacity:0.7;}
.cs .perfil-valor{font-size:15.5px; margin-top:5px; overflow-wrap:anywhere;}

.cs .perfil-pass{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}

/* Tarjeta del cuestionario dentro de «Mi perfil»: desde que dejo de tener
   apartado propio en el lateral, es la unica puerta de entrada, asi que dice en
   que punto esta y lleva hasta el de un solo clic. */
.cs .cuest-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px;}
.cs .cuest-pct{font-family:'Playfair Display',serif; font-size:19px; color:var(--ink);}
.cs .cuest-cab + .progress-track{margin-top:10px;}
.cs .cuest-texto{margin-top:12px;}
.cs .cuest-ir{margin-top:16px;}

/* Franja de cuenta: icono, los tres datos en fila y la baja al final. */
.cs .cuenta{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.cs .cuenta-icono{
  width:56px; height:56px; border-radius:50%; background:var(--cream-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cs .cuenta-icono svg{width:24px; height:24px; stroke:var(--orange-dark);}
.cs .cuenta-cuerpo{flex:1; min-width:260px;}
.cs .cuenta-cuerpo h2{margin-bottom:16px;}
.cs .cuenta-datos{display:flex; gap:16px 48px; flex-wrap:wrap;}
.cs .cuenta-valor{font-size:14.5px; font-weight:500; margin-top:6px;}
/* En rojo porque es la unica accion de la pantalla sin vuelta atras. */
.cs .cuenta-baja{
  flex-shrink:0; border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; color:#B4472F;
  display:inline-flex; align-items:center; gap:6px;
}
.cs .cuenta-baja:hover{text-decoration:underline;}

@media (max-width:980px){
  .cs .card-cab{flex-direction:column; gap:12px;}
  .cs .cuenta{align-items:flex-start;}
  .cs .cuenta-baja{margin-left:80px;}   /* alineada con el texto, no con el icono */
}

/* La tarjeta de la derecha es corta; sin esto el grid la estira a la altura de
   la de datos y deja medio recuadro vacio debajo. */
[data-screen="cliente-perfil"] .grid-2{align-items:start;}

/* ---------- Bandeja de mensajes ----------
   El cliente habla solo con Clarió: una columna de conversaciones con una sola
   fila es una columna vacia, asi que su bandeja va a un solo panel. */
.cs .inbox-solo{grid-template-columns:1fr;}

/* El trozo en blanco bajo la caja de escribir salia de aqui: `.thread-body`
   llevaba el alto tope en 460px, asi que la conversacion dejaba de crecer mucho
   antes del final de la bandeja y lo que quedaba por debajo era fondo desnudo.
   En estas dos pantallas la bandeja ocupa todo el alto disponible, asi que el
   tope sobra; lo que hace falta es que el cuerpo pueda encogerse —de ahi los
   `min-height:0`— para que su propia barra de desplazamiento funcione en vez de
   empujar la caja de escribir hacia abajo. */
[data-screen="cliente-mensajes"] .thread,
[data-screen="admin-mensajes"] .thread{min-height:0;}
[data-screen="cliente-mensajes"] .thread-body,
[data-screen="admin-mensajes"] .thread-body{max-height:none; min-height:0;}

/* Con dos proyectos abiertos la cabecera lleva ademas el selector de hilo. */
.cs .thread-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* Una palabra sin espacios —un enlace largo, por ejemplo— no tiene por donde
   cortarse y se sale de la burbuja por el lado. */
.cs .bubble{overflow-wrap:anywhere;}

/* ---------- Cuestionario por bloques ----------
   Son veinte minutos de formulario. Viendo las 17 preguntas de una tirada no se
   sabe por donde se va ni cuanto queda, asi que se recorre bloque a bloque con
   los cuatro pasos siempre a la vista: el filete de arriba dice en cual estas
   (terracota), cuales estan completos (verde) y cuales no has tocado. */
.cs .pasos-lista{
  list-style:none; display:grid; gap:0 6px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom:22px;
}
.cs .paso button{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:14px 8px 0; border:0; border-top:3px solid var(--line);
  background:none; font:inherit; color:var(--ink-soft); cursor:pointer;
}
.cs .paso button:hover{color:var(--ink);}
.cs .paso button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.cs .paso-num{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; background:var(--cream-dim); color:var(--ink-soft);
}
.cs .paso-txt{font-size:13px; font-weight:600; overflow-wrap:anywhere;}
.cs .paso.listo button{border-top-color:#3F7D57;}
.cs .paso.listo .paso-num{background:#E5F1E8; color:#2E5F41;}
.cs .paso.actual button{border-top-color:var(--orange); color:var(--ink);}
.cs .paso.actual .paso-num{background:var(--orange); color:#fff;}
.cs .pasos .progress-meta{margin-bottom:0;}

.cs .cuest-pie{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.cs .cuest-pie-dcha{display:flex; gap:10px; margin-left:auto; flex-wrap:wrap;}

/* La obligatoria que falta al intentar enviar: se llega a ella desde otro
   bloque, asi que hay que poder localizarla de un vistazo. */
.cs .f-falta label{color:#B4472F;}

@media (max-width:600px){
  .cs .cuest-pie, .cs .cuest-pie-dcha{flex-direction:column; align-items:stretch;}
  .cs .cuest-pie-dcha{margin-left:0;}
  .cs .cuest-pie .btn{justify-content:center;}
}

/* ---------- Respuestas del cuestionario (ficha de proyecto) ----------
   Van plegadas dentro de la ficha, que ya es larga: 17 preguntas abiertas de
   golpe enterrarian los documentos y los pagos que hay debajo. Se usa
   <details> y no un dialogo aparte para no perder de vista el proyecto. */
.modal-cuerpo .qa{border:1px solid var(--line); border-radius:10px; background:#fff;}
.modal-cuerpo .qa-cab{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; cursor:pointer; list-style:none;
}
.modal-cuerpo .qa-cab::-webkit-details-marker{display:none;}
.modal-cuerpo .qa-estado{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0;}
.modal-cuerpo .qa-meta{font-size:12.5px; color:var(--ink-soft);}
.modal-cuerpo .qa-ver{font-size:13px; font-weight:600; color:var(--orange-dark); white-space:nowrap;}
.modal-cuerpo .qa[open] .qa-ver::after{content:'';}
.modal-cuerpo .qa[open] .qa-ver{color:var(--ink-soft);}
.modal-cuerpo .qa[open] .qa-cab{border-bottom:1px solid var(--line);}

.modal-cuerpo .qa-cuerpo{padding:4px 16px 16px;}
.modal-cuerpo .qa-bloque{padding-top:18px;}
.modal-cuerpo .qa-par{padding:11px 0; border-top:1px solid var(--line);}
.modal-cuerpo .qa-preg{font-size:12.5px; color:var(--ink-soft);}
.modal-cuerpo .qa-resp{font-size:13.5px; font-weight:500; margin-top:3px; overflow-wrap:anywhere;}
/* Sin contestar no es un dato: se ve que falta, no se lee como respuesta. */
.modal-cuerpo .qa-resp.vacia{font-weight:400; font-style:italic; color:rgba(32,41,31,0.38);}

/* ---------- Componentes dentro de los dialogos ----------
   La ficha de proyecto reutiliza las piezas de la aplicacion (filas de pagos,
   pares etiqueta/valor, pastillas de estado), pero el dialogo cuelga del body y
   no de `.cs`, asi que ninguna de esas reglas le llegaba: los datos salian
   pegados unos a otros y las filas sin separador. Se repiten aqui con el mismo
   criterio, en vez de mover el dialogo dentro de `.cs`, que arrastraria tambien
   el reseteo de margenes y el resto de la hoja. */
.modal-cuerpo h3.side-title{
  font-family:'Playfair Display',serif; font-size:16px; font-weight:500;
  color:var(--ink); margin:0 0 10px; letter-spacing:-0.01em;
}
.modal-cuerpo .eyebrow-sm{
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-dark); margin-bottom:6px;
}
.modal-cuerpo .u-name{font-size:14px; font-weight:600;}
.modal-cuerpo .u-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}

.modal-cuerpo .account-info{display:flex; flex-direction:column;}
.modal-cuerpo .account-item{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:1px solid var(--line); font-size:13.5px;
}
.modal-cuerpo .account-item:first-child{border-top:none;}
.modal-cuerpo .account-item span{color:var(--ink-soft);}

.modal-cuerpo .pay-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:13px 0; border-top:1px solid var(--line);
}
.modal-cuerpo .pay-row:first-of-type{border-top:none;}
.modal-cuerpo .pay-left{min-width:0;}
.modal-cuerpo .pay-name{font-size:13.5px; font-weight:600;}
.modal-cuerpo .pay-date{font-size:12px; color:var(--ink-soft); margin-top:2px;}

.modal-cuerpo .status-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap;
}
.modal-cuerpo .status-pill.active{background:#E5F1E8; color:#3F7D57;}
.modal-cuerpo .status-pill.pending{background:#FBEFE0; color:var(--orange-dark);}
.modal-cuerpo .status-pill.danger{background:#FBEAE6; color:#B4472F;}

/* Dentro del dialogo un `select` ocupa todo el ancho, que es lo que quiere un
   formulario; el de una fila de fase solo debe ocupar lo que necesita. */
.modal-cuerpo select.compacta{
  width:auto; padding:7px 30px 7px 11px; font-size:12.5px;
  background-position:calc(100% - 10px) center;
}

/* ---------- Dialogos largos ----------
   La ficha de proyecto mide 1685px. El velo de detras si tenia desplazamiento,
   pero la caja no: nada dentro del dialogo indicaba que quedaba contenido por
   debajo, asi que lo que no cabia en la primera pantalla era invisible en la
   practica. Ahora la caja se queda dentro de la ventana y es el cuerpo el que
   se desplaza, con su barra a la vista y la cabecera siempre presente. */
.modal-caja{
  display:flex; flex-direction:column;
  max-height:calc(100vh - 48px);
}
.modal-cabecera{flex-shrink:0;}
.modal-cuerpo{overflow-y:auto; min-height:0;}
@media (max-width:600px){
  .modal-caja{max-height:calc(100vh - 24px);}
}

/* ---------- Ficha ancha ----------
   La ficha de proyecto no es un formulario: lleva fases, pagos, documentos y
   las 17 respuestas del cuestionario. A 560px cada fila salia en columnas de
   una palabra. Solo se ensancha esta: en un formulario, un campo de 870px de
   ancho no se lee mejor que uno de 500px. */
.modal-caja.modal-ancha{max-width:920px;}

/* Con sitio de sobra, la pregunta se pone al lado de la respuesta en vez de
   encima: se recorren las 17 de un vistazo en la mitad de alto. */
.modal-ancha .qa-par{
  display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:4px 28px; align-items:baseline;
}
.modal-ancha .qa-resp{margin-top:0;}
@media (max-width:820px){
  .modal-ancha .qa-par{grid-template-columns:1fr;}
  .modal-ancha .qa-resp{margin-top:3px;}
}

/* ---------- Preguntas colgadas de una opcion ----------
   «¿Cuáles?» solo aparece si antes se ha marcado «Otras necesidades
   (especificarlas)». Se sangra y se le pone un filete a la izquierda para que
   se lea como parte de la pregunta de arriba y no como una pregunta suelta que
   ha salido de la nada: quien la ve aparecer tiene que entender por qué. */
.cs .f-field.f-colgada{
  margin-left:14px; padding-left:16px;
  border-left:2px solid var(--line, rgba(32,41,31,0.14));
}
.cs .f-field.f-colgada label{font-weight:500;}
@media (max-width:600px){
  .cs .f-field.f-colgada{margin-left:0; padding-left:12px;}
}


/* ===========================================================================
   El área personal en un teléfono
   ---------------------------------------------------------------------------
   El panel se diseñó para pantalla grande y se adaptó después, pero dos cosas
   se quedaron por el camino al mirarlo con el móvil en la mano:

   · Zonas de pulsación diminutas. Había botones de 36 px y enlaces de 20 px.
     La recomendación es 44: por debajo de eso el dedo falla y hay que apuntar,
     que en un móvil es justo lo que no se puede hacer.
   · Letra por debajo de 12 px, hasta 9 px en algún sitio. En una pantalla de
     escritorio a medio metro se lee; en un teléfono, no.

   Solo se toca en pantallas pequeñas: en escritorio el diseño está bien
   proporcionado y agrandarlo lo estropearía. Se sube la altura con relleno y
   no con `height`, para que un botón con texto largo siga creciendo.
   =========================================================================== */
@media (max-width:600px){
  /* --- Zonas de pulsación --- */
  .cs .btn,
  .cs button.btn,
  .cs select.compacta,
  .cs .fdoc-btn,
  .cs .event-btn{
    min-height:44px;
    padding-top:11px; padding-bottom:11px;
  }
  /* Los enlaces de «ver más» eran lo más pequeño de todo: 20 px de alto, sin
     ningún margen alrededor donde caiga el dedo. */
  .cs .link-more{
    min-height:44px;
    display:inline-flex; align-items:center;
    padding:10px 2px;
    margin-top:10px;
  }
  /* Las casillas del calendario se pulsan enteras: es el objetivo real, no el
     texto de dentro. */
  .cs .cal-dia,
  .cs .cal-cell{min-height:52px;}

  /* Las flechas de cambiar de mes son cuadradas y median 30 px. Se agrandan
     las dos medidas, no solo el alto, porque aquí el objetivo es el cuadrado
     entero. */
  .cs .cal-flecha{width:44px; height:44px;}

  /* --- Tamaños de letra --- */
  .cs,
  .cs .user-table th,
  .cs .pay-table th,
  .cs table th,
  .cs .act-time,
  .cs .bubble-time,
  .cs .ev-date-box span,
  .cs .ev-date-box .m,
  .cs .kv span,
  .cs kbd{font-size:12.5px;}

  /* Las iniciales de los días encabezan siete columnas de unos 50 px. Caben a
     12 px de sobra —«Mié» ocupa la mitad—, así que no hay motivo para dejarlas
     en 10,5. */
  .cs .cal-sem span{font-size:12px;}

  /* Estos dos son etiquetas cortas en mayúsculas; 12 px basta y mantienen el
     contraste de tamaño con el contenido al que acompañan. */
  .cs .act-time,
  .cs .bubble-time{font-size:12px;}

  /* La inicial dentro de un avatar diminuto no es texto que nadie lea: es un
     adorno, y agrandarla lo deformaría. Se deja como está a propósito. */
  .cs .mini-avatar{font-size:9px;}
}

/* ---------- Dónde transferir (ficha de perfil) ---------- */
.cs .perfil-ayuda{margin-top:6px; font-size:13px; color:var(--ink-soft); max-width:56ch;}
.cs .cuenta-valor.iban{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
/* Un IBAN se lee de cuatro en cuatro y se compara digito a digito: en una letra
   proporcional los unos y los sietes bailan. */
.cs .cuenta-valor.iban [data-iban]{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  letter-spacing:0.04em; user-select:all;
}

/* ---------- Aviso de mensajes sin leer en el menú ---------- */
.cs .sb-nav a{position:relative;}
.cs .sb-aviso{
  margin-left:auto; flex:none;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--orange); color:#fff;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
  font-variant-numeric:tabular-nums;
}
/* Sobre el apartado activo el fondo ya es claro: el redondel necesita seguir
   destacando, y en terracota sobre verde lo hace sin competir con el texto. */
.cs .sb-nav a.active .sb-aviso{background:var(--orange-dark);}