/* punkaudit.css  —  escala grises */
:root{
  --pa-bg:#fff;--pa-text:#111;--pa-border:#ddd;--pa-muted:#666;
  --pa-row-alt:#f7f7f7;--pa-row-hov:#eaeaea;
  --pa-high:#dc2626;--pa-medium:#eab308;--pa-low:#9ca3af;--pa-info:#0ea5e9;
}

/* contenedor */
#punkaudit-wrap{font-size:15px;color:var(--pa-text)}

/* —— controles ——————————————————————————— */
#punkaudit-controls{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
#punkaudit-controls select{
  flex:0 0 230px;min-height:38px;padding:.35rem .6rem;font-size:15px;
  border:1px solid var(--pa-border);border-radius:4px;background:#fafafa;appearance:none
}
#punkaudit-controls button{
  margin-left:auto;padding:.55rem 1.2rem;font-size:15px;color:#fff;border:0;
  background:#3d3d46;border-radius:4px;cursor:pointer
}
#punkaudit-controls button:hover{background:#2e2e35}

/* —— encabezado —————————————————————————— */
.pa-title{font-size:1.55rem;font-weight:700;margin:.2rem 0}
.pa-desc{font-size:14px;color:var(--pa-muted);max-width:70ch;margin:.15rem 0 1rem}


/* --- Estilos de Badges (CORREGIDO Y UNIFICADO) --- */

/* Estilo base para CUALQUIER badge */
.pa-badge {
    display: inline-block; /* Asegura un comportamiento de bloque predecible */
    padding: 0.2em 0.5em;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff; /* Color de texto blanco por defecto para todos */
}

/* El badge en el título principal es un poco más grande */
.pa-title .pa-badge {
    font-size: 12px;
    margin-left: 0.5rem;
}

/* El badge en la tabla del dashboard es ligeramente más pequeño */
.pa-dashboard-table .pa-badge {
    font-size: 11px;
    margin-left: 8px;
}

/* Modificadores de color */
.pa-badge.pa-alta { background-color: var(--pa-high); }
.pa-badge.pa-media { 
    background-color: var(--pa-medium); 
    color: #111; /* << CORRECCIÓN: Texto oscuro para el fondo amarillo */
}
.pa-badge.pa-baja { background-color: var(--pa-low); }
.pa-badge.pa-info { background-color: var(--pa-info); }

/* contenedor de la tabla */
#pa-table-wrap{
   margin:1.5rem 0;
   overflow-x:auto;          /* ① scroll horizontal si la tabla es muy ancha */
}

/* tabla base */
.punkaudit-table{
   min-width:100%;
   width:max-content;        /* ② deja que crezca hasta lo que necesite */
   table-layout:auto;
}

.punkaudit-table{width:100%;border-collapse:collapse;font-size:14px}
.punkaudit-table thead th{padding:.6rem .5rem;border-bottom:2px solid var(--pa-text);text-align:left}
.punkaudit-table tbody td{
  padding:.45rem .5rem;border-bottom:1px solid var(--pa-border);vertical-align:top;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px
}
.punkaudit-table tbody tr:nth-child(odd){background:var(--pa-row-alt)}
.punkaudit-table tbody tr:hover{background:var(--pa-row-hov)}
.punkaudit-table thead th:first-child,
.punkaudit-table tbody td:first-child{width:30px;text-align:center}

/* DataTables UI */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:.2rem .55rem;margin-left:.2rem;border:1px solid var(--pa-border);
  background:#fafafa;border-radius:4px;font-size:13px;text-decoration:none;color:var(--pa-text)
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--pa-row-hov)}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{font-size:13px;color:var(--pa-muted);margin-top:.4rem}
.dataTables_wrapper .dataTables_filter input{
  padding:.25rem .45rem;border:1px solid var(--pa-border);border-radius:4px;background:#fafafa;
  font-size:13px;margin-left:.3rem
}

/* responsive hint */
@media(max-width:992px){
  #punkaudit-wrap{font-size:14px}
  #punkaudit-controls select{flex:1 1 160px}
}

/* estados */
.dt--done{color:var(--pa-high);font-weight:600}

/* ─── pop-over de URLs ─────────────────────────────── */
.pa-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
}
.pa-box{
    background:#fff; padding:1.2rem 1.5rem; max-width:750px;
    max-height:80vh; overflow:auto; border-radius:6px;
    box-shadow:0 8px 25px rgba(0,0,0,.25); font-size:15px;
}
.pa-box h3{margin:0 0 .8rem;font-size:18px}
.pa-box ul{margin:0; padding:0 0 0 1.2rem}
.pa-box li{margin:.15rem 0; word-break:break-all}
.pa-close{
    position:absolute; top:8px; right:14px; font-size:22px;
    cursor:pointer; color:#666;
}
.pa-badge-url{               /* botón “+N” en la celda */
    display:inline-block; margin-left:.35rem; padding:.05rem .35rem;
    font-size:11px; line-height:1; border-radius:9px; background:#444;
    color:#fff; cursor:pointer;
}

/* mini-botones de acción */
.pa-mini{
    margin-left:.5rem;
    padding:.25rem .55rem;
    font-size:.85em;
    /*background:#fafafa;*/
    border:1px solid var(--pa-border);
    border-radius:4px;
    cursor:pointer;
}
.pa-mini:hover{background:var(--pa-row-hov);}

/* botones de pestaña + estado ------------------------------------ */
.pa-tabs   { margin:.5rem 0 1rem; display:inline-flex; gap:.4rem; }
.pa-tabbtn { padding:.3rem .9rem; border:1px solid var(--pa-border);
             border-radius:4px; background:#fafafa; cursor:pointer;
             font-size:14px; line-height:1.2; color:black; }
.pa-tabbtn.active { background:#333; color:#fff; }
/*.pa-ignored { background:#ffe8e8 !important; }    */      /* fila gris-rojo */

.pa-bulk, 
.pa-done-all, 
.pa-ignore-all, 
.pa-reset-all {
    margin: 3px;
}

/* Alternativa sin !important */
.punkaudit-table tbody tr.pa-ignored {
    background-color: #ffe8e8; 
}

/* Estilo para las filas seleccionadas por el usuario */
.punkaudit-table tbody tr.selected {
    background-color: #dbeafe !important; /* Un azul claro suave */
}

.pa-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
}
#pa-table-wrap {
    position: relative; /* Necesario para que el overlay se posicione correctamente */
}

/* --- Estilos para la celda de acciones y notas --- */

.pa-cell-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pa-note-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 18px;
    line-height: 1;
    opacity: 0.5;
}
.pa-note-btn:hover {
    opacity: 1;
}
.pa-note-btn.has-note {
    opacity: 1; /* Hacemos el icono más visible si tiene una nota */
}
.pa-note-textarea {
    width: 100%;
    min-height: 120px;
    display: block;
    margin: 1rem 0;
    padding: 8px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid var(--pa-border);
    border-radius: 4px;
    resize: vertical;
}
.pa-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.pa-note-save {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}
.pa-note-delete {
    background-color: transparent;
    color: var(--pa-muted);
    border: none;
    cursor: pointer;
}


/* --- Estilos para el Dashboard --- */
.pa-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}.pa-card{background:#f9f9f9;border:1px solid var(--pa-border);border-radius:6px;padding:1rem;text-align:center}.pa-card-value{font-size:2.5rem;font-weight:700;line-height:1;color:#3d3d46}.pa-card-label{font-size:14px;color:var(--pa-muted);margin-top:.5rem}.pa-dashboard-table{width:100%;border-collapse:collapse;font-size:15px}.pa-dashboard-table th,.pa-dashboard-table td{padding:.8rem;text-align:left;border-bottom:1px solid var(--pa-border)}.pa-dashboard-table th{font-weight:600}.pa-dashboard-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}.pa-dashboard-table a{font-weight:600;text-decoration:none;color:#0073aa}.pa-dashboard-table a:hover{text-decoration:underline}.pa-progress-bar{background-color:#e9ecef;border-radius:4px;height:20px;width:120px;display:inline-block;vertical-align:middle}.pa-progress-bar-inner{background-color:#28a745;height:100%;border-radius:4px;color:#fff;font-size:12px;line-height:20px;text-align:center;font-weight:700;transition:width .6s ease}

/* --- Estilos para las Mejoras del Dashboard --- */

/* Logo del Cliente */
#pa-client-logo {
    height: 38px; /* Misma altura que el select */
    width: auto;
    margin-right: 0.75rem;
    border-radius: 4px;
    vertical-align: middle;
    display: none; /* Oculto por defecto */
}

/* Badge de prioridad en la tabla del dashboard */
.pa-dashboard-table .pa-badge {
    font-size: 11px;
    vertical-align: middle;
    margin-left: 8px;
}

/* --- Estilos para la Columna de Progreso --- */
.pa-dashboard-table .pa-progress-cell {
    text-align: left !important; /* Forzamos la alineación a la izquierda */
    width: 150px; /* Le damos un ancho fijo para que no se estire */
}

.pa-client-name {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
}

/* --- Estilos para el Modal de Login --- */
.pa-login-box {
    max-width: 420px;
    text-align: center;
}
.pa-login-logo img {
    max-width: 120px;
    margin-bottom: 1rem;
}
.pa-login-box h3 {
    font-size: 24px;
    margin-bottom: 0.5rem;
}
.pa-login-box p {
    color: var(--pa-muted);
    font-size: 16px;
    margin-top: 0;
}
#pa-login-form {
    margin-top: 1.5rem;
    text-align: left;
}
.pa-form-row {
    margin-bottom: 1rem;
}
.pa-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.pa-form-row .input {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 1px solid var(--pa-border);
    border-radius: 4px;
}
.pa-login-submit {
    margin-top: 1.5rem;
    text-align: right;
}
.pa-login-submit .button {
    width: 100%;
    padding: 1rem;
    font-size: 16px;
    font-weight: bold;
    background: #000;
    border: none;
    cursor: pointer;
}
.pa-login-error {
    color: var(--pa-high);
    background: #ffe8e8;
    border: 1px solid var(--pa-high);
    border-radius: 4px;
    padding: 0.75rem;
    margin-top: 1rem;
    text-align: center;
}

/* --- Solución para visibilidad del badge +N --- */

.pa-url-cell-wrapper {
  display: flex; /* Convierte el div en un contenedor flexible. */
  justify-content: space-between; /* Empuja el enlace y el badge a extremos opuestos. */
  align-items: center; /* Los alinea verticalmente en el centro. */
  width: 100%; /* Asegura que el contenedor ocupe todo el espacio de la celda. */
  overflow: hidden; /* Oculta cualquier desbordamiento del propio contenedor. */
}

/* 
 * Estilo para el enlace DENTRO del contenedor flexible.
 * Le devolvemos las propiedades de truncamiento que antes tenía la celda (td).
 */
.pa-url-cell-wrapper a {
  white-space: nowrap; /* Evita que el texto del enlace se parta en varias líneas. */
  overflow: hidden; /* Oculta el texto del enlace que no cabe. */
  text-overflow: ellipsis; /* Muestra "..." cuando el texto se corta. */
  min-width: 0; /* Necesario en flexbox para que el truncamiento funcione correctamente. */
}

/*
 * Estilo para el badge DENTRO del contenedor flexible.
 * Le damos un margen para que no esté pegado al texto y aseguramos que no se encoja.
 */
.pa-url-cell-wrapper .pa-badge-url {
  margin-left: 8px; /* Crea un espacio de separación con el enlace. */
  flex-shrink: 0; /* IMPIDE que el badge se encoja, garantizando su visibilidad. */
}