/* ============================================================================
   Portal Puig · Moore — hoja de estilo
   El diseño vive en estilos inline (viene del canvas de Claude Design).
   Aquí solo va lo que el inline no puede expresar: estados, hover, foco,
   el grid de la tabla de Jira y el comportamiento responsive.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #0D1B2A;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: #C45214; text-decoration: none; }
a:hover { color: #A53A12; }
::selection { background: #D6F7F3; }

:focus-visible { outline: 2px solid #00A896; outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ tabs -- */

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background 120ms ease;
}
.tab:hover { background: rgba(255, 255, 255, 0.06); }

/* el subrayado activo existe en el DOM y solo se muestra en la pestaña activa */
.tab-ul { display: none; }
.tab.is-active .tab-ul { display: block; }
.tab.is-active span:nth-child(2) { color: #FFFFFF !important; }
.tab.is-active span:first-child { color: #00A896 !important; }

/* ---------------------------------------------------------------- panels -- */

.panel { display: none; }
.panel.is-active { display: block; animation: panel-in 260ms ease both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel.is-active { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------- pager -- */

.pager {
  appearance: none;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  padding: 14px 18px;
  display: grid;
  gap: 4px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 380px;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  font: inherit;
}
.pager:hover { border-color: #00A896; background: #FAFDFC; transform: translateY(-1px); }
.pager[hidden] { display: none; }
.pager-next { text-align: right; justify-items: end; }
.pager-prev { text-align: left; justify-items: start; }
.pager-dir {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00A896;
}
.pager-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0D1B2A;
}

/* --------------------------------------------------------- Jira en vivo -- */

.jira-refresh {
  appearance: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #0D1B2A;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.jira-refresh:hover { border-color: #00A896; color: #00A896; background: #F5FCFB; }
.jira-refresh[disabled] { opacity: 0.5; cursor: progress; }

.jira-dot { transition: background 200ms ease; }
.jira-dot.is-live { background: #00A896; box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.16); }
.jira-dot.is-loading { background: #C45214; animation: pulse 900ms ease-in-out infinite; }
.jira-dot.is-error { background: #B3261E; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* filas de la tabla: mismo grid en cabecera, grupo y fila.
   Las 30 px de la izquierda son la flecha que despliega el detalle. */
.jira-row,
.jira-group {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  display: grid;
  min-width: 700px;
  align-items: center;
  background: transparent;
  transition: background 120ms ease;
}
.jira-row { grid-template-columns: 30px 88px minmax(0, 1fr) 160px 132px; }
.jira-group { grid-template-columns: 30px 88px minmax(0, 1fr) 292px; }

button.jira-row, button.jira-group { cursor: pointer; }
button.jira-row:hover, button.jira-group:hover { background: rgba(0, 168, 150, 0.05); }

.jira-group {
  background: #F7F9FB;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
button.jira-group:hover { background: #F1F6FA; }

.jira-item { border-bottom: 1px solid #F3F4F6; }
.jira-item:last-child { border-bottom: 0; }

.jira-c { padding: 12px 16px; }
.jira-c-caret { padding: 12px 0 12px 12px; }
.jira-c-key { padding-left: 0; padding-right: 8px; }
.jira-row-head { border-bottom: 0; }
.jira-row-head > div { padding: 12px 16px; }

.jira-caret {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  color: #9BA3AF;
  transition: transform 160ms ease, color 160ms ease;
}
[aria-expanded="true"] > .jira-c-caret .jira-caret { transform: rotate(90deg); color: #00A896; }

/* panel de detalle: lo que dice la tarjeta de Jira */
.jira-detail {
  min-width: 700px;
  padding: 4px 24px 22px 76px;
  display: grid;
  gap: 16px;
  animation: dec-in 200ms ease both;
}
.jira-detail[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jira-detail { animation: none; }
  .jira-caret { transition: none; }
}

.jira-detail-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6B7280;
}
.jira-detail-top a { color: #C45214; }

.jira-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #00A896;
  margin-bottom: 6px;
}
.jira-lbl.is-act { color: #C45214; }

.jira-prose { font-size: 14px; line-height: 1.6; color: #253B5C; max-width: 78ch; }
.jira-prose p { margin: 0 0 10px; }
.jira-prose p:last-child { margin-bottom: 0; }
.jira-prose h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0D1B2A;
  margin: 16px 0 6px;
}
.jira-prose h4:first-child { margin-top: 0; }
.jira-prose strong { color: #0D1B2A; font-weight: 600; }
.jira-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 1px 5px;
}
.jira-prose ul, .jira-prose ol { margin: 0 0 10px; padding-left: 20px; }
.jira-prose li { margin: 5px 0; }
.jira-prose li::marker { color: #C45214; }

.jira-firma {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9BA3AF;
  margin-top: 8px;
}
.jira-vacio { font-size: 13.5px; color: #6B7280; font-style: italic; }
.jira-vacio a { font-style: normal; }

@media (max-width: 720px) {
  .jira-detail { padding-left: 46px; padding-right: 16px; }
}

.jira-epic-card { transition: border-color 160ms ease, box-shadow 160ms ease; }
.jira-epic-card:hover { border-color: #CBD5E1; box-shadow: 0 2px 10px rgba(13, 27, 42, 0.05); }
.jira-bar-fill { transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); }

.jira-state {
  padding: 32px;
  text-align: center;
  color: #6B7280;
  font-size: 14px;
}
.jira-state strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  color: #0D1B2A;
  margin-bottom: 6px;
}
.jira-state code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: #F3F4F6;
  padding: 2px 6px;
  border-radius: 4px;
}

/* skeleton mientras carga */
.jira-skeleton {
  height: 132px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: linear-gradient(90deg, #F6F7F9 25%, #EDEFF2 37%, #F6F7F9 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
  .pager { min-width: 0; }
  .pager-name { font-size: 14px; }
}

/* enlaces externos repuestos (Canva, Drive) */
.ext-link { transition: border-color 120ms ease, background 120ms ease; }
.ext-link:hover { border-color: #00A896; color: inherit; }

/* ------------------------------------------------------- decisiones -- */
/* Cada fila se despliega: la respuesta y su efecto en el diseño viven en
   decisions.js. La cabecera de la tabla usa el mismo grid (ver index.html). */

.dec-item { border-bottom: 1px solid #F3F4F6; }
.dec-item:last-child { border-bottom: 0; }

.dec-head {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  display: grid;
  min-width: 720px;
  grid-template-columns: 30px 46px minmax(0, 1fr) 120px 130px 110px;
  align-items: center;
  transition: background 120ms ease;
}
.dec-head:hover { background: rgba(0, 168, 150, 0.05); }
.dec-head.is-static { cursor: default; }
.dec-head.is-static:hover { background: transparent; }

.dec-c { padding: 13px 16px; }
.dec-c-caret { padding: 13px 0 13px 12px; }
.dec-c-id { padding-left: 0; padding-right: 8px; }

.dec-caret {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  color: #9BA3AF;
  transition: transform 160ms ease, color 160ms ease;
}
.dec-head[aria-expanded="true"] .dec-caret { transform: rotate(90deg); color: #00A896; }

.dec-body {
  min-width: 720px;
  padding: 2px 24px 22px 76px;
  display: grid;
  gap: 14px;
  animation: dec-in 200ms ease both;
}
.dec-body[hidden] { display: none; }

@keyframes dec-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dec-body { animation: none; }
  .dec-caret { transition: none; }
}

.dec-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #00A896;
  margin-bottom: 5px;
}
.dec-lbl.is-warn { color: #C45214; }

.dec-txt {
  font-size: 14px;
  line-height: 1.6;
  color: #253B5C;
  max-width: 76ch;
}
.dec-txt strong { color: #0D1B2A; font-weight: 600; }
.dec-txt code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 1px 5px;
}
.dec-txt ol { margin: 8px 0 0; padding-left: 20px; }
.dec-txt li { margin: 6px 0; }
.dec-txt li::marker { color: #C45214; font-weight: 700; }

.dec-note {
  border-left: 2px solid #C45214;
  background: #FFF8F3;
  padding: 11px 14px;
  border-radius: 0 8px 8px 0;
  max-width: 78ch;
}
.dec-note .dec-txt { max-width: none; }

.dec-src {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6B7280;
  border-top: 1px solid #F3F4F6;
  padding-top: 10px;
}

@media (max-width: 720px) {
  .dec-body { padding-left: 46px; padding-right: 16px; }
}