/*  ═══════════════════════════════════════════════════════════
    CT-BUTTONS — Sistema unificado de botones Cootranstame
    Paleta: Navy #0D2750 → #1e4d8c | Accent #f0f0f3
    Neumorphism + pill design
    ═══════════════════════════════════════════════════════════ */

/* ── Dashboard Background ── */
.content-wrapper { background-color: #f0f2f5 !important; }

/* ── Variables ── */
:root {
 --ct-navy: #0D2750;
 --ct-navy-mid: #1e4d8c;
 --ct-navy-dark: #0a1c38;
 --ct-surface: #f0f0f3;
 --ct-text: #2d3748;
 --ct-muted: #5a7099;
 --ct-radius-pill: 2rem;
 --ct-radius-lg: 1rem;
 --ct-radius-md: .75rem;
 --ct-shadow-neu:  4px 4px 12px rgba(13,39,80,.18), -3px -3px 8px rgba(255,255,255,.7);
 --ct-shadow-neu-hover: 6px 6px 16px rgba(13,39,80,.26), -4px -4px 12px rgba(255,255,255,.8);
 --ct-shadow-inset: inset 3px 3px 6px rgba(13,39,80,.10), inset -3px -3px 6px rgba(255,255,255,.8);
 --ct-gradient: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-mid));
 --ct-gradient-hover: linear-gradient(135deg, var(--ct-navy-dark), var(--ct-navy));
}

/* ─────────────────────────────────────────────
   1. BOTÓN PRIMARIO  (llamada a acción, pill)
   ───────────────────────────────────────────── */
.ct-btn {
 display: inline-flex; align-items: center; gap: .45rem;
 padding: .55rem 1.35rem; font-size: .82rem; font-weight: 700;
 color: #fff; background: var(--ct-gradient);
 border: none; border-radius: var(--ct-radius-pill);
 text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
 transition: all .3s ease; cursor: pointer;
 box-shadow: var(--ct-shadow-neu);
 line-height: 1.4;
}
.ct-btn:hover, .ct-btn:focus {
 color: #fff; background: var(--ct-gradient-hover);
 transform: translateY(-2px); text-decoration: none;
 box-shadow: var(--ct-shadow-neu-hover);
}
.ct-btn:active { transform: translateY(0) scale(.97); }
.ct-btn i { font-size: .78rem; }

/* ─────────────────────────────────────────────
   2. BOTÓN SECUNDARIO / OUTLINE (pill ghost)
   ───────────────────────────────────────────── */
.ct-btn-secondary {
 display: inline-flex; align-items: center; gap: .45rem;
 padding: .5rem 1.2rem; font-size: .8rem; font-weight: 700;
 color: var(--ct-navy); background: var(--ct-surface);
 border: none; border-radius: var(--ct-radius-pill);
 text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
 transition: all .3s ease; cursor: pointer;
 box-shadow: var(--ct-shadow-neu);
 line-height: 1.4;
}
.ct-btn-secondary:hover, .ct-btn-secondary:focus {
 color: #fff; background: var(--ct-gradient);
 transform: translateY(-2px); text-decoration: none;
 box-shadow: var(--ct-shadow-neu-hover);
}
.ct-btn-secondary:active { transform: translateY(0) scale(.97); }
.ct-btn-secondary i { font-size: .72rem; transition: transform .25s; }

/* ─────────────────────────────────────────────
   3. BOTÓN ICONO CIRCULAR (Drive, datos, etc)
   ───────────────────────────────────────────── */
.ct-btn-icon {
 display: inline-flex; align-items: center; justify-content: center;
 width: 40px; height: 40px; border-radius: 50%;
 background: var(--ct-surface); color: var(--ct-navy);
 font-size: 16px; text-decoration: none;
 border: none; cursor: pointer;
 transition: all .3s ease;
 box-shadow: var(--ct-shadow-inset);
}
.ct-btn-icon:hover {
 color: var(--ct-navy-mid); transform: scale(1.12);
 box-shadow: 3px 3px 8px rgba(13,39,80,.15), -3px -3px 8px rgba(255,255,255,.9);
 text-decoration: none;
}

/* ─────────────────────────────────────────────
   4. BOTÓN VOLVER (pill con flecha)
   ───────────────────────────────────────────── */
.ct-btn-back {
 display: inline-flex; align-items: center; gap: .45rem;
 padding: .55rem 1.25rem; font-size: .8rem; font-weight: 700;
 color: var(--ct-navy); background: var(--ct-surface);
 border: none; border-radius: var(--ct-radius-pill);
 text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
 transition: all .3s ease; cursor: pointer;
 box-shadow: var(--ct-shadow-neu);
}
.ct-btn-back:hover {
 color: #fff; background: var(--ct-gradient);
 transform: translateY(-2px); text-decoration: none;
 box-shadow: var(--ct-shadow-neu-hover);
}
.ct-btn-back i { font-size: .7rem; transition: transform .25s; }
.ct-btn-back:hover i { transform: translateX(-3px); }

/* ─────────────────────────────────────────────
   5. BOTÓN BANNER (glassmorphism, para fondos oscuros)
   ───────────────────────────────────────────── */
.ct-btn-banner {
 display: inline-flex; align-items: center; gap: .5rem;
 padding: .55rem 1.25rem; font-size: .82rem; font-weight: 700;
 color: #fff; background: rgba(255,255,255,.15);
 backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(255,255,255,.2); border-radius: var(--ct-radius-pill);
 text-decoration: none; text-transform: uppercase; letter-spacing: .06em;
 transition: all .3s ease; cursor: pointer;
}
.ct-btn-banner:hover {
 background: rgba(255,255,255,.28);
 border-color: rgba(255,255,255,.35);
 transform: translateY(-2px); text-decoration: none; color: #fff;
 box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.ct-btn-banner:active { transform: translateY(0) scale(.97); }
.ct-btn-banner i { font-size: .78rem; }

/* ─────────────────────────────────────────────
   6. BOTÓN DE TABLA/ACCIÓN (icono pequeño cuadrado)
   ───────────────────────────────────────────── */
.ct-act {
 display: inline-flex; align-items: center; justify-content: center;
 width: 34px; height: 34px; border-radius: .6rem;
 border: none; cursor: pointer;
 font-size: .88rem; transition: all .2s ease;
 padding: 0; text-decoration: none;
}
.ct-act:hover {
 transform: scale(1.15);
 text-decoration: none;
}
/* Color accents para acciones de tabla — fondos vivos */
.ct-act-view   { background: #e0ecff; color: #1e4d8c; }
.ct-act-view:hover   { background: #c7d9f7; color: #0D2750; box-shadow: 0 3px 10px rgba(30,77,140,.2); }
.ct-act-edit   { background: #fef3c7; color: #b45309; }
.ct-act-edit:hover   { background: #fde68a; color: #92400e; box-shadow: 0 3px 10px rgba(180,83,9,.2); }
.ct-act-delete { background: #fee2e2; color: #dc2626; }
.ct-act-delete:hover { background: #fecaca; color: #b91c1c; box-shadow: 0 3px 10px rgba(220,38,38,.2); }
.ct-act-success{ background: #dcfce7; color: #16a34a; }
.ct-act-success:hover{ background: #bbf7d0; color: #15803d; box-shadow: 0 3px 10px rgba(22,163,74,.2); }
.ct-act-info   { background: #dbeafe; color: #2563eb; }
.ct-act-info:hover   { background: #bfdbfe; color: #1d4ed8; box-shadow: 0 3px 10px rgba(37,99,235,.2); }
.ct-act-copy   { background: #ede9fe; color: #7c3aed; }
.ct-act-copy:hover   { background: #ddd6fe; color: #6d28d9; box-shadow: 0 3px 10px rgba(124,58,237,.2); }

/* ─────────────────────────────────────────────
   7. PILLS DE RECURSO (PDF, Form, Sheets, etc)
   ───────────────────────────────────────────── */
.ct-pill {
 display: inline-flex; align-items: center; gap: .35rem;
 padding: .3rem .75rem; font-size: .7rem; font-weight: 700;
 border-radius: var(--ct-radius-pill); text-decoration: none;
 text-transform: uppercase; letter-spacing: .04em;
 transition: all .2s ease; border: none; cursor: pointer;
}
.ct-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: translateY(-1px); text-decoration: none; }
.ct-pill i { font-size: .68rem; }

.ct-pill-pdf   { background: #fef2f2; color: #dc2626; }
.ct-pill-pdf:hover   { color: #dc2626; }
.ct-pill-form  { background: #fef3c7; color: #92400e; }
.ct-pill-form:hover  { color: #92400e; }
.ct-pill-sheets{ background: #dcfce7; color: #166534; }
.ct-pill-sheets:hover{ color: #166534; }
.ct-pill-link  { background: #e0ecff; color: var(--ct-navy-mid); }
.ct-pill-link:hover  { color: var(--ct-navy-mid); }
.ct-pill-off   { background: #f1f5f9; color: #94a3b8; }

/* ─────────────────────────────────────────────
   8. BOTONES DE MODAL (full-width footer)
   ───────────────────────────────────────────── */
.ct-btn-modal-primary {
 width: 100%; padding: .65rem 1rem; font-weight: 800; font-size: .72rem;
 text-transform: uppercase; letter-spacing: .12em; color: #fff;
 background: var(--ct-gradient); border: none; border-radius: var(--ct-radius-lg);
 cursor: pointer; transition: all .25s ease;
 display: flex; align-items: center; justify-content: center; gap: .4rem;
 box-shadow: 0 6px 20px rgba(13,39,80,.2);
}
.ct-btn-modal-primary:hover {
 background: var(--ct-gradient-hover);
 box-shadow: 0 8px 24px rgba(13,39,80,.3);
 transform: translateY(-1px);
}
.ct-btn-modal-primary:active { transform: translateY(0) scale(.98); }

.ct-btn-modal-cancel {
 width: 100%; padding: .65rem 1rem; font-weight: 800; font-size: .72rem;
 text-transform: uppercase; letter-spacing: .12em;
 color: var(--ct-muted); background: #fff;
 border: 1px solid #d0daea; border-radius: var(--ct-radius-lg);
 cursor: pointer; transition: all .2s ease;
 display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.ct-btn-modal-cancel:hover {
 background: #f8fafc; border-color: #b0bec5;
}

/* ─────────────────────────────────────────────
   9. BOTÓN LIMPIAR FILTROS
   ───────────────────────────────────────────── */
.ct-btn-clear {
 display: inline-flex; align-items: center; gap: .35rem;
 padding: .4rem .85rem; font-size: .75rem; font-weight: 700;
 color: #dc2626; background: #fee2e2;
 border: none; border-radius: var(--ct-radius-pill);
 cursor: pointer; transition: all .2s ease;
 text-transform: uppercase; letter-spacing: .04em;
}
.ct-btn-clear:hover {
 background: #fecaca; box-shadow: 0 2px 8px rgba(220,38,38,.15);
}

/* ─────────────────────────────────────────────
   10. GRUPO DE ACCIONES (contenedor flex)
   ───────────────────────────────────────────── */
.ct-actions {
 display: flex; align-items: center; gap: 10px;
 justify-content: center; flex-wrap: wrap;
 padding: 1rem 0;
}
.ct-actions-start { justify-content: flex-start; }
.ct-actions-end   { justify-content: flex-end; }

/* ─────────────────────────────────────────────
   11. CARD FOOTER BUTTON (para dashboards)
   ───────────────────────────────────────────── */
.ct-card-footer {
 display: flex; align-items: center; justify-content: space-between;
 padding: .75rem 1.35rem;
 background: #f8fafc; border-top: 1px solid #f1f5f9;
 font-size: .78rem; font-weight: 600; color: var(--ct-navy);
 text-decoration: none; cursor: pointer;
 transition: all .2s ease;
}
.ct-card-footer:hover {
 background: #edf2f9; color: var(--ct-navy-mid);
 text-decoration: none;
}
.ct-card-footer i { transition: transform .25s; }
.ct-card-footer:hover i { transform: translateX(3px); }

/* ─────────────────────────────────────────────
   12. CONFIRMACIÓN (dialog inline)
   ───────────────────────────────────────────── */
.ct-confirm-cancel {
 flex: 1; padding: .55rem .5rem; font-weight: 700; font-size: .72rem;
 text-transform: uppercase; letter-spacing: .05em;
 color: var(--ct-muted); background: #fff;
 border: 1px solid #d0daea; border-radius: var(--ct-radius-pill);
 cursor: pointer; transition: all .2s;
 text-align: center;
}
.ct-confirm-cancel:hover { background: #f3f6fb; border-color: #a8b8cc; }

.ct-confirm-action {
 flex: 1; padding: .55rem .5rem; font-weight: 700; font-size: .72rem;
 text-transform: uppercase; letter-spacing: .05em;
 color: #fff; background: var(--ct-gradient);
 border: none; border-radius: var(--ct-radius-pill);
 cursor: pointer; transition: all .2s;
 text-align: center;
}
.ct-confirm-action:hover {
 background: var(--ct-gradient-hover);
 box-shadow: 0 3px 12px rgba(13,39,80,.2);
}
/* Variante de color rojo para eliminar/inactivar */
.ct-confirm-action-danger {
 background: linear-gradient(135deg, #dc2626, #ef4444);
}
.ct-confirm-action-danger:hover {
 background: linear-gradient(135deg, #b91c1c, #dc2626);
 box-shadow: 0 3px 12px rgba(220,38,38,.2);
}

/* ─────────────────────────────────────────────
   13. BOTÓN XLS CIRCULAR (Google Sheets / Excel)
   Diseño unificado — neumorphism hundido (inset)
   ───────────────────────────────────────────── */
.ct-xls-circle {
 display: inline-flex; align-items: center; justify-content: center;
 width: 40px; height: 40px; border-radius: 50%;
 background: #e8e8eb; color: #16a34a;
 font-size: 18px;
 text-decoration: none; border: none; cursor: pointer;
 line-height: 1;
 transition: all .3s ease;
 box-shadow: inset 4px 4px 8px rgba(13,39,80,.15), inset -4px -4px 8px rgba(255,255,255,.85);
 flex-shrink: 0;
}
.ct-xls-circle:hover {
 color: #15803d;
 transform: scale(1.08);
 box-shadow: inset 5px 5px 10px rgba(13,39,80,.2), inset -5px -5px 10px rgba(255,255,255,.9);
 text-decoration: none;
}