:root{
  --bg1:#b9dcff;
  --bg2:#92c7ff;
  --bg3:#d9ecff;

  --panel:#b1baff;
  --panel2:#9ea9ff;

  --text:#111827;
  --muted:#2f3a4a;

  --line: rgba(17,24,39,.22);
  --shadow: 0 18px 40px rgba(17,24,39,.16);
  --shadow2: 0 10px 22px rgba(17,24,39,.12);

  --btn:#e5e7eb;
  --btnHover:#d1d5db;
  --btnBorder: rgba(17,24,39,.24);

  /* inputs amarillo */
  --input:#fff3b0;
  --inputFocus:#ffe889;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 520px at 78% 18%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
}

.cp-shell{ max-width:1400px; margin:0 auto; padding:18px; }

.cp-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:22px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow2);
}

.cp-title{ font-weight:900; letter-spacing:.08em; font-size:18px; }
.cp-actions{ display:flex; align-items:center; gap:10px; }

.cp-btn{
  border:1px solid var(--btnBorder);
  background: var(--btn);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
  box-shadow: 0 8px 16px rgba(17,24,39,.10);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
  justify-content: center !important;
  text-align: center !important;
}
.cp-btn:hover{ background:var(--btnHover); transform:translateY(-1px); box-shadow:0 12px 22px rgba(17,24,39,.14); }
.cp-btn:active{ transform:translateY(0); }
.cp-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.cp-btn.primary{ background: linear-gradient(180deg, #eceff3, #d9dde3); }
.cp-btn.danger{ border-color: rgba(239,68,68,.45); }

.cp-pill{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  background: rgba(255,255,255,.55);
}

.cp-main{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap:14px;
  align-items:stretch;
}

.cp-side,.cp-center{
  border:1px solid var(--line);
  border-radius:22px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow2);
}

.cp-side{
	padding:12px;
	min-height:540px;
	max-width: 220px;   /* ajusta: 240-300 */
	flex: 0 0 220px;    /* ancho fijo */
}
	
.cp-side h3{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(17,24,39,.80);
}

.cp-stack{
	margin-top: -4px;    
	display:flex;
	flex-direction:column;
	gap:10px;
	}

.cp-center{
  min-height:540px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}
.cp-center-inner{ padding:14px; }

.cp-h1{
  margin:0 0 12px 0;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(17,24,39,.80);
  text-align: center;
  text-decoration: underline;
  font-weight: 900;
}
.cp-h1.cp-h1-main{
  text-align:center;
  font-size:20px;
  font-weight:800;
  letter-spacing:.10em;
}

/* ===== GRID general (clientes/trabajos) ===== */
.cp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

/* ===== FORM ROW (clientes/trabajos): label izquierda + input derecha ===== */
.cp-form-row{
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap:10px;
  align-items:center;
}

.cp-form-label{
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  color: rgba(17,24,39,.92);
}

.cp-form-row input,
.cp-form-row select,
.cp-form-row textarea,
.cp-input{
  width:100%;
  border:1px solid rgba(17,24,39,.22);
  background: var(--input);
  color: var(--text);
  border-radius:14px;
  padding:10px 10px;
  outline:none;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cp-form-row input:focus,
.cp-form-row select:focus,
.cp-form-row textarea:focus,
.cp-input:focus{
  background: var(--inputFocus);
  border-color: rgba(17,24,39,.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

.cp-inline{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}

/* ===== CONFIG (como primera versión): tarjetas en 3 columnas ===== */
.cp-config-top{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.cp-config-top-row{
  display:grid;
  grid-template-columns: max-content 1fr;
  gap:10px;
  align-items:center;
}
.cp-config-top-label{ font-weight:800; font-size:14px; white-space:nowrap; }

.cp-config-top-row .cp-input{
  width:100%;
  min-width:0;
  max-width:none;
}

.cp-config-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.cp-config-card{
  background: transparent !important;
  padding:10px;
  box-shadow: none !important;      /* si tenían sombra */
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cp-config-key{
  font-weight:900;
  letter-spacing:.06em;
  color: rgba(17,24,39,.85);
}

.cp-config-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}

/* ===== Modal + list ===== */
.cp-modal-backdrop{
  position:fixed; inset:0;
  background: rgba(17,24,39,.45);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.cp-modal{
  width:min(980px, 100%);
  border-radius:22px;
  border:1px solid rgba(17,24,39,.18);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cp-modal header{
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(17,24,39,.14);
}
.cp-modal header strong{
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(17,24,39,.78);
}
.cp-modal .body{ padding:12px 14px; }

.cp-list{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.cp-card{
  border:1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.55);
  border-radius:18px;
  padding:10px;
  box-shadow: 0 10px 18px rgba(17,24,39,.10);
  transition: transform .08s ease, box-shadow .18s ease;
}
.cp-card .id{ color: rgba(17,24,39,.70); font-size:12px; }
.cp-card .t{ font-weight:900; margin-top:6px; }
.cp-card:hover{ cursor:pointer; transform:translateY(-1px); box-shadow:0 14px 26px rgba(17,24,39,.14); }

/* ===== Bottom bar ===== */
.cp-bottom{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:22px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow2);
  padding:10px 12px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.cp-bottom-left{ justify-self:start; }
.cp-bottom-center{ justify-self:center; }
.cp-bottom-right{ justify-self:end; }

.cp-readonly{ display:flex; align-items:center; gap:10px; font-size:13px; color: rgba(17,24,39,.85); }
.cp-bottom-actions{ display:flex; gap:10px; align-items:center; }

.cp-nav{ display:flex; align-items:center; gap:8px; }
.cp-iconbtn{
  width:42px; height:40px;
  border-radius:14px;
  border:1px solid var(--btnBorder);
  background: var(--btn);
  color: var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 16px rgba(17,24,39,.10);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
}
.cp-iconbtn:hover{ background:var(--btnHover); transform:translateY(-1px); box-shadow:0 12px 22px rgba(17,24,39,.14); }
.cp-iconbtn:active{ transform:translateY(0); }

@media (max-width:1100px){
  .cp-main{ grid-template-columns:1fr; }
  .cp-side{ min-height:auto; }
  .cp-bottom{ grid-template-columns:1fr; gap:10px; }
  .cp-bottom-center,.cp-bottom-right{ justify-self:start; }
  .cp-config-top-row{ grid-template-columns: 1fr; }
  .cp-config-grid{ grid-template-columns: 1fr; }
  }
  
/* Borde fuerte azul/verdoso para inputs (muy visible) */
input, select, textarea{
  border: 1px solid #00a0ff !important;
  outline: none !important;
}

input:focus, select:focus, textarea:focus{
  border-color: #00dccc !important;
  box-shadow: 0 0 0 1px rgba(0, 220, 204, .35) !important;
}

/* Botones del panel lateral a ancho completo */
.cp-side .cp-stack{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.cp-side .cp-btn{
  display: flex !important;
  width: 100% !important;
}

/* Copiar/Pegar en 2 columnas ocupando todo el ancho */
.cp-side .cp-btn-row-2{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.cp-side .cp-btn-half{
  width: 100% !important;
  white-space: nowrap !important;
}

/* Configuración: títulos en negrita */
.cp-center .cp-h1{
  font-weight: 900;
}

/* Botones un poco más grandes */
.btn-login{
  padding:8px 14px;
  font-size:14px;
  border:1px solid transparent;
  border-radius:10px;
  background:#f3f4f6;
  color:#111;
  font-weight:700;  
  cursor:pointer;
  transition:all .15s ease;
}
.btn-login:hover{background:#e8e9ee;transform:translateY(-1px)}

.btn-upgrade{
  padding:8px 16px;
  font-size:14px;
  border:1px solid #3b82f6;
  border-radius:10px;
  background:#fff;
  color:#1d4ed8;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-upgrade:hover{background:#3b82f6;color:#fff;transform:translateY(-1px)}

.topbar-app{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda | título | derecha */
  align-items:center;
  gap:12px;
}

.topbar-app h1{
  margin:0;
  text-align:center;
  font-size:16px;
  font-weight:800;
}

.left-actions{justify-self:start; display:flex; gap:10px; align-items:center;}
.right-actions{justify-self:end; display:flex; gap:10px; align-items:center;}

/* Botón salir más grande */
.btn-logout{
  padding:10px 16px;
  font-size:14px;
  font-weight:800;
  border-radius:12px;
  border:1px solid #dc2626;
  background:#fee2e2;
  color:#991b1b;
  cursor:pointer;
}
.btn-logout:hover{
  filter:brightness(0.97);
  transform:translateY(-1px);
}
/* derecha: contenedor de botones (Iniciar sesión / Mejorar plan) */
.cp-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
}

/* izquierda: usuario/salir */
.user-slot{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
}

.save-msg{ margin-left:10px; font-size:13px; font-weight:700; }
.save-msg.ok{ color:#0a7f4f; }
.save-msg.err{ color:#c62828; }

.cp-row-selected{
  border-radius: 10px;
  padding: 6px;
  background: rgba(29, 78, 216, 0.08);
  outline: 1px solid rgba(29, 78, 216, 0.25);
}

.cp-form-row input.cp-input-selected{
  background-color: #E6D147;
 }
 
 /* Inputs más bajos SOLO en trabajos */
.cp-jobs .cp-form-row input.cp-input,
.cp-jobs .cp-form-row select.cp-input,
.cp-jobs .cp-form-row input,
.cp-jobs .cp-form-row select{
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.1;
  min-height: 34px;   /* baja/sube este número */
  height: 34px;       /* opcional, para fijar */
}

.cp-btn .cp-ico-search{
  width: 14px;
  height: 14px;
}
.cp-btn .cp-ico-search{
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.cp-btn .cp-ico-search svg{
  width: 14px;
  height: 14px;
}
.cp-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(15, 23, 42, .95);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  pointer-events: none;
}
.cp-modal.cp-modal-narrow{
  width: min(350px, calc(100vw - 24px));
}

.cp-unsaved-actions{
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.cp-unsaved-actions.split{
  justify-content: space-between;
}

.cp-center.cp-jobs.cp-job-done{
  background: #f3f4f6; /* gris claro */
}

.cp-status-radio{
  margin-top: -6px;        /* o -4px / -6px si quieres subir más */
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-radio{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}

.cp-radio input[type="radio"]{
  width: 15px;
  height: 15px;
}
.cp-side .cp-status-radio,
.cp-side .cp-status-radio label,
.cp-side .cp-status-radio span{
  font-size: 14px !important;
  font-weight: 400 !important;
}

.cp-client-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.cp-client-filter label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:400;
}

.cp-client-filter input[type="radio"],
.cp-client-filter input[type="checkbox"]{
  width:15px;
  height:15px;
}
.cp-input-inactive{
  background:#f3f4f6;
  color:#475569;
}
.cp-input.cp-input-inactive{
  background:#f3f4f6 !important;
  color:#475569 !important;
}
.cp-side-stats{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-sidebox{
  background: inherit;
  border: 2px solid rgba(255,255,255,0.40);  /* antes 1px */
  border-radius: 12px;
  padding: 10px;
}
.cp-sidebox-row{
  display: flex;
  align-items: center;
  justify-content: space-between;               /* label izq, número der */
  gap: 10px;
  padding: 6px 0;
}

.cp-sidebox-label{
  font-weight: 600;                           /* sin “negrita fuerte” */
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  flex: 1 1 auto;     /* el label ocupa el espacio restante */
  min-width: 0;
}

.cp-sidebox-mini{
  display: inline-block;          /* clave para span */
  width: 40px;
  padding: 3px 6px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-weight: 700;
  text-align: right;
  line-height: 1.2;
  font-size: 12px; /* antes heredaba ~13px, ahora un poco menor */
}

/* para los 2 últimos: 75px */
.cp-sidebox-mini.w75{
  width:65px;
  flex: 0 0 65px;     /* ancho fijo */
  min-width: 65px;
  text-align: right;
}
/* fila del checkbox centrada */
.cp-sidebox-checkrow{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}
/* checkbox centrado y texto más grande */
.cp-sidebox-check{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top: 6px;
}
.cp-sidebox-check label{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 14px;   /* sube aquí el tamaño del texto */
  font-weight: 600;
  line-height: 1.1;
}

.cp-sidebox-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
}
.cp-sidebox-num{
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  min-width: 80px;
  opacity: .95;
}
.cp-btn.cp-btn-mini{
  padding: 6px 10px;
  min-height: 30px;
  font-size: 13px;
  background:#BBF4FC;
}
.cp-btn.cp-btn-mini:hover{
  background:#DDFBFF;
}

.cp-btn.cp-btn-mini.cp-btn-summary{
  background:#DDFBFF;        /* más claro */
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;        /* igual que cp-btn */
}

.cp-btn.cp-btn-mini.cp-btn-summary:hover{
  background:#BBF4FC;
}

.cp-btn-conf{
  padding: 8px 10px;
  min-height: 30px;
  font-size: 13px;
  background:#BB8FFA;
}

.chart { display:flex; align-items:flex-end; gap:8px; padding:12px 6px; height:260px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.barWrap{ position:relative; width:26px; display:flex; align-items:flex-end; justify-content:center; }
.bar{ width:100%; border-radius:8px 8px 0 0; background:#2563eb; }
.barVal{ position:absolute; bottom:100%; transform:translateY(-4px); font-size:11px; color:#111; white-space:nowrap; }
.barLbl{ margin-top:6px; font-size:11px; text-align:center; color:#374151; }
.col{ display:flex; flex-direction:colu
/* contenedor del gráfico (si ya lo tienes, ajusta aquí) */
.chart{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px 6px;
  height:260px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

/* cada columna */
.barWrap{
  position:relative;
  width:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}

/* fondo de la columna: amarillo claro + borde */
.barColBg{
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#fff7cc;         /* amarillo claro */
  border:1px solid #e6d37a;   /* borde amarillo */
  border-radius:10px;
  padding:3px;                /* separa la barra del borde */
  box-sizing:border-box;
}

/* la barra real */
.bar{
  width:100%;
  border-radius:8px 8px 6px 6px;
  background:#2563eb;
}

/* valor encima: más arriba + color oscuro */
.barVal{
  position:absolute;
  bottom:100%;
  transform:translateY(-10px); /* más arriba (antes -4px) */
  font-size:11px;
  color:#111827;               /* negro/gris oscuro */
  white-space:nowrap;
  pointer-events:none;
}

/* etiqueta inferior */
.barLbl{
  margin-top:6px;
  font-size:11px;
  text-align:center;
  color:#374151;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;            /* evita que salte a otra fila */
}

.spacer{ flex:1 1 auto; }

#status{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;             /* evita que empuje a Salir */
}

/* empuja lo de la derecha */
.topbar .spacer{ flex: 1 1 auto; }

/* “Salir” al extremo derecho */
.topbar #btnClose{ margin-left: auto; }

.cp-config-top-row{
  display:grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  gap:10px;
  align-items:center;
}

.cp-btn.danger{
  border-color: #274DF5 !important;
}

/* Separar filtros del bloque de botones */
.cp-client-filter{
  margin-bottom: 12px;
}

/* Letra un poco más pequeña SOLO en el bloque de filtros */
.cp-client-filter span{
  font-size: 13px;
}