/* Minimal extra CSS to mimic Tailwind plugins used in the original app (line-clamp, typography, animate-in). */

:root { color-scheme: light; }

.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes zoomIn95 { from {transform: scale(.95)} to {transform: scale(1)} }
@keyframes slideInFromBottom4 { from {transform: translateY(1rem)} to {transform: translateY(0)} }

.animate-in { animation-fill-mode: both; }
.fade-in { animation-name: fadeIn; }
.zoom-in-95 { animation-name: zoomIn95; }
.slide-in-from-bottom-4 { animation-name: slideInFromBottom4; }

.prose { font-size: .875rem; line-height: 1.65; color: #475569; }
.prose p { margin: 0 0 .85rem 0; }
.prose strong { color: #334155; font-weight: 600; }
.prose a { color: #4f46e5; text-decoration: none; font-weight: 500; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 .85rem 0; }
.prose li { margin: .25rem 0; }
.prose h1, .prose h2, .prose h3 { color: #1e293b; font-weight: 600; margin: 1rem 0 .5rem; }
.prose blockquote { border-left: 4px solid #e2e8f0; padding-left: .9rem; color: #64748b; margin: .9rem 0; }
.prose pre { background: #0b1220; color: #e2e8f0; padding: .9rem; border-radius: .75rem; overflow:auto; }
.prose code { background: #f1f5f9; padding: .1rem .25rem; border-radius: .35rem; }

body.modal-open { overflow: hidden; }

/* Barra de categorías de Comunicados: visible en escritorio y móvil. */
.announcement-menubar{
  width: 100%;
  padding: .35rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
  overflow: hidden;
}
.cat-tabstrip{
  display: flex;
  width: 100%;
  gap: .35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding-bottom: .05rem;
}
.announcement-menu-item{
  appearance: none;
  border: 0;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-height: 2.55rem;
  padding: .62rem .82rem;
  border-radius: .75rem;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.announcement-menu-item:hover{
  background: #eef2ff;
  color: #4338ca;
}
.announcement-menu-item:focus-visible{
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.announcement-menu-item.is-active{
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.announcement-menu-count{
  min-width: 1.45rem;
  padding: .15rem .38rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, .18);
  color: inherit;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
}
.announcement-menu-item.is-active .announcement-menu-count{
  background: rgba(255,255,255,.20);
}
@media (min-width: 1100px){
  .cat-tabstrip{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
  .announcement-menu-item{
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* Quill tweaks to match card styling */
.ql-toolbar.ql-snow { border: 0 !important; border-bottom: 1px solid #e2e8f0 !important; }
.ql-container.ql-snow { border: 0 !important; }
.ql-editor { min-height: 250px; }
/* Gestor de sugerencias — layout canónico de estados.
   Móvil: 2 columnas x 2 filas. Escritorio/tablet: 4 columnas x 1 fila. */
.suggestions-status-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.suggestions-status-grid > a {
  min-width: 0;
  width: 100%;
}

@media (min-width: 640px) {
  .suggestions-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}


/* ===== P4.12 · Auditoría responsive global del gestor ===== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.canonical-view,
.canonical-view > *,
.min-h-screen {
  min-width: 0;
}

input,
select,
textarea,
button,
a {
  max-width: 100%;
}

.manager-header-row,
.manager-attachment-row,
.manager-detail-footer,
.manager-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}

.manager-two-actions,
.manager-filter-pair {
  display: flex;
  gap: .75rem;
  min-width: 0;
}

.manager-filter-pair > select {
  min-width: 0;
  flex: 1 1 auto;
}

.manager-header-action,
.manager-attachment-action,
.manager-detail-delete-button,
.manager-pagination-row > a,
.manager-two-actions > a,
.manager-two-actions > button,
.manager-filter-pair > button {
  text-align: center;
  justify-content: center;
}

@media (max-width: 639px) {
  .manager-header-row,
  .manager-attachment-row,
  .manager-detail-footer,
  .manager-pagination-row {
    flex-direction: column;
    align-items: stretch;
  }

  .manager-header-action,
  .manager-attachment-action,
  .manager-detail-delete,
  .manager-detail-delete-button,
  .manager-pagination-row > a {
    width: 100%;
  }

  .manager-two-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .manager-two-actions > a,
  .manager-two-actions > button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .manager-filter-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .manager-filter-pair > select,
  .manager-filter-pair > button {
    width: 100%;
  }

  /* Correos, códigos, URLs y textos largos nunca fuerzan el viewport. */
  .prose,
  .font-mono,
  code,
  td,
  th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.manager-mobile-wrap-row,
.manager-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}
.manager-mobile-wrap-row > *,
.manager-file-row > * {
  min-width: 0;
}
.manager-file-row strong,
.manager-file-row small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 639px) {
  .manager-mobile-wrap-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .manager-file-row {
    flex-direction: column;
    align-items: flex-start;
  }
}