/* ====== Portal Canal – estilo limpio, profesional y accesible ====== */
    :root{
      --bs-primary: #2f82c6;
      --bs-primary-rgb: 47, 130, 198;
      --primary:#2f82c6; --primary-600:#365C92; --primary-700:#274265;
      --ink:#1F2937; --muted:#6B7280; --bg:#F6F8FC; --card:#FFFFFF; --border:#E5E7EB; --accent:#6FA6E9;
      --radius-lg:.9rem; --radius-md:.65rem; --shadow:0 10px 30px rgba(2,18,44,.06);
      --container:1100px;

    }
    html{scroll-behavior:smooth}
    body{margin:0;font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;color:var(--ink);background:linear-gradient(180deg,#fff 0%, var(--bg) 100%)}
    img{max-width:100%;height:auto;display:block}
    .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
    a{color:var(--primary);text-decoration:none}
    a:hover{text-decoration:underline}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Header reducido */
    .portal-header{background:#fff;border-bottom:1px solid var(--border); padding-bottom: 8px; padding-top: 8px;}
    .portal-header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
    .portal-brand{display:flex;align-items:center;gap:.6rem}
    .portal-brand img{height:80px}
    .brand-by{color:var(--muted);font-size:.9rem}
    .lang{display:flex;align-items:center;gap:.75rem}
    .lang select{border:1px solid var(--border);border-radius:.5rem;padding:.5rem .7rem;appearance:none;background:#fff}

    /* Hero/intro tipo satélite */
    .intro{padding:2.2rem 0 1.2rem}
    .intro h1{margin:0 0 .5rem;font-size:clamp(1.5rem,3.2vw,2.1rem)}
    .intro .hl{color:var(--primary)}
    .intro p{margin:.25rem 0;color:var(--ink)}
    .intro p b{font-weight:700}

    /* Grid principal */
    .portal-main{padding:1rem 0 2rem}
    .portal-grid{display:grid;gap:1.2rem}
    @media (min-width:960px){.portal-grid{grid-template-columns:1.25fr .95fr;align-items:stretch}}

    /* Cards */
    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.25rem 1.3rem}
    .card h2{margin:.25rem 0 .35rem;font-size:1.35rem}
    .card p{margin:0 0 .5rem;color:var(--muted)}
    .card.emphasis{border:2px solid var(--accent)}
    .card .muted{color:var(--muted)}

    /* CTA y formularios */
    .actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;border-radius:.7rem;border:1px solid transparent;font-weight:700;cursor:pointer;transition:background .2s, box-shadow .2s, transform .08s}
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
    .btn-primary:hover{background:var(--primary-600)}
    .btn-ghost{background:#EEF3FF;border-color:#DBE6FF;color:var(--primary)}
    .btn-ghost:hover{background:#E5EEFF}

    .form{display:grid;gap:.8rem;margin-top:.5rem}
    label{font-weight:700}
    input[type=text], input[type=password]{width:100%;padding:.75rem .9rem;border:1px solid var(--border);border-radius:.7rem;background:#fff;transition:border .2s, box-shadow .2s}
    input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(111,166,233,.25)}

    .code-access{display:grid;grid-template-columns:1fr auto;gap:.6rem;margin-top:.6rem}
    @media (max-width:520px){.code-access{grid-template-columns:1fr}}

    /* Aviso */
    .note{background:#F8FBFF;border:1px solid #E2EEFF;border-radius:var(--radius-md);padding:1rem;color:#334155}
    .note strong{color:#0F172A}

    /* Footer legal */
    .portal-footer{background:#0E1420;color:#C9D2E3;padding:1.25rem 0;margin-top:2rem}
    .portal-footer .inner{display:grid;gap:.5rem;place-items:center;text-align:center}
    .legal-links{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}
    .legal-links a{color:#E7ECF7}
    .legal-links a:hover{color:#fff}
 


    .cc-denuncia{
      --cc-primary:#426DA9; --cc-primary-600:#35598F;
      --cc-accent:#6FA6E9; --cc-ink:#1F2937; --cc-muted:#6B7280;
      --cc-bg:#F6F8FC; --cc-card:#FFFFFF; --cc-border:#E5E7EB;
      --cc-shadow:0 10px 30px rgba(2,18,44,.06);
      --cc-container:1140px;
    }
    .cc-denuncia, .cc-denuncia * , .cc-denuncia *::before, .cc-denuncia *::after{ box-sizing:border-box }
    .cc-denuncia .container{ width:100%; max-width:var(--cc-container); margin-inline:auto; padding-inline:1rem }

    /* Página */
    .cc-denuncia main{ background:linear-gradient(180deg,#fff 0%, var(--cc-bg) 100%) }
    .cc-denuncia .page{ padding:1rem 0 2rem }
    .cc-denuncia .grid{ display:grid; gap:1.25rem }
    @media (min-width:1100px){ .cc-denuncia .grid{ grid-template-columns:380px 1fr } }

    /* Aside */
    .cc-denuncia .aside-card{ background:#fff; border:1px solid var(--cc-border); border-radius:.85rem; box-shadow:var(--cc-shadow); padding:1rem }
    .cc-denuncia .aside-card + .aside-card{ margin-top:1rem }
    .cc-denuncia .aside-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
    .cc-denuncia .aside-head h3{ margin:.25rem 0; font-size:1.05rem; color:var(--cc-ink) }
    .cc-denuncia .aside-sub{ margin:.4rem 0 .8rem; color:var(--cc-muted); font-size:.95rem }

    /* Documentos */
    .cc-denuncia .doc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
    .cc-denuncia .doc-item{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; border:1px solid var(--cc-border); border-radius:.6rem; padding:.6rem .75rem; background:#FCFDFE }
    .cc-denuncia .doc-ico{ width:28px; height:28px; display:grid; place-items:center; background:#EEF3FF; border:1px solid #DBE6FF; border-radius:.5rem; font-size:1rem }
    .cc-denuncia .doc-item a{ font-weight:700; color:var(--cc-primary); text-decoration:none }
    .cc-denuncia .doc-item a:hover{ text-decoration:underline }
    .cc-denuncia .doc-item .meta{ color:var(--cc-muted) }

    /* Acordeón legal mejorado */
    .cc-denuncia .legal-accordion details{ border:1px solid var(--cc-border); border-radius:.65rem; background:#F9FBFF; padding:.5rem .75rem }
    .cc-denuncia .legal-accordion details + details{ margin-top:.6rem }
    .cc-denuncia .legal-accordion summary{ list-style:none; cursor:pointer; font-weight:700; color:var(--cc-ink) }
    .cc-denuncia .legal-accordion[open]{ border-color:#DBE6FF }
    .cc-denuncia .legal-accordion .content{ color:#334155; margin-top:.4rem; font-size:.95rem }

    /* Card principal */
    .cc-denuncia .card{ background:#fff; border:1px solid var(--cc-border); border-radius:.95rem; box-shadow:var(--cc-shadow); overflow:hidden }
    .cc-denuncia .card-head{ background:var(--cc-primary); color:#fff; padding:1rem .9rem; border:1px solid --cc-primary; border-radius:.65rem  }
    .cc-denuncia .card-body{ padding:1rem .9rem }
    .cc-denuncia .req{ color:#DB2E2E }

    /* Campos */
    .cc-denuncia .field{ display:grid; gap:.45rem; margin:1rem 0; min-width:0 }
    .cc-denuncia .field.inline{ grid-template-columns:1fr 1fr; gap:.9rem; align-items:start }
    .cc-denuncia .field.inline > div{ min-width:0 }
    .cc-denuncia label{ font-weight:700; color:var(--cc-ink) }
    .cc-denuncia select,
    .cc-denuncia input[type=text], .cc-denuncia input[type=email],
    .cc-denuncia input[type=password], .cc-denuncia input[type=date],
    .cc-denuncia textarea{
      width:100%; max-width:100%; padding:.75rem .9rem; border:1px solid var(--cc-border);
      border-radius:.7rem; background:#fff; transition:border .2s, box-shadow .2s;
    }
    .cc-denuncia textarea{ min-height:180px; resize:vertical }
    .cc-denuncia select:focus,
    .cc-denuncia input:focus,
    .cc-denuncia textarea:focus{ outline:none; border-color:var(--cc-accent); box-shadow:0 0 0 3px rgba(111,166,233,.25) }

    /* Radios pill y acciones */
    .cc-denuncia .actions{ display:flex; gap:.6rem; flex-wrap:wrap }
    .cc-denuncia .pill{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--cc-border); border-radius:999px; padding:.35rem .75rem; background:#fff }
    .cc-denuncia .pill input{ accent-color:var(--cc-primary) }
    .cc-denuncia .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1rem; border-radius:.7rem; border:1px solid transparent; font-weight:700; cursor:pointer }
    .cc-denuncia .btn-primary{ background:var(--cc-primary); color:#fff; box-shadow:var(--cc-shadow) }
    .cc-denuncia .btn-secondary{ background:#fff; border:1px solid var(--cc-border) }
    .cc-denuncia .form-actions{ display:flex; gap:.6rem; justify-content:flex-end; border-top:1px solid var(--cc-border); padding:1rem }

    /* Dropzone múltiple */
    .cc-denuncia .dropzone{
      background:#FCFDFE; border:2px dashed var(--cc-border); border-radius:.75rem; padding:1rem;
      display:grid; gap:.6rem; place-items:center; text-align:center; cursor:pointer;
      transition:border-color .2s, background .2s;
    }
    .cc-denuncia .dropzone.dragover{ border-color:var(--cc-accent); background:#F3F8FF }
    .cc-denuncia .dz-icon{ font-size:1.6rem }
    .cc-denuncia .dz-help{ color:var(--cc-muted); font-size:.95rem }
    .cc-denuncia .files-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; width:100% }
    .cc-denuncia .file-item{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid var(--cc-border); border-radius:.6rem; padding:.5rem .75rem; background:#fff }
    .cc-denuncia .file-item .meta{ color:var(--cc-muted); font-size:.92rem }
    .cc-denuncia .file-remove{ background:#fff; border:1px solid var(--cc-border); border-radius:.5rem; padding:.25rem .5rem; cursor:pointer }

    /* Condicionales y utilidades */
    .cc-denuncia .hidden{ display:none !important }
    /* Base para alertas en la sección denuncia */
    .cc-denuncia .alert {
      padding: .75rem .9rem;
      border-radius: .65rem;
    }

    /* Por tipo */
    .cc-denuncia .alert-info {
      background: #EBF5FF;   /* azul claro */
      border-color: #BFDBFE;
      color: #1E3A8A;
    }

    .cc-denuncia .alert-primary {
      background: #E8F0FE;
      border-color: #A7C0ED;
      color: #1E3A8A;
    }

    .cc-denuncia .alert-success {
      background: #E8F5E9;   /* verde */
      border-color: #C8E6C9;
      color: #1B5E20;
    }

    .cc-denuncia .alert-warning {
      background: #FFF7ED;   /* tono original */
      border: 1px solid #FCD9BD;
      color: #7C2D12;
    }

    .cc-denuncia .alert-danger {
      background: #FEE2E2;   /* rojo suave */
      border-color: #FCA5A5;
      color: #7F1D1D;
    }

    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }


    .cc-denuncia{
      --cc-primary:#426DA9; --cc-primary-600:#35598F;
      --cc-accent:#6FA6E9; --cc-ink:#1F2937; --cc-muted:#6B7280;
      --cc-bg:#F6F8FC; --cc-card:#FFFFFF; --cc-border:#E5E7EB;
      --cc-shadow:0 10px 30px rgba(2,18,44,.06);
      --cc-container:1140px;
      --cc-error:#B91C1C; --cc-error-bg:#FEF2F2; --cc-error-border:#FECACA;
    }
    .cc-denuncia, .cc-denuncia * , .cc-denuncia *::before, .cc-denuncia *::after{ box-sizing:border-box }
    .cc-denuncia .container{ width:100%; max-width:var(--cc-container); margin-inline:auto; padding-inline:1rem }

    /* Página */
    .cc-denuncia main{ background:linear-gradient(180deg,#fff 0%, var(--cc-bg) 100%) }
    .cc-denuncia .page{ padding:1rem 0 2rem }
    .cc-denuncia .grid{ display:grid; gap:1.25rem }
    @media (min-width:1100px){ .cc-denuncia .grid{ grid-template-columns:380px 1fr } }

    /* Aside */
    .cc-denuncia .aside-card{ background:#fff; border:1px solid var(--cc-border); border-radius:.85rem; box-shadow:var(--cc-shadow); padding:1rem }
    .cc-denuncia .aside-card + .aside-card{ margin-top:1rem }
    .cc-denuncia .aside-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
    .cc-denuncia .aside-sub{ margin:.4rem 0 .8rem; color:var(--cc-muted); font-size:.95rem }

    /* Documentos */
    .cc-denuncia .doc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
    .cc-denuncia .doc-item{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start; border:1px solid var(--cc-border); border-radius:.6rem; padding:.6rem .75rem; background:#FCFDFE }
    .cc-denuncia .doc-ico{ width:28px; height:28px; display:grid; place-items:center; background:#EEF3FF; border:1px solid #DBE6FF; border-radius:.5rem; font-size:1rem }
    .cc-denuncia .doc-item a{ font-weight:700; color:var(--cc-primary); text-decoration:none }
    .cc-denuncia .doc-item a:hover{ text-decoration:underline }
    .cc-denuncia .doc-item .meta{ color:var(--cc-muted) }

    /* Acordeón legal mejorado */
    .cc-denuncia .legal-accordion details{ border:1px solid var(--cc-border); border-radius:.65rem; background:#F9FBFF; padding:.5rem .75rem }
    .cc-denuncia .legal-accordion details + details{ margin-top:.6rem }
    .cc-denuncia .legal-accordion summary{ list-style:none; cursor:pointer; font-weight:700; color:var(--cc-ink) }
    .cc-denuncia .legal-accordion .content{ color:#334155; margin-top:.4rem; font-size:.95rem }

    /* Card principal */
    .cc-denuncia .card{ background:#fff; border:1px solid var(--cc-border); border-radius:.95rem; box-shadow:var(--cc-shadow); overflow:hidden }
    .cc-denuncia .card-head{ background:var(--cc-primary); color:#fff; padding:1rem .9rem } /* <- Azul DAXIA */
    .cc-denuncia .card-body{ padding:1rem .9rem }
    .cc-denuncia .req{ color:#DB2E2E }

    /* Campos */
    .cc-denuncia .field{ display:grid; gap:.45rem; margin:1rem 0; min-width:0 }
    .cc-denuncia .field.inline{ grid-template-columns:1fr 1fr; gap:.9rem; align-items:start }
    .cc-denuncia .field.inline > div{ min-width:0 }
    .cc-denuncia label{ font-weight:700; color:var(--cc-ink) }
    .cc-denuncia select,
    .cc-denuncia input[type=text], .cc-denuncia input[type=email],
    .cc-denuncia input[type=password], .cc-denuncia input[type=date],
    .cc-denuncia textarea{
      width:100%; max-width:100%; padding:.75rem .9rem; border:1px solid var(--cc-border);
      border-radius:.7rem; background:#fff; transition:border .2s, box-shadow .2s;
    }
    .cc-denuncia textarea{ min-height:180px; resize:vertical }
    .cc-denuncia select:focus,
    .cc-denuncia input:focus,
    .cc-denuncia textarea:focus{ outline:none; border-color:var(--cc-accent); box-shadow:0 0 0 3px rgba(111,166,233,.25) }

    /* Radios pill y acciones */
    .cc-denuncia .actions{ display:flex; gap:.6rem; flex-wrap:wrap }
    .cc-denuncia .pill{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--cc-border); border-radius:999px; padding:.35rem .75rem; background:#fff }
    .cc-denuncia .pill input{ accent-color:var(--cc-primary) }
    .cc-denuncia .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1rem; border-radius:.7rem; border:1px solid transparent; font-weight:700; cursor:pointer }
    .cc-denuncia .btn-primary{ background:var(--cc-primary); color:#fff; box-shadow:var(--cc-shadow) }
    .cc-denuncia .btn-secondary{ background:#fff; border:1px solid var(--cc-border) }
    .cc-denuncia .form-actions{ display:flex; gap:.6rem; justify-content:flex-end; border-top:1px solid var(--cc-border); padding:1rem }

    /* Dropzone múltiple */
    .cc-denuncia .dropzone{
      background:#FCFDFE; border:2px dashed var(--cc-border); border-radius:.75rem; padding:1rem;
      display:grid; gap:.6rem; place-items:center; text-align:center; cursor:pointer;
      transition:border-color .2s, background .2s;
    }
    .cc-denuncia .dropzone.dragover{ border-color:var(--cc-accent); background:#F3F8FF }
    .cc-denuncia .dz-icon{ font-size:1.6rem }
    .cc-denuncia .dz-help{ color:var(--cc-muted); font-size:.95rem }
    .cc-denuncia .files-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; width:100% }
    .cc-denuncia .file-item{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid var(--cc-border); border-radius:.6rem; padding:.5rem .75rem; background:#fff }
    .cc-denuncia .file-item .meta{ color:var(--cc-muted); font-size:.92rem }
    .cc-denuncia .file-remove{ background:#fff; border:1px solid var(--cc-border); border-radius:.5rem; padding:.25rem .5rem; cursor:pointer }

    /* Errores elegantes */
    .cc-denuncia .error-msg{
      display:none; margin-top:.25rem; font-size:.9rem; color:var(--cc-error);
      background:var(--cc-error-bg); border:1px solid var(--cc-error-border);
      padding:.4rem .6rem; border-radius:.5rem;
    }
    .cc-denuncia .has-error .error-msg{ display:block }
    .cc-denuncia .has-error input,
    .cc-denuncia .has-error select,
    .cc-denuncia .has-error textarea{ border-color:var(--cc-error); box-shadow:0 0 0 3px rgba(185,28,28,.12) }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
 

    .cc-confirm{ --ink:#1F2937; --muted:#6B7280; --primary:#426DA9; --border:#E5E7EB; --card:#fff; --bg:#F6F8FC }
  .cc-confirm body{ background:var(--bg); color:var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial }
  .cc-confirm .container{ max-width: 720px; margin: 3rem auto; padding: 0 1rem }
  .cc-confirm .card{ background:var(--card); border:1px solid var(--border); border-radius:.85rem; padding:1.25rem }
  .cc-confirm h1{ margin:0 0 .25rem 0 }
  .cc-confirm .lead{ color:var(--muted); margin:0 0 1rem 0 }
  .cc-confirm .code{ display:grid; gap:.5rem; grid-template-columns:1fr 1fr }
  .cc-confirm .tile{ border:1px dashed var(--border); border-radius:.75rem; padding:1rem; text-align:center; background:#fff }
  .cc-confirm .tile b{ font-size:1.3rem; letter-spacing:1px }
  .cc-confirm .warn{ background:#FFF7ED; border:1px solid #FCD9BD; border-radius:.75rem; padding:.8rem 1rem; margin-top:1rem }
  .cc-confirm .actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem }
  .cc-confirm .btn{ padding:.75rem 1rem; border-radius:.65rem; border:1px solid var(--border); background:#fff; cursor:pointer }
  .cc-confirm .btn-primary{ background:var(--primary); border-color:transparent; color:#fff }


  /* Enlace "¿Has perdido tu código?" */
.lost-code{ text-align:right; margin:.35rem 0 0 }
.lost-code a{ font-size:.9rem; color:var(--muted); text-decoration:underline }
.lost-code a:hover{ color:var(--primary) }

/* Modal básico accesible y sin dependencias */
.cc-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000 }
.cc-modal.open{ display:flex }
.ccm-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.5) }
.ccm-dialog{
  position:relative; z-index:1; width:92%; max-width:640px;
  background:#fff; border:1px solid var(--border); border-radius:.95rem;
  box-shadow:var(--shadow); padding:1rem 1rem 1.1rem; outline:0
}
.ccm-dialog h3{ margin:.25rem 0 .6rem; font-size:1.15rem; color:var(--ink) }
.ccm-dialog p{ margin:.35rem 0; color:#334155 }
.ccm-dialog ul{ margin:.4rem 0 .6rem 1.1rem; color:#334155 }
.ccm-actions{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:.8rem }
.ccm-close{
  position:absolute; top:.4rem; right:.6rem; border:0; background:transparent;
  font-size:1.6rem; line-height:1; color:#334155; cursor:pointer
}
.ccm-close:hover{ color:var(--primary) }

.nav-link i {
  width: 1.5rem;             /* iguala el ancho de todos los iconos */
  text-align: center;        /* centra cada icono dentro de su caja */
  flex-shrink: 0;            /* evita que se compriman */
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;   
  color: #333;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 10px;
  transition: all 0.2s ease;
}
.nav-link:hover {
  background-color: rgba(66,109,169,0.1);
  color: #426DA9;
}
.nav-link.active {
  background-color: rgba(66,109,169,0.15);
  color: #426DA9;
  font-weight: 600;
  border-left: 3px solid #426DA9;
}


.card {
  background-color: #fff;
}
/* Integrar los botones dentro del input */
.password-group .form-control {
  border-right: 0;
  height: calc(2.5rem + 2px);
}
.password-group .btn {
  border-color: var(--border);
  border-left: 0;
  height: calc(2.5rem + 2px);
}
.password-group .btn i { pointer-events: none; }
.password-meta {
  min-height: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#passwordHelp,
#passwordStrength {
  font-size: .85rem !important;
  line-height: 1.3;
  margin-top: .2rem;
}

.btn-danger {
  background-color: #ef4444; /* rojo */
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background-color: #dc2626;
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger {
  border-width: 1.5px;
  color: #333F48; /* azul oscuro corporativo o texto base */
}

.btn-outline-primary i,
.btn-outline-secondary i,
.btn-outline-danger i {
  opacity: 0.8;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover {
  color: #fff !important;
}

/* Botones de acción compactos (solo iconos) */
.btn-group-sm .btn i {
  font-size: 0.9rem;
}

.btn-group-sm .btn {
  padding: 0.25rem 0.35rem !important;
  line-height: 1;
}

.tooltip-inner {
  background-color: #333F48; /* azul oscuro corporativo */
  color: #fff;
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 6px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #333F48;
}

/* ===== GRID DE CANALES ===== */
.canales-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2rem;
}

/* ===== CARD ===== */
.canal-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

.canal-card:hover,
.canal-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: #426DA9;
}

/* ===== CABECERA DE CARD ===== */
.canal-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}

.canal-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: #426DA9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1;
}

.canal-head h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e3a8a;
  margin: 0;
}

/* ===== TEXTO Y BOTÓN ===== */
.canal-card p {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.canal-card .btn {
  align-self: flex-start;
  background-color: #426DA9;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

.canal-card .btn:hover {
  background-color: #2f5492;
  text-decoration: none;
}

/* ===== Documentación (aside) ===== */

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.doc-item + .doc-item {
  margin-top: 0.75rem;
}

/* Contenedor del icono */
.doc-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;       /* tamaño visual uniforme */
  height: 1.75rem;
  font-size: 1.25rem;
  line-height: 1;
}

/* Icono en sí */
.doc-ico i {
  font-size: 1.25rem;
  line-height: 1;
}

/* Contenedor de texto y metadatos */
.doc-item div {
  font-size: 0.85rem;
  overflow: visible;
  word-break: break-word;
}

/* Enlaces de documentos */
.doc-item a {
  font-weight: 500;
  color: var(--link-color, #1e3a8a);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  word-break: break-all;       /* rompe dentro de palabras largas */
  overflow-wrap: anywhere;     /* asegura salto incluso sin guiones */
  white-space: normal;         /* permite varias líneas */
}

.doc-item a:hover {
  text-decoration: underline;
}

/* Información secundaria (tamaño, fecha, etc.) */
.doc-item .meta {
  color: #666;
  font-size: 0.75rem;
  word-break: break-word;
}

/* Hover opcional para resaltar icono */
.doc-item:hover .doc-ico i {
  opacity: 0.85;
  transform: scale(1.05);
  transition: all 0.2s ease;
}