/* =========================================================================
   Portal de Clientes con Google Drive
   Dirección de diseño: precisión arquitectónica. Carpetas como fichas físicas
   (pestaña superior que se tiñe del color de marca), archivos como filas
   escaneables con distintivo de formato. Tipografía heredada del tema del
   sitio para que el portal se sienta nativo en cualquier instalación.
   ========================================================================= */

.pcd-portal {
  /* Color de marca configurable desde el panel */
  --pcd-color: #1a56db;
  --pcd-ink: #12151c;
  --pcd-texto: #39404e;
  --pcd-suave: #6b7482;
  --pcd-linea: #e6e9ef;
  --pcd-linea-sutil: #f0f2f6;
  --pcd-blanco: #fff;
  --pcd-fondo: #f7f8fb;
  --pcd-r: 14px;
  --pcd-sombra-sm: 0 1px 2px rgba(16, 20, 30, .05), 0 2px 8px rgba(16, 20, 30, .04);
  --pcd-sombra-md: 0 10px 30px rgba(16, 20, 30, .11), 0 2px 6px rgba(16, 20, 30, .05);
  --pcd-ease: cubic-bezier(.2, .7, .2, 1);

  max-width: 1080px;
  margin: 0 auto;
  color: var(--pcd-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pcd-portal *, .pcd-portal *::before, .pcd-portal *::after { box-sizing: border-box; }

/* El atributo hidden debe ganar sobre cualquier display de este archivo:
   sin esta regla el visor quedaría siempre visible tapando el portal. */
.pcd-portal [hidden] { display: none !important; }

/* Micro-etiquetas: versalitas con tracking amplio, el detalle tipográfico
   que da carácter sin importar la fuente que herede del tema. */
.pcd-portal .pcd-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pcd-suave);
}
/* Cifras alineadas en columnas (tamaños, fechas) */
.pcd-portal .pcd-num { font-variant-numeric: tabular-nums; }

/* =========================== ACCESO =========================== */

.pcd-login {
  position: relative;
  max-width: 400px;
  margin: 48px auto;
  padding: 38px 34px 30px;
  background: var(--pcd-blanco);
  border: 1px solid var(--pcd-linea);
  border-radius: var(--pcd-r);
  box-shadow: var(--pcd-sombra-md);
  overflow: hidden;
}
/* Filete de marca superior: firma visual del portal */
.pcd-login::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--pcd-color), color-mix(in srgb, var(--pcd-color) 45%, #ffffff));
}
/* Logo de la empresa.
   Muchos temas redondean las imágenes (border-radius: 50%); el logo debe
   verse completo y con sus esquinas rectas, así que se fuerza aquí. */
.pcd-portal .pcd-logo,
.pcd-portal .pcd-logo-barra {
  border-radius: 0 !important;
  object-fit: contain;
  box-shadow: none;
  border: 0;
  clip-path: none;
  mask-image: none;
}
.pcd-logo {
  display: block;
  max-width: 180px;
  max-height: 64px;
  width: auto;
  height: auto;
  margin: 0 0 20px;
}
.pcd-logo-barra {
  max-width: 132px;
  max-height: 46px;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.pcd-top-identidad { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Identidad (logo + nombre de la empresa) en las pantallas de contraseña */
.pcd-identidad {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pcd-linea);
}
.pcd-identidad .pcd-logo { margin: 0; max-width: 96px; max-height: 46px; }
.pcd-identidad-nombre {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--pcd-ink);
  min-width: 0;
  word-break: break-word;
}

.pcd-login h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--pcd-ink);
}
.pcd-bienvenida { margin: 0 0 26px; color: var(--pcd-suave); font-size: 14px; }
.pcd-login label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pcd-suave);
}
.pcd-login input {
  width: 100%;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--pcd-linea);
  border-radius: 10px;
  background: var(--pcd-fondo);
  font: inherit;
  font-size: 15px;
  color: var(--pcd-ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.pcd-login input:focus {
  outline: none;
  background: var(--pcd-blanco);
  border-color: var(--pcd-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcd-color) 16%, transparent);
}
.pcd-login button[type="submit"] {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--pcd-color);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .2s, transform .12s;
}
.pcd-login button[type="submit"]:hover { filter: brightness(1.08); }
.pcd-login button[type="submit"]:active { transform: translateY(1px); }
.pcd-login button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.pcd-login .pcd-error {
  margin: 16px 0 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: #fdeceb;
  border: 1px solid #f7d4d1;
  color: #a81f16;
  font-size: 13px;
  line-height: 1.45;
}
.pcd-login .pcd-exito {
  margin: 16px 0 0;
  padding: 10px 13px;
  border-radius: 9px;
  background: #e9f7ef;
  border: 1px solid #bfe5cd;
  color: #0b6b3a;
  font-size: 13px;
  line-height: 1.45;
}
/* Requisitos de la contraseña: se marcan solos al escribir */
.pcd-requisitos {
  list-style: none;
  margin: -8px 0 18px;
  padding: 0;
  font-size: 12.5px;
  color: var(--pcd-suave);
}
.pcd-requisitos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  transition: color .2s;
}
.pcd-requisitos .pcd-marca {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid #cfd5df;
  border-radius: 50%;
  position: relative;
  transition: background .2s, border-color .2s;
}
.pcd-requisitos li.pcd-ok { color: #0b6b3a; }
.pcd-requisitos li.pcd-ok .pcd-marca { background: #0b6b3a; border-color: #0b6b3a; }
/* Palomita dibujada en CSS: sin imágenes ni fuentes de iconos */
.pcd-requisitos li.pcd-ok .pcd-marca::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* Coincidencia de las dos contraseñas */
.pcd-coinciden {
  margin: -8px 0 16px;
  font-size: 12.5px;
  font-weight: 600;
}
.pcd-coinciden--ok { color: #0b6b3a; }
.pcd-coinciden--no { color: #b42318; }

.pcd-consejo {
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--pcd-fondo);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pcd-suave);
}

/* Enlaces de servicio (recuperar contraseña, volver) */
.pcd-enlace-linea { margin: 16px 0 0; text-align: center; }
.pcd-enlace {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pcd-color);
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
}
.pcd-enlace:hover { text-decoration: underline; }

.pcd-cookies { margin: 18px 0 0; font-size: 11.5px; color: #949bab; text-align: center; line-height: 1.5; }

/* =========================== MARCO =========================== */

.pcd-dashboard {
  background: var(--pcd-blanco);
  border: 1px solid var(--pcd-linea);
  border-radius: var(--pcd-r);
  box-shadow: var(--pcd-sombra-sm);
  overflow: hidden;
}

.pcd-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pcd-linea);
}
.pcd-top strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pcd-ink);
}
.pcd-sub { font-size: 13px; color: var(--pcd-suave); }
.pcd-top-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Buscador con lupa dibujada en CSS (sin dependencias de iconos) */
.pcd-buscador { position: relative; }
.pcd-buscador::before {
  content: '';
  position: absolute;
  left: 13px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -7px;
  border: 1.8px solid var(--pcd-suave);
  border-radius: 50%;
  pointer-events: none;
}
.pcd-buscador::after {
  content: '';
  position: absolute;
  left: 23px; top: 50%;
  width: 6px; height: 1.8px;
  margin-top: 3px;
  background: var(--pcd-suave);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}
#pcd-buscar {
  min-width: 250px;
  padding: 9px 14px 9px 34px;
  border: 1px solid var(--pcd-linea);
  border-radius: 10px;
  background: var(--pcd-fondo);
  font: inherit;
  font-size: 14px;
  color: var(--pcd-ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
#pcd-buscar:focus {
  outline: none;
  background: var(--pcd-blanco);
  border-color: var(--pcd-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcd-color) 14%, transparent);
}

/* Botones */
.pcd-btn, .pcd-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .12s;
}
.pcd-btn { background: var(--pcd-color); color: #fff !important; }
.pcd-btn:hover { filter: brightness(1.08); }
.pcd-btn-sec { background: var(--pcd-blanco); color: var(--pcd-texto); border-color: var(--pcd-linea); }
.pcd-btn-sec:hover { border-color: var(--pcd-color); color: var(--pcd-color); background: color-mix(in srgb, var(--pcd-color) 5%, #ffffff); }
.pcd-btn:active, .pcd-btn-sec:active { transform: translateY(1px); }

/* Barra de navegación: botones de recorrido + migas de pan */
.pcd-barra-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  background: var(--pcd-fondo);
  border-bottom: 1px solid var(--pcd-linea);
}
.pcd-nav-botones { display: flex; gap: 5px; flex-shrink: 0; }
.pcd-nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pcd-linea);
  border-radius: 8px;
  background: var(--pcd-blanco);
  color: var(--pcd-texto);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.pcd-nav:hover:not(:disabled) {
  border-color: var(--pcd-color);
  color: var(--pcd-color);
  background: color-mix(in srgb, var(--pcd-color) 6%, #ffffff);
}
.pcd-nav:active:not(:disabled) { transform: translateY(1px); }
.pcd-nav:disabled { opacity: .38; cursor: default; }

/* Barra de acciones de escritura (subir, nueva carpeta) */
.pcd-acciones-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--pcd-linea-sutil);
}
.pcd-acciones-barra .pcd-btn,
.pcd-acciones-barra .pcd-btn-sec { cursor: pointer; }
.pcd-btn-ico { font-weight: 700; margin-right: 2px; }
.pcd-subiendo {
  font-size: 13px;
  color: var(--pcd-color);
  font-weight: 600;
}

/* Botón-icono (renombrar / eliminar) en filas y fichas */
.pcd-btn-icono {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--pcd-linea);
  border-radius: 8px;
  background: var(--pcd-blanco);
  color: var(--pcd-suave);
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.pcd-btn-icono:hover { border-color: var(--pcd-color); color: var(--pcd-color); }
.pcd-btn-icono--peligro:hover { border-color: #d64545; color: #c4271d; background: #fdeceb; }

/* Acciones en la esquina de la ficha de carpeta */
.pcd-carpeta-acciones {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity .18s;
}
.pcd-carpeta:hover .pcd-carpeta-acciones,
.pcd-carpeta:focus-within .pcd-carpeta-acciones { opacity: 1; }
.pcd-carpeta-acciones .pcd-btn-icono { width: 26px; height: 26px; }
@media (hover: none) { .pcd-carpeta-acciones { opacity: 1; } }

/* Barra del modo búsqueda: reemplaza a la de navegación mientras se busca,
   para que quede claro que no se está recorriendo una carpeta. */
.pcd-barra-busqueda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 22px;
  background: color-mix(in srgb, var(--pcd-color) 7%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--pcd-color) 22%, var(--pcd-linea));
}
.pcd-busqueda-info {
  font-size: 13.5px;
  color: var(--pcd-texto);
  min-width: 0;
}
.pcd-busqueda-info strong { color: var(--pcd-ink); }

/* Ubicación del resultado dentro del árbol del cliente */
.pcd-ubicacion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--pcd-suave);
}
.pcd-ubicacion::before {
  content: '';
  width: 11px;
  height: 9px;
  flex-shrink: 0;
  border: 1.3px solid currentColor;
  border-radius: 1.5px 2.5px 2.5px 2.5px;
  border-top-width: 3px;
  opacity: .75;
}
.pcd-carpeta-ubicacion {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--pcd-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Migas de pan */
.pcd-migas {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
}
.pcd-miga {
  background: none;
  border: 0;
  padding: 3px 7px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--pcd-suave);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.pcd-miga:hover { background: color-mix(in srgb, var(--pcd-color) 9%, transparent); color: var(--pcd-color); }
.pcd-miga-sep { color: #b9c0cc; font-size: 15px; line-height: 1; }
.pcd-miga-actual { padding: 3px 7px; font-weight: 700; color: var(--pcd-ink); }

/* =========================== SECCIONES =========================== */

.pcd-seccion { padding: 20px 22px 6px; }
.pcd-seccion + .pcd-seccion { padding-top: 6px; }
.pcd-seccion-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pcd-seccion-cab::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pcd-linea-sutil);
}
.pcd-conteo {
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--pcd-fondo);
  border: 1px solid var(--pcd-linea);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pcd-suave);
  font-variant-numeric: tabular-nums;
}

/* ====================== CARPETAS COMO FICHAS ====================== */

.pcd-carpetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.pcd-carpeta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 122px;
  padding: 16px;
  background: var(--pcd-blanco);
  border: 1px solid var(--pcd-linea);
  /* Esquina superior izquierda recta: la ficha "nace" de su pestaña */
  border-radius: 3px var(--pcd-r) var(--pcd-r) var(--pcd-r);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--pcd-ease), box-shadow .3s var(--pcd-ease), border-color .3s;
}
/* Barra-índice superior: el gesto que identifica al portal. Va DENTRO de la
   ficha (la tarjeta recorta su desbordamiento) y al enfocarla crece y se
   tiñe del color de marca, como la pestaña de una carpeta que se levanta. */
.pcd-carpeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 42%;
  height: 4px;
  background: var(--pcd-linea);
  border-radius: 0 0 4px 0;
  transition: width .32s var(--pcd-ease), background .32s var(--pcd-ease);
}
/* Filigrana geométrica de fondo: profundidad sin ruido */
.pcd-carpeta::after {
  content: '';
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pcd-color) 5%, transparent);
  transition: transform .45s var(--pcd-ease), background .3s;
}
.pcd-carpeta:hover,
.pcd-carpeta:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--pcd-sombra-md);
  border-color: color-mix(in srgb, var(--pcd-color) 55%, var(--pcd-linea));
  outline: none;
}
.pcd-carpeta:hover::before,
.pcd-carpeta:focus-visible::before {
  width: 68%;
  background: var(--pcd-color);
}
.pcd-carpeta:hover::after { transform: scale(1.28); background: color-mix(in srgb, var(--pcd-color) 10%, transparent); }

.pcd-carpeta-icono {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--pcd-color) 10%, #ffffff);
  color: var(--pcd-color);
  transition: background .3s, transform .3s var(--pcd-ease);
}
.pcd-carpeta:hover .pcd-carpeta-icono { background: color-mix(in srgb, var(--pcd-color) 16%, #ffffff); transform: scale(1.06); }

.pcd-carpeta-pie { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pcd-carpeta-nombre {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.008em;
  color: var(--pcd-ink);
  /* Hasta 3 líneas: los nombres largos caben completos también en móvil */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Insignia de retención documental (TRD) bajo el nombre de la carpeta. */
.pcd-carpeta-trd {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.pcd-trd-pill {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: #eef0f4; color: var(--pcd-suave); /* neutro por defecto */
}
.pcd-trd-pill[data-nivel="ok"]      { background: #e6f4ea; color: #137333; }
.pcd-trd-pill[data-nivel="aviso"]   { background: #fef7e0; color: #9a6700; }
.pcd-trd-pill[data-nivel="urgente"] { background: #fce8e6; color: #c5221f; }
.pcd-trd-serie {
  font-size: 11px;
  color: var(--pcd-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pcd-carpeta-flecha {
  flex-shrink: 0;
  color: var(--pcd-color);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--pcd-ease), transform .3s var(--pcd-ease);
}
.pcd-carpeta:hover .pcd-carpeta-flecha,
.pcd-carpeta:focus-visible .pcd-carpeta-flecha { opacity: 1; transform: none; }

/* ====================== ARCHIVOS COMO FILAS ====================== */

.pcd-archivos { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--pcd-linea); border-radius: var(--pcd-r); overflow: hidden; }

.pcd-archivo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--pcd-blanco);
  transition: background .18s;
}
.pcd-archivo + .pcd-archivo { border-top: 1px solid var(--pcd-linea-sutil); }
.pcd-archivo:hover { background: var(--pcd-fondo); }

/* Distintivo de formato: legible en cualquier plataforma (sin emoji) */
.pcd-ext {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #eef0f4;
  color: #5c6575;
}
/* Color semántico por familia de formato: información, no decoración */
.pcd-ext[data-fam="doc"]   { background: #e7efff; color: #1b4fd8; }
.pcd-ext[data-fam="hoja"]  { background: #e3f6ec; color: #0b7a43; }
.pcd-ext[data-fam="pdf"]   { background: #fdeceb; color: #c4271d; }
.pcd-ext[data-fam="img"]   { background: #f3ebfd; color: #7038c8; }
.pcd-ext[data-fam="pres"]  { background: #fff0e2; color: #c2650b; }
.pcd-ext[data-fam="video"] { background: #fce9f2; color: #b81f66; }
.pcd-ext[data-fam="audio"] { background: #e6f5f7; color: #0d7a8c; }
.pcd-ext[data-fam="zip"]   { background: #f2f0e6; color: #7a6a20; }

.pcd-archivo-datos { min-width: 0; }
.pcd-archivo-nombre {
  display: block;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--pcd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcd-archivo-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--pcd-suave);
  font-variant-numeric: tabular-nums;
}
.pcd-archivo-meta span::before { content: ''; }

/* Las acciones se mantienen siempre legibles: descargar es la tarea principal
   del portal y atenuarlas la haría parecer deshabilitada. El realce al pasar
   por la fila se logra con el fondo, no restando contraste a los botones. */
.pcd-acciones { display: flex; gap: 7px; flex-shrink: 0; }

/* ====================== ESTADOS ====================== */

.pcd-estado { padding: 46px 22px; text-align: center; }
.pcd-estado-icono {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--pcd-fondo);
  border: 1px solid var(--pcd-linea);
  color: var(--pcd-suave);
}
.pcd-estado-titulo { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: var(--pcd-ink); }
.pcd-estado-texto { margin: 0; font-size: 13.5px; color: var(--pcd-suave); }
.pcd-estado--error .pcd-estado-icono { background: #fdeceb; border-color: #f7d4d1; color: #c4271d; }
.pcd-estado--error .pcd-estado-titulo { color: #a81f16; }

/* Esqueleto de carga: comunica la forma de lo que viene, sin texto */
@keyframes pcd-brillo { to { background-position: -200% 0; } }
.pcd-skel {
  background: linear-gradient(90deg, #eef0f4 25%, #f7f8fb 37%, #eef0f4 63%);
  background-size: 200% 100%;
  animation: pcd-brillo 1.3s linear infinite;
  border-radius: 8px;
}
.pcd-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px; padding: 20px 22px; }
.pcd-skel-card { height: 122px; border-radius: 3px var(--pcd-r) var(--pcd-r) var(--pcd-r); }

.pcd-paginacion { padding: 8px 22px 20px; text-align: center; }

/* Entrada escalonada: una sola coreografía al abrir la carpeta */
@keyframes pcd-entrada { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.pcd-anim { animation: pcd-entrada .42s var(--pcd-ease) backwards; }

/* ====================== VISOR ====================== */

.pcd-visor {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(12, 15, 22, .74);
  backdrop-filter: blur(3px);
  animation: pcd-fundido .22s ease;
}
@keyframes pcd-fundido { from { opacity: 0; } to { opacity: 1; } }
.pcd-visor-caja {
  display: flex;
  flex-direction: column;
  width: min(1000px, 96vw);
  height: min(88vh, 920px);
  background: var(--pcd-blanco);
  border-radius: var(--pcd-r);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  animation: pcd-surgir .28s var(--pcd-ease);
}
@keyframes pcd-surgir { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.pcd-visor-caja header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pcd-linea);
}
#pcd-visor-titulo { font-size: 14.5px; font-weight: 650; color: var(--pcd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pcd-visor-cerrar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
  color: var(--pcd-suave);
  cursor: pointer;
  transition: background .18s, color .18s;
}
#pcd-visor-cerrar:hover { background: var(--pcd-fondo); color: var(--pcd-ink); }
.pcd-visor-cuerpo { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; background: var(--pcd-fondo); }
.pcd-visor-cuerpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pcd-visor-cuerpo iframe { width: 100%; height: 100%; border: 0; background: var(--pcd-blanco); }
.pcd-sin-scroll { overflow: hidden; }

/* --- Panel de la Tabla de Retención Documental --- */
#pcd-trd-cuerpo { padding: 16px; overflow: auto; }
.pcd-trd-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.pcd-inv-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.pcd-inv-eti { font-size: 12.5px; color: var(--pcd-suave); font-weight: 650; }
.pcd-inv-intro { font-size: 13px; color: var(--pcd-suave); margin: 0 0 12px; }

/* ---------- Diálogo de justificación (historial) ---------- */
.pcd-exp-campo textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--pcd-linea);
  border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical;
  color: var(--pcd-ink); background: #fff;
}
.pcd-motivo-nota {
  font-size: 12px; color: var(--pcd-suave); background: var(--pcd-fondo);
  border-left: 3px solid var(--pcd-a); padding: 8px 10px; margin: 0 0 14px; border-radius: 0 6px 6px 0;
}
.pcd-enlace-aviso {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--pcd-a); text-decoration: underline;
}
.pcd-aviso-texto {
  font-size: 12px; line-height: 1.55; color: var(--pcd-ink); background: #fff;
  border: 1px solid var(--pcd-linea); border-radius: 8px; padding: 10px 12px;
  margin: 0 0 14px; max-height: 180px; overflow-y: auto; white-space: pre-wrap;
}

/* ---------- Diálogo: asignar la retención de una carpeta ---------- */
/* Variante para FORMULARIOS (justificar, asignar retención).
   La caja del visor está pensada para documentos: ocupa 88vh y su cuerpo no
   tiene relleno porque una imagen o un iframe deben llenarlo. Con un
   formulario eso dejaba los campos pegados al borde —el botón «Cancelar»
   quedaba cortado— y una caja enorme medio vacía. */
.pcd-visor-caja--estrecha {
  width: min(520px, 94vw);
  max-width: 520px;
  height: auto;              /* lo marca el contenido, no el 88vh del visor */
  max-height: 90vh;
}
.pcd-visor-caja--estrecha .pcd-visor-cuerpo {
  display: block;
  padding: 18px 20px 20px;
  background: var(--pcd-blanco);
}
/* Que ningún control se salga del ancho de la caja. */
.pcd-visor-caja--estrecha .pcd-visor-cuerpo select,
.pcd-visor-caja--estrecha .pcd-visor-cuerpo textarea,
.pcd-visor-caja--estrecha .pcd-visor-cuerpo input { max-width: 100%; }
.pcd-exp-campo { display: block; margin: 0 0 14px; }
.pcd-exp-campo > span {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--pcd-suave); margin-bottom: 5px;
}
.pcd-exp-campo select,
.pcd-exp-campo input[type="date"] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--pcd-linea);
  border-radius: 8px; background: #fff; font-size: 14px; color: var(--pcd-ink);
}
.pcd-exp-campo small { display: block; margin-top: 4px; font-size: 12px; color: var(--pcd-suave); }
.pcd-exp-fechas { display: flex; gap: 12px; }
/* min-width:0 para que los campos no desborden el diálogo en pantallas
   estrechas (los elementos de una fila flexible no encogen por defecto). */
.pcd-exp-fechas > .pcd-exp-campo { flex: 1; min-width: 0; }
.pcd-exp-aviso { min-height: 18px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--pcd-alerta); }
.pcd-exp-acciones { display: flex; gap: 10px; justify-content: flex-end; }
/* La carpeta que ya tiene retención asignada muestra su etiqueta destacada. */
.pcd-btn-icono--activo { color: var(--pcd-a); }

@media (max-width: 480px) {
  .pcd-exp-fechas { flex-direction: column; gap: 0; }
}
/* Inventario incompleto: tiene que verse: se firma como si fuera completo. */
.pcd-inv-aviso {
  font-size: 13px; font-weight: 600; color: #8a1c1a; background: #fdecea;
  border: 2px solid #b32d2e; border-radius: 6px; padding: 9px 11px; margin: 0 0 12px;
}
.pcd-inv-vista { margin-top: 8px; }
.pcd-inv-filtro { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.pcd-inv-filtro input {
  flex: 1; min-width: 180px; padding: 8px 12px;
  border: 1px solid var(--pcd-linea); border-radius: 9px; font: inherit;
  background: var(--pcd-blanco); color: var(--pcd-ink);
}
.pcd-inv-contador { font-size: 12.5px; color: var(--pcd-suave); white-space: nowrap; }
/* Pestañas del panel TRD / Inventario */
.pcd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pcd-linea); margin-bottom: 14px; }
.pcd-tab {
  border: 1px solid var(--pcd-linea); border-bottom: 0;
  background: var(--pcd-fondo); color: var(--pcd-suave);
  font: inherit; font-size: 13.5px; font-weight: 650;
  padding: 8px 16px; border-radius: 10px 10px 0 0; cursor: pointer;
  margin-bottom: -1px;
}
.pcd-tab.activa { background: var(--pcd-blanco); color: var(--pcd-ink); border-bottom: 1px solid var(--pcd-blanco); }
.pcd-tab-panel[hidden] { display: none; }
.pcd-trd-tabla { overflow-x: auto; }
.pcd-trd-tabla table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 640px; }
.pcd-trd-tabla th, .pcd-trd-tabla td { border: 1px solid var(--pcd-linea); padding: 6px 9px; text-align: left; vertical-align: top; }
.pcd-trd-tabla th { background: var(--pcd-fondo); color: var(--pcd-ink); font-weight: 650; white-space: nowrap; }
.pcd-trd-tabla td.pcd-trd-num { text-align: center; }
.pcd-trd-acc { white-space: nowrap; }
.pcd-trd-global { font-size: 11px; color: var(--pcd-suave); }
.pcd-trd-form { max-width: 520px; }
.pcd-trd-form h3 { margin: 0 0 12px; color: var(--pcd-ink); }
.pcd-trd-campo { display: block; margin-bottom: 10px; }
.pcd-trd-campo > span { display: block; font-size: 12.5px; color: var(--pcd-suave); margin-bottom: 3px; }
.pcd-trd-campo input, .pcd-trd-campo select, .pcd-trd-campo textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--pcd-linea);
  border-radius: 8px; font: inherit; background: var(--pcd-blanco); color: var(--pcd-ink);
}
.pcd-trd-form-acc { display: flex; gap: 8px; margin-top: 14px; }

/* --- Vista previa de Word y Excel (render en el navegador) --- */
/* min-width/min-height 0: sin ellos, una tabla ancha desborda el modal en
   vez de desplazarse dentro (trampa conocida de elementos flex). */
.pcd-office { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pcd-office-cargando { margin: auto; color: var(--pcd-gris); font-size: 14px; }
.pcd-office-error { margin: auto; text-align: center; display: grid; gap: 14px; justify-items: center; color: var(--pcd-gris); }
.pcd-hojas { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; background: var(--pcd-blanco); border-bottom: 1px solid var(--pcd-linea); }
.pcd-hoja-tab {
  border: 1px solid var(--pcd-linea);
  border-bottom: 0;
  background: var(--pcd-fondo);
  color: var(--pcd-gris);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.pcd-hoja-tab.activa { background: var(--pcd-blanco); color: var(--pcd-ink); font-weight: 650; }
.pcd-hoja-tabla { flex: 1; overflow: auto; background: var(--pcd-blanco); padding: 10px; }
.pcd-hoja-tabla table { border-collapse: collapse; font-size: 13px; }
.pcd-hoja-tabla td { border: 1px solid var(--pcd-linea); padding: 4px 9px; white-space: nowrap; color: var(--pcd-ink); }
/* docx-preview pinta sus propias "páginas"; solo se ajusta el lienzo. */
.pcd-office .docx-wrapper { flex: 1; overflow: auto; background: var(--pcd-fondo); padding: 18px; }
.pcd-office .docx-wrapper > section.docx { margin-bottom: 14px; box-shadow: 0 3px 14px rgba(15, 23, 42, .12); }
@media (max-width: 720px) {
  .pcd-office .docx-wrapper { padding: 8px; }
  /* En pantallas angostas la "página" A4 no cabe: se deja desplazar. */
  .pcd-office .docx-wrapper > section.docx { min-width: 0 !important; width: auto !important; padding: 24px !important; }
}

/* ====================== RESPONSIVO ====================== */

@media (max-width: 720px) {
  .pcd-portal { font-size: 14.5px; }
  .pcd-top { padding: 15px 16px; }
  .pcd-barra-nav, .pcd-seccion { padding-left: 16px; padding-right: 16px; }
  .pcd-barra-nav { gap: 9px; }
  .pcd-skel-grid { padding-left: 16px; padding-right: 16px; }
  .pcd-top-acciones { width: 100%; }
  .pcd-logo-barra { max-width: 104px; max-height: 34px; }
  .pcd-logo { max-width: 150px; max-height: 54px; }
  .pcd-buscador { flex: 1; }
  #pcd-buscar { min-width: 0; width: 100%; }
  /* 132px permite 2 fichas por fila incluso en pantallas de 360-375px */
  .pcd-carpetas { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  .pcd-carpeta { min-height: 108px; gap: 16px; }

  /* Las acciones bajan a su propia línea y quedan siempre visibles en táctil */
  .pcd-archivo { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; padding: 12px 14px; }
  .pcd-archivo-datos { grid-column: 2; }
  .pcd-acciones { grid-column: 1 / -1; opacity: 1; }
  .pcd-visor { padding: 0; }
  .pcd-visor-caja { width: 100vw; height: 100vh; border-radius: 0; }
  /* Un formulario a pantalla completa no necesita estirarse hasta abajo:
     conserva el alto de su contenido y se centra. */
  .pcd-visor-caja--estrecha {
    width: 100vw;
    height: auto;
    max-height: 100vh;
    border-radius: 0;
  }
  .pcd-visor-caja--estrecha .pcd-visor-cuerpo { padding: 16px; }
}

/* ====================== ACCESIBILIDAD ====================== */

@media (prefers-reduced-motion: reduce) {
  .pcd-portal *, .pcd-portal *::before, .pcd-portal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pcd-carpeta:hover { transform: none; }
}
.pcd-portal :focus-visible { outline: 2px solid var(--pcd-color); outline-offset: 2px; border-radius: 6px; }