/* Portal Blessed · Sistema semántico de acciones
   Amarillo agrega; verde guarda/continúa; rojo finaliza; rojo bordeado elimina.
   Esta capa se carga al final para conservar el significado sobre los estilos históricos. */

:root{
  --action-add:#f2c94c;
  --action-add-hover:#e4b82f;
  --action-add-text:#493700;
  --action-primary:#2f7862;
  --action-primary-hover:#245d4d;
  --action-final:#c4493d;
  --action-final-hover:#a83b32;
  --action-danger:#b33a32;
  --action-danger-soft:#fff7f6;
  --action-neutral:#ffffff;
  --action-neutral-text:#42554b;
  --action-neutral-line:#ccd9d2;
}

button[data-action],.button[data-action]{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent!important;
  min-height:44px;
  font-weight:750!important;
  line-height:1.2;
  text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease!important;
}
button[data-action="add"],.button[data-action="add"]{
  background:var(--action-add)!important;
  color:var(--action-add-text)!important;
  border-color:#deb333!important;
  box-shadow:0 5px 14px rgba(188,137,0,.12)!important;
}
button[data-action="add"]:hover,.button[data-action="add"]:hover{
  background:var(--action-add-hover)!important;
  color:#362800!important;
  box-shadow:0 7px 18px rgba(188,137,0,.18)!important;
}
button[data-action="primary"],.button[data-action="primary"]{
  background:var(--action-primary)!important;
  color:#fff!important;
  border-color:var(--action-primary)!important;
}
button[data-action="primary"]:hover,.button[data-action="primary"]:hover{
  background:var(--action-primary-hover)!important;
  border-color:var(--action-primary-hover)!important;
}
button[data-action="final"],.button[data-action="final"]{
  background:var(--action-final)!important;
  color:#fff!important;
  border-color:var(--action-final)!important;
  box-shadow:0 6px 16px rgba(179,58,50,.15)!important;
}
button[data-action="final"]:hover,.button[data-action="final"]:hover{
  background:var(--action-final-hover)!important;
  border-color:var(--action-final-hover)!important;
  box-shadow:0 8px 20px rgba(179,58,50,.22)!important;
}
button[data-action="danger"],.button[data-action="danger"]{
  background:var(--action-danger-soft)!important;
  color:var(--action-danger)!important;
  border-color:#dfaaa5!important;
  box-shadow:none!important;
}
button[data-action="danger"]:hover,.button[data-action="danger"]:hover{
  background:#fde9e7!important;
  color:#922c25!important;
  border-color:#c96f67!important;
}
button[data-action="neutral"],.button[data-action="neutral"]{
  background:var(--action-neutral)!important;
  color:var(--action-neutral-text)!important;
  border-color:var(--action-neutral-line)!important;
  box-shadow:none!important;
}
button[data-action="neutral"]:hover,.button[data-action="neutral"]:hover{
  background:#f5f8f6!important;
  color:#283b31!important;
  border-color:#aebfb6!important;
}
button[data-action]:disabled,.button[data-action][aria-disabled="true"]{
  opacity:.45!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  filter:saturate(.65);
}
button[data-action]:focus-visible,.button[data-action]:focus-visible{
  outline:3px solid rgba(47,120,98,.25)!important;
  outline-offset:3px!important;
}
button[data-action="final"]:focus-visible,.button[data-action="danger"]:focus-visible{
  outline-color:rgba(196,73,61,.28)!important;
}
button[data-action="add"]:focus-visible,.button[data-action="add"]:focus-visible{
  outline-color:rgba(211,157,20,.3)!important;
}

.action-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 14px;
  margin:12px 0 18px;
  padding:10px 13px;
  border:1px solid #dfe7e2;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  color:#607068;
  font-size:11px;
  line-height:1.35;
}
.action-legend>strong{color:#34463d;font-size:11px}
.action-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.action-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.action-legend .add{background:var(--action-add);border:1px solid #deb333}
.action-legend .primary{background:var(--action-primary)}
.action-legend .final{background:var(--action-final)}
.action-legend .danger{background:var(--action-danger-soft);border:1px solid #c96f67}

@media(max-width:700px){
  .action-legend{align-items:flex-start;display:grid;grid-template-columns:1fr 1fr}
  .action-legend>strong{grid-column:1/-1}
  button[data-action],.button[data-action]{min-height:46px}
}