/*
 Theme Name:  Creatik CRM (GeneratePress Child)
 Theme URI:   https://creatikmkt.com/
 Description: Child theme para el CRM Creatik sobre GeneratePress.
 Author:      Creatik
 Author URI:  https://creatikmkt.com/
 Template:    generatepress
 Version:     1.0.0
*/

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: "Prompt", sans-serif; font-weight: 700; }
span, p, a             { font-family: "Prompt", sans-serif; }
.featured-image        { display: none; }

/* ============================================================
   MENÚ / NAVEGACIÓN (GeneratePress)
   ============================================================ */
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color:#fff; }
.main-navigation .main-nav li > a:hover { color:#E836CE !important; }
.nav-align-right .inside-navigation,
.nav-align-center .inside-navigation { justify-content:center; }

.gp-icon      { font-size:40px !important; } /* unificada (antes tenía 20 y 40) */
.mobile-menu  { display:none; }

/* Páginas específicas */
.page-id-1323 .main-navigation,
.parent-pageid-1018 .main-navigation { background:#000; }

.main-navigation ul ul { background:#000; }

.main-navigation .dropdown-menu-toggle svg { height: 20px;}

/* ============================================================
   LAYOUT CRM (páginas hijas de 1018)
   ============================================================ */
.parent-pageid-1018 #left-sidebar { background:#000; width:20%; color:#fff; }
.parent-pageid-1018 #primary      { width:80%; }

@media (max-width:980px){
  .parent-pageid-1018 #primary { width:100%; }
}

/* ============================================================
   WPForms (global)
   ============================================================ */
.wpforms-field-label{
  color:#fff !important; font-family:Montserrat !important;
  font-weight:300 !important; font-size:16px !important;
}
.wpforms-field-sublabel, .wpforms-field-limit-text{
  color:#fff !important; font-family:Montserrat !important;
  font-weight:300 !important; font-size:14px !important;
}
.wpforms-field-large, .wpforms-field-required{
  background:transparent !important; border-color:#fff !important;
}
.wpforms-submit{
  color:#fff; font-family:Montserrat !important; background:transparent !important;
  border:1px solid #fff !important; width:100% !important;
}
.wpforms-submit:hover{
  background:#E836CE !important; border:1px solid #fff !important; width:100% !important;
}

/* ============================================================
   FORMULARIO COTIZACIÓN (popup 211)
   ============================================================ */
#popmake-211 .wpforms-field-label{
  color:#E836CE !important; font-family:Montserrat !important;
  font-weight:300 !important; font-size:16px !important;
}
#popmake-211 .wpforms-field-sublabel, #popmake-211 .wpforms-field-limit-text{
  color:#80DCF9 !important; font-family:Montserrat !important;
  font-weight:300 !important; font-size:14px !important;
}
#popmake-211 .wpforms-field-large, #popmake-211 .wpforms-field-required{
  background:transparent !important; border-color:#E836CE !important;
}
#popmake-211 .wpforms-submit{
  color:#fff; font-family:Montserrat !important; background:#80DCF9 !important;
  border:1px solid #80DCF9 !important; width:100% !important;
}
#popmake-211 .wpforms-submit:hover{
  background:#E836CE !important; border:1px solid #fff !important; width:100% !important;
}

/* ============================================================
   JOINCHAT
   ============================================================ */
.joinchat__button{ bottom:80px !important; right:0 !important; }
@media (max-width:480px){
  .joinchat__button{ bottom:90px !important; right:16px !important; }
}

/* ============================================================
   APP COTIZACIÓN (desktop base)
   ============================================================ */
#app-cotizacion{ font-family:system-ui,-apple-system,Segoe UI,Roboto; }
#app-cotizacion .grid{ display:grid; gap:12px; align-items:center; }
#app-cotizacion .grid-2{ grid-template-columns:1fr 1fr; }
#app-cotizacion .section{ margin-top:16px; }
#app-cotizacion h3{ margin:18px 0 8px; }
#app-cotizacion .muted{ color:#666; font-size:.9em; }
#app-cotizacion .right{ text-align:right; }
#app-cotizacion .is-hidden{ display:none !important; }

#app-cotizacion .tabla{ width:100%; border-collapse:collapse; }
#app-cotizacion .tabla th,
#app-cotizacion .tabla td{ border:1px solid #eee; padding:8px; vertical-align:top; }
#app-cotizacion .tabla-wrap{ width:100%; overflow:auto; }

#app-cotizacion .acciones{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

#app-cotizacion #nuevo-prospecto-panel input{
  border:1px solid #8EC8F8; border-radius:10px; line-height:1.5; padding:10px;
}
#app-cotizacion #btn-guardar-prospecto{
  background:#8EC8F8; font-weight:600; padding:10px 14px; border:0; border-radius:10px; cursor:pointer;
}
#app-cotizacion #btn-guardar-prospecto:hover{
  background:transparent; border:2px solid #8EC8F8; color:#8EC8F8;
}

#app-cotizacion .btn-primario{
  background:#EE36D4 !important; color:#fff; font-weight:600; border-radius:10px;
}
#app-cotizacion .btn-primario:hover{
  background:transparent !important; border:1px solid #EE36D4; color:#EE36D4;
}
#app-cotizacion .btn-sec{
  background:#8EC8F8; font-weight:600; padding:10px 14px; border:0; border-radius:10px; cursor:pointer;
}
#app-cotizacion .btn-sec:hover{
  border:1px solid #8EC8F8; background:transparent; color:#8EC8F8;
}
@media (max-width:900px){ #app-cotizacion .btn-sec{ width:100%; } }

#app-cotizacion .section-tipo label{ display:inline-block !important; width:100px; }
#app-cotizacion .field--tipo{ vertical-align:middle !important; }
#app-cotizacion .radio-group{ display:inline-block; }

#app-cotizacion .section-tipo select,
#app-cotizacion .datos-generales select,
#app-cotizacion .datos-generales input{
  border:1px solid #8EC8F8; border-radius:10px; width:70%;
}
#app-cotizacion textarea{ border:1px solid #8EC8F8; border-radius:10px; }
#app-cotizacion .datos-generales label{ width:100px; }
#app-cotizacion .field label{ display:inline-block; }
#app-cotizacion #inp-fecha{ height:44px; padding:0 20px; }

#app-cotizacion #tbody-partidas select,
#app-cotizacion #tbody-partidas input{
  border:1px solid #8EC8F8; border-radius:10px; width:100%;
}

#app-cotizacion #tabla-partidas th, #app-cotizacion #tabla-partidas td {
  border: 1px solid rgba(142,200,248,.5);
}


#app-cotizacion #tbody-partidas .btn-add-desc{
  float:right; margin-top:10px; border-radius:10px; background:#8EC8F8; font-weight:700;
}
#app-cotizacion #tbody-partidas .btn-add-desc:hover{
  border:1px solid #8EC8F8; background:transparent; color:#8EC8F8;
}
#app-cotizacion #tbody-partidas .btn-borrar{
  background:red; border-radius:50%; padding:1px 11px 3px 10px;
}
#app-cotizacion #tbody-partidas .btn-borrar:hover{
  background:transparent; border:1px solid red; color:red;
}
#app-cotizacion .muted input[type="checkbox"]{ width:20px !important; }
#app-cotizacion #sel-importante-cat,
#app-cotizacion #sel-forma-cat{
  margin-bottom:20px; border-radius:10px; border:1px solid #8EC8F8;
}

#app-cotizacion #tbody-partidas .desc-multi { margin-bottom:30px;} 

#app-cotizacion #tbody-partidas .det-multi { border-top: 1px solid rgba(142,200,248,.5)}

#app-cotizacion #tbody-partidas .det-selects { margin-top: 10px;}

#app-cotizacion #tbody-partidas .picker-row .btn-picker-del
{ background:#8EC8F8;border-radius:10px;}

#app-cotizacion #tbody-partidas .picker-row .btn-picker-del:hover
{ background:red;}

#app-cotizacion #tbody-partidas .list-descripciones .btn-mini
{ background:#8EC8F8;border-radius:10px;padding:5px 14px;}

#app-cotizacion #tbody-partidas .list-descripciones .btn-mini:hover
{ background:red;}

@media only screen and (max-width:600px){
	#app-cotizacion #tbody-partidas .btn-borrar{
  background: transparent;
	color: red;
}
		#app-cotizacion #tbody-partidas .btn-borrar:hover{
  border: none;

}
}

/* ============================================================
   LISTADO DE COTIZACIONES (desktop base)
   ============================================================ */
#app-listado-cotizaciones .lc-wrap{ font-size:14px; color:#1f2937; }

/* Toolbar / filtros / acciones */
#app-listado-cotizaciones .lc-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
#app-listado-cotizaciones .lc-filtros{ display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
#app-listado-cotizaciones .lc-actions{ display:flex; justify-content:flex-end; gap:8px; align-items:center; }

#app-listado-cotizaciones .lc-field{ display:flex; flex-direction:column; gap:4px; }
#app-listado-cotizaciones .lc-field label{ font-size:12px; color:#000; }
#app-listado-cotizaciones .lc-input,
#app-listado-cotizaciones .lc-select{
  border:1px solid #8EC8F8; border-radius:10px; padding:8px 10px; min-height:36px;
}

/* Botones */
#app-listado-cotizaciones .lc-btn{ border:1px solid #d1d5db; border-radius:8px; padding:8px 10px; background:#fff; cursor:pointer; }
#app-listado-cotizaciones .lc-btn.primary{ background:#111827; color:#fff; border-color:#111827; }
#app-listado-cotizaciones .lc-btn.green{   background:#10b981; color:#fff; border-color:#059669; }
#app-listado-cotizaciones .lc-btn.red{     background:#ef4444; color:#fff; border-color:#dc2626; }
#app-listado-cotizaciones .lc-btn:disabled{ opacity:.6; cursor:not-allowed; }

#app-listado-cotizaciones .lc-filtros .lc-btn,
#app-listado-cotizaciones .lc-actions .lc-btn{
  border-radius:10px; background:#8EC8F8; font-weight:700; color:#fff;
}
#app-listado-cotizaciones .lc-filtros .lc-btn:hover,
#app-listado-cotizaciones .lc-actions .lc-btn:hover{
  border:1px solid #8EC8F8; background:transparent; color:#8EC8F8;
}

/* Tabla */
#app-listado-cotizaciones .lc-table-wrap{ width:100%; overflow:auto; }
#app-listado-cotizaciones .lc-table{
  display:table; width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
}
#app-listado-cotizaciones .lc-table thead th{
  padding:10px 12px; border-bottom:1px solid #f3f4f6; vertical-align:top;
  background:#8EC8F8; color:#000; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; white-space:nowrap;
}
#app-listado-cotizaciones .lc-table td{
  padding:10px 12px; border-bottom:1px solid #f3f4f6; vertical-align:top; background:#fff; color:#000;
}
#app-listado-cotizaciones .lc-table tr:hover td{ background:#fff; }

/* Badges */
#app-listado-cotizaciones .lc-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
#app-listado-cotizaciones .s-BORRADOR  { background:#eef2ff;  color:#3730a3; }
#app-listado-cotizaciones .s-ENVIADA   { background:#e0f2fe;  color:#075985; }
#app-listado-cotizaciones .s-ACEPTADA  { background:#dcfce7;  color:#166534; }
#app-listado-cotizaciones .s-RECHAZADA { background:#fee2e2;  color:#991b1b; }
#app-listado-cotizaciones .s-MODIFICADA{ background:#fde68a;  color:#92400e; }
#app-listado-cotizaciones .s-CANCELADA { background:#f3f4f6;  color:#374151; }
#app-listado-cotizaciones .s-VENCIDA   { background:#ffe4e6;  color:#9f1239; }

#app-listado-cotizaciones .lc-row-actions .lc-btn{ padding:6px 8px; font-size:12px; color:#000; }
#app-listado-cotizaciones .lc-pagination{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
#app-listado-cotizaciones .lc-pager{ display:flex; gap:6px; }
#app-listado-cotizaciones .lc-link{ color:#111827; text-decoration:none; }
#app-listado-cotizaciones .nowrap{ white-space:nowrap; }
#app-listado-cotizaciones .muted{ color:#6b7280; }
#app-listado-cotizaciones .lc-pager .lc-btn{ color:#000; }
#app-listado-cotizaciones .lc-cards{ display:none; }

/* ============================================================
   RESPONSIVE (≤900px) — COTIZACIÓN & LISTADO
   ============================================================ */
@media (max-width:900px){
  /* Cotización */
  #app-cotizacion .grid-2{ grid-template-columns:1fr; }
  #app-cotizacion .datos-generales label,
  #app-cotizacion .section-tipo label,
  #app-cotizacion .field label{ width:auto; display:block; margin-bottom:6px; }
  #app-cotizacion .datos-generales input,
  #app-cotizacion .datos-generales select,
  #app-cotizacion .section-tipo select,
  #app-cotizacion textarea{ width:100%; }
  #app-cotizacion .radio-group{ display:flex; gap:10px; flex-wrap:wrap; }

  /* Partidas como tarjetas */
  #app-cotizacion #tabla-partidas thead{ display:none; }
  #app-cotizacion #tabla-partidas{ width:100%; min-width:0; }
  #app-cotizacion #tabla-partidas td{ border:none; }
  #app-cotizacion #tabla-partidas tbody tr{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:
      "concepto  concepto"
      "cantidad  precio"
      "importe   acciones";
    gap:10px; border:1px solid #e5e7eb; border-radius:12px;
    padding:12px; margin-bottom:12px; background:#fff;
  }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(1){ display:none; }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(2){ grid-area:concepto; }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(3){ grid-area:cantidad; }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(4){ grid-area:precio; }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(5){ grid-area:importe; text-align:right; }
  #app-cotizacion #tabla-partidas tbody tr > td:nth-child(6){ grid-area:acciones; }
  #app-cotizacion #tabla-partidas tbody td{ position:relative; padding:4px 2px; }
  #app-cotizacion #tabla-partidas tbody td::before{
    content:attr(data-th); display:block; font-size:12px; color:#6b7280; margin-bottom:6px;
  }
  #app-cotizacion #tabla-partidas tbody td:nth-child(2) .grid{ gap:8px; }
  #app-cotizacion #tabla-partidas tbody td:nth-child(6) .btn{ width:100%; }
  #app-cotizacion #tbody-partidas .desc-multi{ margin-bottom:50px; }

  #app-cotizacion .grid .tabla{ width:100%; }
  #app-cotizacion .acciones{ flex-direction:column; align-items:stretch; gap:10px; }
  #app-cotizacion .acciones .btn-primario,
  #app-cotizacion .acciones .btn-sec{ width:100%; }
  #app-cotizacion #tbody-partidas .btn-add-desc{ float:none; width:100%; }
  #app-cotizacion #tbody-partidas .btn-del{ padding:4px 10px; border-radius:8px; }
  #app-cotizacion #inp-fecha{ width:100%; }

  /* Listado: cards ON, tabla OFF */
  #app-listado-cotizaciones .lc-table{ display:none; }
  #app-listado-cotizaciones .lc-cards{ display:block; }
  #app-listado-cotizaciones .hide-md{ display:none !important; }
  #app-listado-cotizaciones .lc-table-wrap{ overflow:visible; }

  #app-listado-cotizaciones .lc-card{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.06); padding:12px; margin-bottom:12px;
  }
  #app-listado-cotizaciones .lc-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  #app-listado-cotizaciones .lc-item small{ display:block; font-size:12px; color:#6b7280; margin-bottom:4px; line-height:1.1; }
  #app-listado-cotizaciones .lc-item .val{ display:block; }
  #app-listado-cotizaciones .lc-status-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  #app-listado-cotizaciones .lc-card-actions{
    margin-top:10px; padding-top:10px; border-top:1px dashed #e5e7eb;
    display:flex; gap:8px; flex-wrap:wrap;
  }
  #app-listado-cotizaciones .lc-card-actions .lc-btn{
    flex:1 1 calc(50% - 8px); text-align:center; padding:8px 10px;
  }

  /* Toolbar y paginación */
  #app-listado-cotizaciones .lc-toolbar{ grid-template-columns:1fr; gap:10px; }
  #app-listado-cotizaciones .lc-filtros{ display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
  #app-listado-cotizaciones .lc-field, 
  #app-listado-cotizaciones .lc-input, 
  #app-listado-cotizaciones .lc-select{ width:100%; }
  #app-listado-cotizaciones .lc-actions{ justify-content:stretch; flex-wrap:wrap; gap:8px; }
  #app-listado-cotizaciones .lc-actions .lc-btn{ width:100%; }

  #app-listado-cotizaciones .lc-pagination{
    display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 8px;
    align-items:center; justify-content:center; margin-top:12px;
  }
  #app-listado-cotizaciones .lc-count{ flex:1 1 100%; text-align:center; order:-1; }
  #app-listado-cotizaciones .lc-pager{ display:block; align-items:center; justify-content:center; max-width:100%; }
  #app-listado-cotizaciones .lc-pager .lc-btn{ display:inline-block; padding:8px 10px; width:48%; margin-bottom:10px; }
  #app-listado-cotizaciones .lc-pager .lc-select{ padding:6px 8px; width:48%; }
  #app-listado-cotizaciones .nowrap{ white-space:normal; }
  #app-listado-cotizaciones .muted{ color:#6b7280; }

  @media (max-width:480px){
    #app-listado-cotizaciones .lc-card-grid{ grid-template-columns:1fr; }
  }
}

/* ============================================================
   MENÚ LATERAL (widgets)
   ============================================================ */
.inside-left-sidebar{ margin:0 !important; }
.inside-left-sidebar #block-7{ padding:0 20px 0 0; }

/* ============================================================
   CRM SIDE NAV (custom)
   ============================================================ */
/* Variables */
#crm-open-sidenav{
  --crm-bg:#0f172a; --crm-bg-hover:#111827; --crm-txt:#cbd5e1; --crm-txt-dim:#94a3b8;
  --crm-accent:#8EC8F8; --crm-active:#0ea5e9; --crm-border:#1e293b;
  --crm-w:260px; --crm-z:1000;
}

/* Panel */
#crm-open-sidenav .crm-sidenav{
  width:var(--crm-w); min-height:calc(100vh - 40px); background:var(--crm-bg); color:var(--crm-txt);
  border-radius:14px; padding:12px 10px; box-shadow:0 10px 30px rgba(2,6,23,.35); z-index:var(--crm-z); height:100%;
}
#crm-open-sidenav .crm-sidenav__top{
  display:block; text-align:center; padding:6px 8px 10px;
  border-bottom:1px solid var(--crm-border); margin-bottom:8px; width:100%;
}
#crm-open-sidenav .crm-brand img{ max-height:34px; display:block; margin:0 10px 0 40px; }
#crm-open-sidenav .crm-sidenav__toggle{
  display:inline-flex; border:1px solid var(--crm-border); background:transparent; color:var(--crm-txt);
  padding:6px; border-radius:10px; cursor:pointer;
}
#crm-open-sidenav .crm-nav{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
#crm-open-sidenav .crm-sidenav__bottom{ margin-top:auto; padding-top:8px; border-top:1px solid rgba(0,0,0,.06); }

#crm-open-sidenav .crm-link{
  display:flex; align-items:center; gap:10px; padding:10px; margin:4px 0; color:var(--crm-txt);
  text-decoration:none; border-radius:10px; border:1px solid transparent;
}
#crm-open-sidenav .crm-link:hover{ background:var(--crm-bg-hover); border-color:var(--crm-border); }
#crm-open-sidenav .crm-link.is-active{
  background:linear-gradient(90deg, rgba(14,165,233,.18), rgba(238,54,212,.14));
  border-color:rgba(14,165,233,.35); color:#fff;
}
#crm-open-sidenav .crm-link--logout{ color:#7f1d1d; }
#crm-open-sidenav .crm-link--logout:hover{ background:#fee2e2; color:#991b1b; }
#crm-open-sidenav .crm-ico{ width:18px; height:18px; display:grid; place-items:center; color:var(--crm-accent); }
#crm-open-sidenav .crm-link.is-active .crm-ico{ color:var(--crm-active); }

/* FAB */
#crm-open-sidenav .crm-fab{
  position:fixed; left:20px; bottom:20px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#000; color:#fff; border:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:1102; cursor:pointer;
}
#crm-open-sidenav .crm-fab svg{ width:24px; height:24px; fill:currentColor; padding:0 7px 0 0; }

/* Drawer móvil */
@media (max-width:980px){
  #crm-open-sidenav .crm-sidenav{
    position:fixed; left:14px; right:14px; top:14px; width:auto; min-height:auto; border-radius:14px;
    transform:translateY(-120%); transition:transform .25s ease; z-index:1101;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
  }
  #crm-open-sidenav .crm-sidenav.is-open{ transform:translateY(0); }
  #crm-open-sidenav .crm-sidenav__toggle{ display:none; }
}
@media (min-width:981px){ #crm-open-sidenav .crm-fab{ display:none; } }

/* ============================================================
   CRM LOGIN
   ============================================================ */
#crm-login{
  display:grid; justify-content:center; padding:40px; height:100vh;
  background:linear-gradient(135deg,#0f172a 0%,#111827 60%,#0ea5e9 100%);
}
#crm-login .crm-login-card{
  width:100%; max-width:420px; background:#0b1220; color:#e5e7eb;
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:40px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
#crm-login .crm-login-brand{ display:grid; place-items:center; margin-bottom:14px; }
#crm-login .crm-login-brand img{ max-height:48px; }
#crm-login h1{ margin:2px 0 8px; font-size:22px; font-weight:700; color:#fff; text-align:center; }
#crm-login .muted{ color:#94a3b8; margin-bottom:14px; }
#crm-login .f-field{ margin:10px 0 12px; }
#crm-login .f-field label{ display:block; font-size:13px; color:#cbd5e1; margin-bottom:6px; }
#crm-login .f-field input{
  width:100%; background:#0f172a; color:#e5e7eb; border:1px solid #1e293b; border-radius:10px;
  padding:12px; line-height:1.25; outline:none;
}
#crm-login .f-field input:focus{ border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.15); }
#crm-login .f-row{ display:flex; gap:10px; align-items:center; }
#crm-login .between{ justify-content:space-between; }
#crm-login .chk{ display:flex; align-items:center; gap:8px; font-size:13px; color:#cbd5e1; }
#crm-login .link{ color:#8EC8F8; text-decoration:none; font-size:13px; }
#crm-login .link:hover{ text-decoration:underline; }
#crm-login .btn{
  width:100%; margin-top:12px; border:1px solid transparent; border-radius:10px; padding:12px 14px; font-weight:700; cursor:pointer;
}
#crm-login .btn-primary{ background:linear-gradient(90deg,#0ea5e9,#ee36d4); color:#fff; }
#crm-login .btn-primary:hover{ background:transparent; border-color:#0ea5e9; color:#0ea5e9; }
#crm-login .msg{ min-height:20px; margin-top:10px; font-size:13px; }
#crm-login .msg.error{ color:#fca5a5; }
#crm-login .msg.success{ color:#86efac; }
#crm-login .is-hidden{ display:none !important; }
#crm-login hr{ opacity:.35; }

@media (max-width:420px){
  #crm-login .crm-login-card{ padding:40px 20px; }
}

/* ============================================================
   CRM USUARIOS (desktop base)
   ============================================================ */
#crm-usuarios.crm-users-wrap{ font-size:14px; color:#1f2937; }

/* Toolbar */
#crm-usuarios .cu-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
#crm-usuarios .cu-filtros{ display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
#crm-usuarios .cu-actions{ display:flex; justify-content:flex-end; gap:8px; align-items:center; }

/* Campos */
#crm-usuarios .cu-field{ display:flex; flex-direction:column; gap:4px; }
#crm-usuarios .cu-field label{ font-size:12px; color:#000; }
#crm-usuarios .cu-input, #crm-usuarios .cu-select{
  border:1px solid #8EC8F8; border-radius:10px; padding:8px 10px; min-height:36px; background:#fff; color:#111827;
}
#crm-usuarios .cu-input:focus, #crm-usuarios .cu-select:focus{
  outline:none; border-color:#8EC8F8; box-shadow:0 0 0 3px rgba(142,200,248,.25);
}

/* Botones */
#crm-usuarios .cu-btn{
  border:1px solid #d1d5db; border-radius:10px; padding:8px 12px; background:#8EC8F8; cursor:pointer; color:#fff; font-weight:700;
}
#crm-usuarios .cu-btn:hover{ border-color:#8EC8F8; color:#8EC8F8; background:transparent; }
#crm-usuarios .cu-btn.primary{ background:#111827; color:#fff; border-color:#111827; }
#crm-usuarios .cu-btn.primary:hover{ background:transparent; color:#111827; }
#crm-usuarios .cu-btn.red{ background:#ef4444; color:#fff; border-color:#dc2626; }
#crm-usuarios .cu-btn.red:hover{ background:transparent; color:#dc2626; }
#crm-usuarios .cu-btn-outline{ background:transparent; border:1px solid #cbd5e1; border-radius:10px; padding:6px 10px; cursor:pointer; }

/* Tabla */
#crm-usuarios .cu-table-wrap{ width:100%; overflow:auto; }
#crm-usuarios .cu-table{
  width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:table;
}
#crm-usuarios .cu-table thead th{
  padding:10px 12px; border-bottom:1px solid #f3f4f6; background:#8EC8F8; color:#000;
  font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; cursor:pointer;
}
#crm-usuarios .cu-table td{
  padding:10px 12px; border-bottom:1px solid #f3f4f6; vertical-align:top; background:#fff; color:#000;
}
#crm-usuarios .cu-table tr:hover td{ background:#fff; }
#crm-usuarios .cu-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* Utilidades */
#crm-usuarios .right{ text-align:right; }
#crm-usuarios .nowrap{ white-space:nowrap; }
#crm-usuarios .muted{ color:#6b7280; }

/* Paginación */
#crm-usuarios .cu-pagination{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
#crm-usuarios .cu-pager{ display:flex; gap:6px; align-items:center; }
#crm-usuarios .cu-pager .cu-btn,
#crm-usuarios .cu-pager .cu-select{
  color:#000; background:#fff; font-weight:400; border:1px solid #d1d5db;
}

/* Cards móvil (oculto en desktop) */
#crm-usuarios .cu-cards{ display:none; }

/* ============================================================
   CRM USUARIOS — Responsive (≤900px)
   ============================================================ */
@media (max-width:900px){
  #crm-usuarios .cu-toolbar{ grid-template-columns:1fr; gap:10px; }
  #crm-usuarios .cu-filtros{ display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
  #crm-usuarios .cu-field, #crm-usuarios .cu-input, #crm-usuarios .cu-select{ width:100%; }
  #crm-usuarios .cu-actions{ justify-content:stretch; flex-wrap:wrap; gap:8px; }
  #crm-usuarios .cu-actions .cu-btn{ width:100%; }

  #crm-usuarios .cu-table{ display:none; }
  #crm-usuarios .cu-cards{ display:block; }

  #crm-usuarios .cu-card{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.06); padding:12px; margin-bottom:12px;
  }
  #crm-usuarios .cu-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  #crm-usuarios .cu-item small{ display:block; font-size:12px; color:#6b7280; margin-bottom:4px; line-height:1.1; }
  #crm-usuarios .cu-item .val{ display:block; }
  #crm-usuarios .cu-card-actions{
    margin-top:10px; padding-top:10px; border-top:1px dashed #e5e7eb; display:flex; gap:8px; flex-wrap:wrap;
  }
  #crm-usuarios .cu-card-actions .cu-btn{ flex:1 1 calc(50% - 8px); text-align:center; padding:8px 10px; }

  #crm-usuarios .cu-pagination{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin-top:12px;
  }
  #crm-usuarios .cu-pagination > *{ flex:1 1 100%; text-align:center; }
  #crm-usuarios .cu-pager{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
  #crm-usuarios .cu-pager .cu-btn{ min-width:110px; }

  #crm-usuarios .cu-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  #crm-usuarios .cu-card-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CRM DASHBOARD
   ============================================================ */
#crm-dashboard.crm-dash-wrap{ font-size:14px; color:#1f2937; }

/* Hero */
#crm-dashboard .cd-hero{
  display:grid; grid-template-columns:2fr 1.2fr; gap:14px; align-items:stretch; margin-bottom:14px; padding:18px;
  border-radius:16px; background:linear-gradient(135deg,#0f172a 0%,#111827 60%,#0ea5e9 100%);
  color:#e5e7eb; box-shadow:0 18px 50px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06);
}
#crm-dashboard .cd-hello{ font-size:14px; color:#93c5fd; letter-spacing:.02em; margin-bottom:4px; }
#crm-dashboard .cd-hero-title{ margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; }
#crm-dashboard .cd-hero-sub{ margin:0 0 10px; color:#cbd5e1; line-height:1.4; }
#crm-dashboard .cd-hero-tags{ display:flex; gap:8px; flex-wrap:wrap; }
#crm-dashboard .chip{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px;
  background:rgba(255,255,255,.12); color:#e5e7eb; border:1px solid rgba(255,255,255,.16);
}
#crm-dashboard .cd-hero-right{ display:flex; flex-direction:column; gap:10px; justify-content:space-between; }
#crm-dashboard .cd-hero-bullets{ margin:0; padding-left:18px; color:#e5e7eb; }
#crm-dashboard .cd-hero-cta{ align-self:flex-start; }

@media (max-width:980px){
  #crm-dashboard .cd-hero{ grid-template-columns:1fr; }
  #crm-dashboard .cd-hero-cta{ width:100%; text-align:center; }
}

/* Toolbar / campos / botones */
#crm-dashboard .cd-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
#crm-dashboard .cd-filtros{ display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
#crm-dashboard .cd-actions{ display:flex; justify-content:flex-end; gap:8px; align-items:center; }
#crm-dashboard .cd-field{ display:flex; flex-direction:column; gap:4px; }
#crm-dashboard .cd-field label{ font-size:12px; color:#000; }
#crm-dashboard .cd-input, #crm-dashboard .cd-select{ border:1px solid #8EC8F8; border-radius:10px; padding:8px 10px; min-height:36px; background:#fff; color:#111827; }
#crm-dashboard .cd-btn{ border:1px solid #d1d5db; border-radius:10px; padding:8px 12px; background:#8EC8F8; cursor:pointer; color:#fff; font-weight:700; }
#crm-dashboard .cd-btn:hover{ background:transparent; color:#8EC8F8; border-color:#8EC8F8; }
#crm-dashboard .cd-btn.primary{ background:#111827; border-color:#111827; }
#crm-dashboard .cd-btn.primary:hover{ background:transparent; color:#111827; }

/* KPI / charts / lists */
#crm-dashboard .cd-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
#crm-dashboard .cd-kpi{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
#crm-dashboard .cd-kpi-label{ font-size:12px; color:#6b7280; }
#crm-dashboard .cd-kpi-value{ font-size:22px; font-weight:800; margin-top:2px; }
#crm-dashboard .cd-kpi-sub{ font-size:12px; color:#9ca3af; }

#crm-dashboard .cd-charts{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-bottom:12px; }
#crm-dashboard .cd-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
#crm-dashboard .cd-card-title{ font-weight:700; margin-bottom:6px; }

#crm-dashboard .cd-lists{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#crm-dashboard .cd-list .cd-item{
  display:block; padding:10px 8px; border-bottom:1px solid #f3f4f6; text-decoration:none; color:#111827;
}
#crm-dashboard .cd-list .cd-item:hover{ background:#fafafa; }
#crm-dashboard .muted{ color:#6b7280; }

/* Responsive dashboard */
@media (max-width:900px){
  #crm-dashboard .cd-toolbar{ grid-template-columns:1fr; gap:10px; }
  #crm-dashboard .cd-filtros{ display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
  #crm-dashboard .cd-actions{ justify-content:stretch; flex-wrap:wrap; gap:8px; }
  #crm-dashboard .cd-actions .cd-btn{ width:100%; }
  #crm-dashboard .cd-kpis{ grid-template-columns:1fr 1fr; }
  #crm-dashboard .cd-charts{ grid-template-columns:1fr; }
  #crm-dashboard .cd-lists{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  #crm-dashboard .cd-kpis{ grid-template-columns:1fr; }
}

/* ============================================================
   CRM PROSPECTOS (desktop base)
   ============================================================ */
#crm-prospectos.crm-prosp-wrap{
  font-size:14px;
  color:#1f2937;
}

/* Toolbar */
#crm-prospectos .cp-toolbar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}
#crm-prospectos .cp-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:end;
}
#crm-prospectos .cp-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}

/* Campos */
#crm-prospectos .cp-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#crm-prospectos .cp-field label{
  font-size:12px;
  color:#000;
}
#crm-prospectos .cp-input,
#crm-prospectos .cp-select{
  border:1px solid #8EC8F8;
  border-radius:10px;
  padding:8px 10px;
  min-height:36px;
  background:#fff;
  color:#111827;
}
#crm-prospectos .cp-input:focus,
#crm-prospectos .cp-select:focus{
  outline:none;
  border-color:#8EC8F8;
  box-shadow:0 0 0 3px rgba(142,200,248,.25);
}

/* Botones */
#crm-prospectos .cp-btn{
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:8px 12px;
  background:#8EC8F8;
  cursor:pointer;
  color:#fff;
  font-weight:700;
}
#crm-prospectos .cp-btn:hover{
  background:transparent;
  color:#8EC8F8;
  border-color:#8EC8F8;
}
#crm-prospectos .cp-btn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
#crm-prospectos .cp-btn.primary:hover{
  background:transparent;
  color:#111827;
}
#crm-prospectos .cp-btn-outline{
  background:#fff;
  color:#111827;
  border-color:#d1d5db;
}
#crm-prospectos .cp-btn-outline:hover{
  border-color:#8EC8F8;
  color:#8EC8F8;
}
#crm-prospectos .cp-btn-mini{
  padding:4px 8px;
  font-size:12px;
}

/* Tabla */
#crm-prospectos .cp-table-wrap{
  width:100%;
  overflow:auto;
}
#crm-prospectos .cp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  display:table;
}
#crm-prospectos .cp-table thead th{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  background:#8EC8F8;
  color:#000;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
#crm-prospectos .cp-table td{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  vertical-align:top;
  background:#fff;
  color:#000;
}
#crm-prospectos .cp-table tr:hover td{
  background:#fff;
}

/* Badges estatus */
#crm-prospectos .cp-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#eef2ff;
  color:#3730a3;
}

/* Utilidades */
#crm-prospectos .right{ text-align:right; }
#crm-prospectos .nowrap{ white-space:nowrap; }
#crm-prospectos .muted{ color:#6b7280; }

/* Paginación */
#crm-prospectos .cp-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}
#crm-prospectos .cp-count{
  font-size:13px;
  color:#6b7280;
}
#crm-prospectos .cp-pager{
  display:flex;
  gap:6px;
  align-items:center;
}
#crm-prospectos .cp-pager .cp-btn,
#crm-prospectos .cp-pager .cp-select{
  color:#000;
  background:#fff;
  font-weight:400;
  border:1px solid #d1d5db;
}

/* Cards móvil (ocultas en desktop) */
#crm-prospectos .cp-cards{
  display:none;
}

/* ============================================================
   CRM PROSPECTOS — Responsive (≤900px)
   ============================================================ */
@media (max-width:900px){
  #crm-prospectos .cp-toolbar{
    grid-template-columns:1fr;
    gap:10px;
  }
  #crm-prospectos .cp-filtros{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }
  #crm-prospectos .cp-field,
  #crm-prospectos .cp-input,
  #crm-prospectos .cp-select{
    width:100%;
  }
  #crm-prospectos .cp-actions{
    justify-content:stretch;
    flex-wrap:wrap;
    gap:8px;
  }
  #crm-prospectos .cp-actions .cp-btn{
    width:100%;
  }

  /* Tabla OFF, cards ON */
  #crm-prospectos .cp-table{
    display:none;
  }
  #crm-prospectos .cp-cards{
    display:block;
  }

  #crm-prospectos .cp-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    padding:12px;
    margin-bottom:12px;
  }
  #crm-prospectos .cp-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:6px;
  }
  #crm-prospectos .cp-card-header small{
    display:block;
    font-size:11px;
    color:#6b7280;
  }
  #crm-prospectos .cp-card-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;
  }
  #crm-prospectos .cp-item small{
    display:block;
    font-size:12px;
    color:#6b7280;
    margin-bottom:4px;
    line-height:1.1;
  }
  #crm-prospectos .cp-item .val{
    display:block;
  }

  #crm-prospectos .cp-card-actions{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed #e5e7eb;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  #crm-prospectos .cp-card-actions .cp-btn{
    flex:1 1 calc(50% - 8px);
    text-align:center;
    padding:8px 10px;
  }

  #crm-prospectos .cp-pagination{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:center;
    margin-top:12px;
  }
  #crm-prospectos .cp-pagination > *{
    flex:1 1 100%;
    text-align:center;
  }
  #crm-prospectos .cp-pager{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
  }
  #crm-prospectos .cp-pager .cp-btn{
    min-width:110px;
  }
}

/* Extra para pantallas muy pequeñas */
@media (max-width:480px){
  #crm-prospectos .cp-card-grid{
    grid-template-columns:1fr;
  }
}

/* Panel formulario prospectos */
#crm-prospectos .cp-form-panel{
  margin-top:16px;
}
#crm-prospectos .cp-form-panel.cp-hidden{
  display:none;
}
#crm-prospectos .cp-form-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
#crm-prospectos .cp-form-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
#crm-prospectos .cp-form-header h3{
  margin:0;
}
#crm-prospectos .cp-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
#crm-prospectos .cp-field-full{
  grid-column:1 / -1;
}
#crm-prospectos .cp-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
#crm-prospectos .cp-form-msg{
  font-size:13px;
  min-height:18px;
}
#crm-prospectos .cp-form-msg-error{
  color:#b91c1c;
}
#crm-prospectos .cp-form-msg-success{
  color:#15803d;
}
#crm-prospectos .cp-form-buttons{
  display:flex;
  gap:8px;
}

/* Responsive formulario */
@media (max-width:900px){
  #crm-prospectos .cp-form-grid{
    grid-template-columns:1fr;
  }
  #crm-prospectos .cp-form-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  #crm-prospectos .cp-form-buttons{
    width:100%;
    justify-content:flex-end;
  }
}

/* Utilidad genérica ocultar */
#crm-prospectos .cp-hidden{
  display:none !important;
}

/* Panel formulario prospectos */
#crm-prospectos .cp-form-panel{
  margin-top:16px;
}
#crm-prospectos .cp-form-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
#crm-prospectos .cp-form-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
#crm-prospectos .cp-form-header h3{
  margin:0;
}
#crm-prospectos .cp-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
#crm-prospectos .cp-field-full{
  grid-column:1 / -1;
}
#crm-prospectos .cp-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
#crm-prospectos .cp-form-msg{
  font-size:13px;
  min-height:18px;
}
#crm-prospectos .cp-form-msg-error{
  color:#b91c1c;
}
#crm-prospectos .cp-form-msg-success{
  color:#15803d;
}
#crm-prospectos .cp-form-buttons{
  display:flex;
  gap:8px;
}

/* Historial de acciones */
#crm-prospectos .cp-acciones-wrap{
  margin-top:20px;
  border-top:1px dashed #e5e7eb;
  padding-top:12px;
}
#crm-prospectos .cp-acciones-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
#crm-prospectos .cp-acciones-header h4{
  margin:0;
  font-size:16px;
}
#crm-prospectos .cp-acciones-empty{
  font-size:13px;
  color:#6b7280;
  margin:6px 0;
}
#crm-prospectos .cp-acciones-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
#crm-prospectos .cp-accion-card{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  background:#f9fafb;
}
#crm-prospectos .cp-accion-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
#crm-prospectos .cp-accion-main{
  flex:1;
}
#crm-prospectos .cp-accion-title{
  font-weight:600;
  margin-bottom:2px;
}
#crm-prospectos .cp-accion-meta{
  font-size:12px;
  color:#6b7280;
}
#crm-prospectos .cp-accion-badges{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}
#crm-prospectos .cp-accion-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
#crm-prospectos .cp-accion-badge-pendiente{
  background:#fef9c3;
  color:#92400e;
}
#crm-prospectos .cp-accion-badge-completada{
  background:#dcfce7;
  color:#166534;
}
#crm-prospectos .cp-accion-badge-cancelada{
  background:#fee2e2;
  color:#991b1b;
}
#crm-prospectos .cp-accion-badge-vencida{
  background:#fee2e2;
  color:#b91c1c;
}
#crm-prospectos .cp-accion-vencida{
  border-color:#fca5a5;
  background:#fef2f2;
}
#crm-prospectos .cp-accion-footer{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Form mini para acción */
#crm-prospectos .cp-accion-form{
  margin-top:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  background:#ffffff;
}
#crm-prospectos .cp-accion-grid{
  grid-template-columns:1fr 1fr;
}
#crm-prospectos .cp-accion-actions{
  margin-top:4px;
}

/* Responsive formulario y acciones */
@media (max-width:900px){
  #crm-prospectos .cp-form-grid{
    grid-template-columns:1fr;
  }
  #crm-prospectos .cp-form-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  #crm-prospectos .cp-form-buttons{
    width:100%;
    justify-content:flex-end;
  }
  #crm-prospectos .cp-accion-row{
    flex-direction:column;
    align-items:flex-start;
  }
  #crm-prospectos .cp-accion-badges{
    flex-direction:row;
    align-items:center;
  }
  #crm-prospectos .cp-accion-grid{
    grid-template-columns:1fr;
  }
}

/* Celda de última acción (tabla y cards) */
#crm-prospectos .cp-ultima-cell{
  font-size:13px;
}
#crm-prospectos .cp-ultima-cell strong{
  font-weight:600;
}

/* Cuando la última acción está vencida (no completada y fecha < hoy) */
#crm-prospectos .cp-ultima-vencida{
  color:#b91c1c;
}
#crm-prospectos .cp-ultima-vencida .muted{
  color:#b91c1c;
  opacity:.85;
}

/* ============================================================
   CRM CLIENTES (desktop base)
   ============================================================ */
#crm-clientes.crm-clients-wrap{
  font-size:14px;
  color:#1f2937;
}

/* ===== Evitar overflow lateral sí o sí ===== */
#crm-clientes,
#crm-clientes *{ box-sizing:border-box; }

/* Toolbar */
#crm-clientes .cc-toolbar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:10px;
}
#crm-clientes .cc-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:end;
}
#crm-clientes .cc-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}

/* Fields */
#crm-clientes .cc-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0; /* clave en grids */
}
#crm-clientes .cc-field label{
  font-size:12px;
  color:#000;
}
#crm-clientes .cc-input,
#crm-clientes .cc-select{
  border:1px solid #8EC8F8;
  border-radius:10px;
  padding:8px 10px;
  min-height:36px;
  background:#fff;
  color:#111827;
  width:100%;
  max-width:100%;
  min-width:0; /* clave anti-overflow */
}
#crm-clientes .cc-input:focus,
#crm-clientes .cc-select:focus{
  outline:none;
  border-color:#8EC8F8;
  box-shadow:0 0 0 3px rgba(142,200,248,.25);
}

/* Buttons */
#crm-clientes .cc-btn{
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:8px 12px;
  background:#8EC8F8;
  cursor:pointer;
  color:#fff;
  font-weight:700;
}
#crm-clientes .cc-btn:hover{
  background:transparent;
  color:#8EC8F8;
  border-color:#8EC8F8;
}
#crm-clientes .cc-btn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
#crm-clientes .cc-btn.primary:hover{
  background:transparent;
  color:#111827;
}
#crm-clientes .cc-btn-outline{
  background:#fff;
  color:#111827;
  border-color:#d1d5db;
}
#crm-clientes .cc-btn-outline:hover{
  border-color:#8EC8F8;
  color:#8EC8F8;
}
#crm-clientes .cc-btn-mini{
  padding:4px 8px;
  font-size:12px;
}

/* ============================================================
   Table (desktop)
   ============================================================ */
#crm-clientes .cc-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:hidden; /* evita scroll lateral por el inline form */
}
#crm-clientes .cc-table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  table-layout:fixed; /* clave: no se estira por contenido */
}
#crm-clientes .cc-table thead th{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  background:#8EC8F8;
  color:#000;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
#crm-clientes .cc-table td{
  padding:10px 12px;
  border-bottom:1px solid #f3f4f6;
  vertical-align:top;
  background:#fff;
  color:#000;
  word-break:break-word;
}
#crm-clientes .cc-table tr:hover td{ background:#fff; }

#crm-clientes .right{ text-align:right; }
#crm-clientes .nowrap{ white-space:nowrap; }
#crm-clientes .muted{ color:#6b7280; }
#crm-clientes .cc-row-actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }

/* ============================================================
   INLINE FORM dentro de la tabla (fila insertada)
   ============================================================ */
#crm-clientes .cc-inline-form-row td{
  padding:0;
  background:#fff;
  border-bottom:1px solid #f3f4f6;
}
#crm-clientes .cc-inline-form-host{
  padding:12px;
  max-width:100%;
}

#crm-clientes .cc-form-card--inline{
  width:100%;
  max-width:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

#crm-clientes .cc-form-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
#crm-clientes .cc-form-header h3{ margin:0; font-size:16px; }
#crm-clientes .cc-form-header-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ============================================================
   TITULOS DE SECCION (tu template usa cc-subtitle)
   ============================================================ */
#crm-clientes .cc-subtitle{
  margin:14px 0 8px;
  font-weight:900;
  color:#111827;
  border-left:4px solid #8EC8F8;
  padding:8px 10px;
  background:#f8fafc;
  border-radius:10px;
}

/* Área vacía (columna vacía en PM) */
#crm-clientes .cc-empty-box{
  width:100%;
  height:36px;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  background:#fafafa;
}

/* ============================================================
   ✅ GRIDS: soporte para cc-form-grid--X (TU HTML) + cc-grid-X (legacy)
   ============================================================ */
#crm-clientes .cc-form-grid,
#crm-clientes .cc-grid{
  display:grid;
  gap:10px;
  margin-top:10px;
  width:100%;
  max-width:100%;
}

/* 1 columna */
#crm-clientes .cc-form-grid--1,
#crm-clientes .cc-grid-1{
  grid-template-columns:minmax(0,1fr);
}

/* 2 columnas */
#crm-clientes .cc-form-grid--2,
#crm-clientes .cc-grid-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* 3 columnas */
#crm-clientes .cc-form-grid--3,
#crm-clientes .cc-grid-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

/* 4 columnas */
#crm-clientes .cc-form-grid--4,
#crm-clientes .cc-grid-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

/* Colspan helpers */
#crm-clientes .cc-colspan-2{ grid-column:span 2; }

/* Textarea */
#crm-clientes textarea.cc-input{
  width:100%;
  max-width:100%;
  min-width:0;
  resize:vertical;
  min-height:84px;
}

/* Bloques PF/PM */
#crm-clientes .cc-block{ margin-top:8px; }
#crm-clientes .cc-block[hidden]{ display:none !important; }

/* ============================================================
   Acciones del form
   ============================================================ */
#crm-clientes .cc-form-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
#crm-clientes .cc-form-buttons{ display:flex; gap:8px; flex-wrap:wrap; }

/* ============================================================
   Pagination
   ============================================================ */
#crm-clientes .cc-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}
#crm-clientes .cc-count{ font-size:13px; color:#6b7280; }
#crm-clientes .cc-pager{
  display:flex;
  gap:6px;
  align-items:center;
}
#crm-clientes .cc-pager .cc-btn,
#crm-clientes .cc-pager .cc-select{
  color:#000;
  background:#fff;
  font-weight:400;
  border:1px solid #d1d5db;
}

/* ============================================================
   Cards móvil
   ============================================================ */
#crm-clientes .cc-cards{ display:none; }

#crm-clientes .cc-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:12px;
  margin-bottom:12px;
}
#crm-clientes .cc-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
}
#crm-clientes .cc-card-header small{
  display:block;
  font-size:11px;
  color:#6b7280;
}
#crm-clientes .cc-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#eef2ff;
  color:#3730a3;
}
#crm-clientes .cc-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
}
#crm-clientes .cc-item small{
  display:block;
  font-size:12px;
  color:#6b7280;
  margin-bottom:4px;
  line-height:1.1;
}
#crm-clientes .cc-item .val{ display:block; }

#crm-clientes .cc-card-actions{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #e5e7eb;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#crm-clientes .cc-card-actions .cc-btn{
  flex:1 1 calc(50% - 8px);
  text-align:center;
  padding:8px 10px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  #crm-clientes .cc-toolbar{ grid-template-columns:1fr; gap:10px; }
  #crm-clientes .cc-filtros{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }
  #crm-clientes .cc-actions{
    justify-content:stretch;
    flex-wrap:wrap;
    gap:8px;
  }
  #crm-clientes .cc-actions .cc-btn{ width:100%; }

  #crm-clientes .cc-table{ display:none; }
  #crm-clientes .cc-cards{ display:block; }

  #crm-clientes .cc-pagination{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:center;
    margin-top:12px;
  }
  #crm-clientes .cc-pagination > *{ flex:1 1 100%; text-align:center; }
  #crm-clientes .cc-pager{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }

  /* Inline form: 1 columna */
  #crm-clientes .cc-form-grid--2,
  #crm-clientes .cc-form-grid--3,
  #crm-clientes .cc-form-grid--4,
  #crm-clientes .cc-grid-2,
  #crm-clientes .cc-grid-3,
  #crm-clientes .cc-grid-4{
    grid-template-columns:minmax(0,1fr);
  }
  #crm-clientes .cc-colspan-2{ grid-column:auto; }
}

@media (max-width:480px){
  #crm-clientes .cc-card-grid{ grid-template-columns:1fr; }
}

/* Campo inválido (validación custom) */
.cc-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.20) !important;
}