/* =====================================================
   CASOS LEGALES COMO CARPETAS DIGITALES
   Contraparte = carpeta; cada caso = subcarpeta dentro de ella.
   Solo usa los tokens del tema (theme.css), así funciona igual en
   índigo, esmeralda, perla y modo oscuro.
   ===================================================== */

/* Ruta tipo explorador: Casos legales › Constructora › CASO-2026-0007 */
.ruta-carpetas {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .55rem .8rem; margin-bottom: 1rem; font-size: .88rem;
}
.ruta-carpetas a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.ruta-carpetas a:hover { color: var(--primary); }
.ruta-carpetas .sep { color: var(--text-muted); opacity: .6; }
.ruta-carpetas .actual { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.ruta-carpetas svg { flex: none; }

/* Barra de herramientas: búsqueda, orden y Carpetas/Lista */
.barra-carpetas { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.barra-carpetas form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1 1 420px; }
.barra-carpetas .search-wrap { flex: 1 1 240px; }
.vista-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.vista-toggle a { padding: .38rem .7rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.vista-toggle a.activa { background: var(--primary-tint); color: var(--primary); }

/* Cuadrícula */
.rejilla-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem 1rem; padding-top: 1rem; }
.rejilla-carpetas.sub { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* Carpeta: pestaña de color arriba a la izquierda, unida al borde
   superior del mismo color; el color dice qué tipo de carpeta es. */
.carpeta {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--carpeta-color, var(--primary)) 7%, var(--surface)) 0, var(--surface) 64px);
  border: 1px solid var(--border); border-top: 3px solid var(--carpeta-color, var(--primary));
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 1rem 1rem .85rem; color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width: 0;
}
.carpeta::before {
  content: ""; position: absolute; left: -1px; top: -12px; height: 12px; width: 44%; max-width: 140px;
  border-radius: 9px 14px 0 0; background: var(--carpeta-color, var(--primary));
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}
.carpeta:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--text);
  border-color: var(--carpeta-color, var(--primary));
}

.carpeta-cabeza { display: flex; align-items: flex-start; gap: .65rem; }
.carpeta-icono {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--carpeta-fondo, var(--primary-tint)); color: var(--carpeta-color, var(--primary));
}
.carpeta-titulo { font-weight: 700; font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }
.carpeta-sub { font-size: .76rem; color: var(--text-muted); margin-top: .1rem; }
.carpeta-cifras { display: flex; gap: .9rem; font-size: .8rem; color: var(--text-muted); }
.carpeta-cifras b { color: var(--text); font-size: .95rem; font-variant-numeric: tabular-nums; }
.carpeta-items { display: flex; flex-direction: column; gap: .2rem; border-top: 1px dashed var(--border); padding-top: .45rem; }
.carpeta-item { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-muted); min-width: 0; }
.carpeta-item .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpeta-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; font-size: .76rem; color: var(--text-muted); }
.carpeta-alerta { color: var(--danger-fg); font-weight: 700; }

/* Subcarpeta (un caso): el color dice el estado */
.carpeta.caso { --carpeta-color: var(--info-dot); --carpeta-fondo: var(--info-bg); }
.carpeta.caso.suspendido { --carpeta-color: var(--warning-dot); --carpeta-fondo: var(--warning-bg); }
.carpeta.caso.cerrado { --carpeta-color: var(--neutral-dot); --carpeta-fondo: var(--neutral-bg); }
.carpeta.caso.cerrado .carpeta-titulo { color: var(--text-muted); }
.carpeta .radicado { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--text); letter-spacing: .01em; overflow-wrap: anywhere; }
.carpeta .titulo-caso { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carpeta .etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Carpeta "nueva" (crear caso dentro de la contraparte) */
.carpeta.nueva {
  border: 1px dashed var(--border); border-top: 3px dashed var(--border); background: transparent; box-shadow: none;
  align-items: center; justify-content: center; text-align: center; color: var(--text-muted); min-height: 150px;
  --carpeta-color: var(--primary);
}
.carpeta.nueva::before { background: var(--border); }
.carpeta.nueva:hover { border-color: var(--primary); color: var(--primary); }

/* Secciones dentro de la carpeta */
.seccion-carpetas { margin-bottom: 1.4rem; }
.seccion-carpetas > summary, .seccion-carpetas > h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 .2rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
}
.seccion-carpetas > summary::-webkit-details-marker { display: none; }
.seccion-carpetas > summary::before { content: "▸"; transition: transform .15s; }
.seccion-carpetas[open] > summary::before { transform: rotate(90deg); }

/* Cabecera de la carpeta abierta */
.carpeta-abierta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; }
.carpeta-abierta .carpeta-icono { width: 52px; height: 52px; border-radius: 14px; }
.carpeta-abierta h1 { font-size: 1.35rem; margin: 0; }

@media (max-width: 560px) {
  .rejilla-carpetas, .rejilla-carpetas.sub { grid-template-columns: 1fr; }
}