/* Pangea OS · componentes compartidos · derivados del alpha. */
@import url('/diseno-27/sistema/pangea-os.tokens.css');
@import url('/diseno-27/sistema/fonts.css');
*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--os-background);color:var(--os-text);font-family:var(--os-font-body);font-size:var(--os-size-body);line-height:1.55;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}a{color:var(--os-accent);text-underline-offset:.25em}img,svg,video,canvas{max-width:100%}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.15;text-wrap:balance}h1,h2{font-family:var(--os-font-heading)}h1{font-size:clamp(var(--os-size-h2),5vw,var(--os-size-h1));font-weight:600;letter-spacing:-.02em}h2{font-size:clamp(22px,3vw,var(--os-size-h2))}h3{font-size:18px}p{max-width:68ch}small{font-size:var(--os-size-label)}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:600;margin-bottom:12px}label{display:block}hr{border:0;border-top:1px solid var(--os-divider)}[hidden]{display:none!important}
:focus-visible,.os-demo-focus{outline:var(--os-size-focus) solid var(--os-focus);outline-offset:3px}::selection{color:var(--os-on-accent);background:var(--os-accent)}.os-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.os-skip{position:fixed;left:16px;top:-100px;z-index:100;padding:12px 16px;background:var(--os-accent);color:var(--os-on-accent);border-radius:var(--os-radius-sm)}.os-skip:focus{top:16px}
.os-wrap{width:min(100% - 32px,1200px);margin:0 auto;padding:24px 0 48px}.os-reading{max-width:720px}.os-stack{display:grid;gap:16px}.os-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}.os-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.os-between{justify-content:space-between}.os-muted{color:var(--os-muted)}.os-secondary{color:var(--os-secondary)}.os-eyebrow{font-size:var(--os-size-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--os-accent);margin-bottom:12px}.os-number{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';letter-spacing:-.03em}.os-section{margin-block:48px}.os-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}.os-section-heading h2{margin:0}

/* Componente → rol semántico → primitiva. Los estados se definen después. */
.os-button,.os-btn{background:var(--os-component-button-background);color:var(--os-component-button-foreground);border-radius:var(--os-component-button-radius);padding:var(--os-component-button-padding);}
.os-input,.os-textarea{background:var(--os-component-input-background);color:var(--os-component-input-foreground);border-radius:var(--os-component-input-radius);padding:var(--os-component-input-padding);}
.os-select{background:var(--os-component-select-background);color:var(--os-component-select-foreground);border-radius:var(--os-component-select-radius);padding:var(--os-component-select-padding);}
.os-card{background:var(--os-component-card-background);color:var(--os-component-card-foreground);border-radius:var(--os-component-card-radius);padding:var(--os-component-card-padding);}
.os-panel,.os-papel{background:var(--os-component-panel-background);color:var(--os-component-panel-foreground);border-radius:var(--os-component-panel-radius);padding:var(--os-component-panel-padding);}
.os-sheet{background:var(--os-component-sheet-background);color:var(--os-component-sheet-foreground);border-radius:var(--os-component-sheet-radius);padding:var(--os-component-sheet-padding);}
.os-alert{background:var(--os-component-alert-background);color:var(--os-component-alert-foreground);border-radius:var(--os-component-alert-radius);padding:var(--os-component-alert-padding);}
.os-badge,.os-chip{background:var(--os-component-badge-background);color:var(--os-component-badge-foreground);border-radius:var(--os-component-badge-radius);padding:var(--os-component-badge-padding);}
.os-table{background:var(--os-component-table-background);color:var(--os-component-table-foreground);border-radius:var(--os-component-table-radius);padding:var(--os-component-table-padding);}
.os-nav a{background:var(--os-component-nav-background);color:var(--os-component-nav-foreground);border-radius:var(--os-component-nav-radius);padding:var(--os-component-nav-padding);}
.os-empty-state{background:var(--os-component-empty-state-background);color:var(--os-component-empty-state-foreground);border-radius:var(--os-component-empty-state-radius);padding:var(--os-component-empty-state-padding);}
.os-metric{background:var(--os-component-metric-background);color:var(--os-component-metric-foreground);border-radius:var(--os-component-metric-radius);padding:var(--os-component-metric-padding);}
.os-tabs button{background:var(--os-component-tabs-background);color:var(--os-component-tabs-foreground);border-radius:var(--os-component-tabs-radius);padding:var(--os-component-tabs-padding);}
.os-list>li{background:var(--os-component-list-background);color:var(--os-component-list-foreground);border-radius:var(--os-component-list-radius);padding:var(--os-component-list-padding);}
.os-button,.os-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--os-size-touch);max-width:100%;border:1px solid transparent;font-weight:600;text-align:center;text-decoration:none;line-height:1.4;transition:transform var(--os-duration-press) var(--os-ease-out),background-color var(--os-duration-press)}.os-button-secondary{background:var(--os-surface);color:var(--os-text);border-color:var(--os-border)}.os-button-quiet{background:transparent;color:var(--os-accent);border-color:transparent}.os-button-danger{background:var(--os-error-surface);color:var(--os-error);border-color:var(--os-error)}.os-button:active:not(:disabled),.os-button[data-state=pressed]{transform:scale(var(--os-pressScale))}.os-button:disabled,.os-button[aria-disabled=true]{background:var(--os-elevated);color:var(--os-secondary);border-color:var(--os-border)}.os-button[data-state=loading]{background:var(--os-selected);color:var(--os-accent);border-color:var(--os-accent)}
@media(hover:hover) and (pointer:fine){.os-button:hover:not(:disabled){background:var(--os-accent-hover)}.os-button-secondary:hover:not(:disabled),.os-button-quiet:hover:not(:disabled){color:var(--os-text);background:var(--os-elevated)}.os-button-danger:hover:not(:disabled){color:var(--os-error);background:var(--os-error-surface);box-shadow:inset 0 0 0 1px var(--os-error)}.os-nav a:hover{background:var(--os-elevated)}}
.os-field{display:grid;gap:8px;min-width:0}.os-field label,.os-label{font-size:var(--os-size-label);font-weight:600}.os-input,.os-select,.os-textarea{width:100%;min-width:0;min-height:var(--os-size-touch);border:1px solid var(--os-border);font-size:var(--os-size-body)}.os-input::placeholder,.os-textarea::placeholder{color:var(--os-muted)}.os-input:disabled,.os-select:disabled,.os-textarea:disabled{background:var(--os-elevated);color:var(--os-secondary)}.os-input[aria-invalid=true],.os-select[aria-invalid=true],.os-textarea[aria-invalid=true]{border-color:var(--os-error)}.os-help{font-size:var(--os-size-label);color:var(--os-secondary);margin:0}.os-error-text{color:var(--os-error)}.os-checkbox{display:flex;align-items:center;gap:12px;min-height:var(--os-size-touch)}.os-checkbox input{width:24px;height:24px;accent-color:var(--os-accent)}
.os-card,.os-panel,.os-papel{min-width:0;border:1px solid var(--os-divider);box-shadow:0 1px 0 var(--os-divider),0 12px 28px -22px color-mix(in srgb,var(--os-color-ink950) 72%,transparent)}.os-card-elevated{background:var(--os-elevated)}.os-card-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}.os-card h3{margin-bottom:8px}.os-card p:last-child{margin-bottom:0}.os-card[data-state=focus]{outline:var(--os-size-focus) solid var(--os-focus);outline-offset:3px}.os-card[data-state=stale]{border-color:var(--os-warning)}.os-card[data-state=error]{border-color:var(--os-error)}.os-card[data-state=forbidden]{border-style:dashed;border-color:var(--os-border)}.os-metric{border-left:3px solid var(--os-accent);}.os-metric strong{font-size:clamp(30px,6vw,42px);font-weight:500;line-height:1.2;display:block;margin:8px 0}.os-metric p{margin:0;color:var(--os-secondary)}
.os-badge,.os-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--os-border);font-size:var(--os-size-label);line-height:1.5;max-width:100%;overflow-wrap:anywhere;}.os-badge-accent{background:var(--os-selected);color:var(--os-accent);border-color:var(--os-accent)}.os-badge-warning{color:var(--os-warning);background:var(--os-warning-surface);border-color:var(--os-warning)}.os-badge-error{color:var(--os-error);background:var(--os-error-surface);border-color:var(--os-error)}.os-alert{border:1px solid var(--os-border);display:flex;gap:12px;align-items:flex-start;}.os-alert strong{display:block;color:var(--os-text)}.os-alert[data-state=error]{color:var(--os-error);border-color:var(--os-error);background:var(--os-error-surface)}.os-alert[data-state=stale]{color:var(--os-warning);border-color:var(--os-warning);background:var(--os-warning-surface)}.os-alert p{margin:0}.os-state-icon{flex:none;width:24px;text-align:center;font-weight:600}.os-empty-state{text-align:center;border:1px dashed var(--os-border);}.os-empty-state p{margin-inline:auto;color:var(--os-secondary)}.os-empty-state h3{margin-bottom:12px}
.os-nav{display:flex;gap:8px;flex-wrap:wrap}.os-nav a,.os-tabs button{min-height:var(--os-size-touch);display:inline-flex;align-items:center;text-decoration:none;border:1px solid transparent;}.os-nav a[aria-current=page],.os-tabs button[aria-selected=true]{color:var(--os-accent);background:var(--os-selected);border-color:var(--os-accent)}.os-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.os-list{padding:0;margin:0;list-style:none}.os-list>li{border-bottom:1px solid var(--os-divider)}.os-list>li:last-child{border:0}.os-list details summary{padding-block:12px;min-height:var(--os-size-touch);cursor:pointer}.os-list dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}.os-list dt{color:var(--os-secondary)}.os-list dd{margin:0;text-align:right;overflow-wrap:anywhere}
.os-table{width:100%;border-collapse:collapse;font-size:var(--os-size-body)}.os-table caption{text-align:left;padding-bottom:16px;font-weight:600}.os-table th{text-align:left;font-size:var(--os-size-label);color:var(--os-secondary);font-weight:500}.os-table th,.os-table td{padding:16px 12px;border-bottom:1px solid var(--os-divider);overflow-wrap:anywhere}.os-table td:last-child{text-align:right}.os-table .os-button{padding:8px 12px}.os-table th:first-child,.os-table td:first-child{padding-left:0}
.os-sheet{max-width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--os-border);box-shadow:0 24px 80px color-mix(in srgb,var(--os-color-ink950) 40%,transparent)}.os-sheet::backdrop{background:color-mix(in srgb,var(--os-color-ink950) 65%,transparent)}.os-sheet h2{margin-bottom:16px}.os-sheet form{display:grid;gap:16px}.os-progress{width:100%;accent-color:var(--os-accent)}.os-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:var(--os-size-label);margin-bottom:8px}
.os-catalog-header{border-bottom:1px solid var(--os-divider);padding:16px 0}.os-wordmark{font-size:18px;font-weight:600;letter-spacing:-.03em;color:var(--os-text);text-decoration:none;display:flex;align-items:center;gap:12px}.os-mark{display:grid;grid-template-columns:repeat(3,5px);gap:3px;transform:skewY(-18deg)}.os-mark i{display:block;width:5px;height:22px;background:var(--os-accent)}.os-mark i:nth-child(2){height:30px}.os-mark i:nth-child(3){height:38px}.os-catalog-hero{padding:64px 0 24px;display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end}.os-catalog-hero h1{font-size:clamp(38px,7vw,68px);max-width:12ch;margin-bottom:24px}.os-catalog-hero .os-lead{font-size:18px;color:var(--os-secondary);max-width:46ch}.os-catalog-spec{border-left:1px solid var(--os-border);padding-left:24px;font-size:var(--os-size-label)}.os-catalog-spec dt{color:var(--os-secondary)}.os-catalog-spec dd{margin:0 0 16px}.os-token-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.os-swatch{height:96px;border-radius:var(--os-radius-sm);border:1px solid var(--os-border);margin-bottom:8px}.os-token{font-size:var(--os-size-label)}.os-token code{font-family:var(--os-font-mono);font-size:12px;color:var(--os-secondary)}.os-state-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}.os-state-sample{padding:16px;background:var(--os-surface);border-radius:var(--os-radius-md);border:1px solid var(--os-divider)}.os-state-sample>p:first-child{margin:0 0 16px;font-size:var(--os-size-label);color:var(--os-secondary)}.os-state-sample .os-button{width:100%}.os-footer{border-top:1px solid var(--os-divider);padding:24px 0;color:var(--os-secondary);font-size:var(--os-size-label)}.os-demo-hover{background:var(--os-accent-hover)}
@media(max-width:640px){.os-catalog-hero{grid-template-columns:1fr;padding-top:40px;gap:24px}.os-catalog-spec{display:flex;flex-wrap:wrap;gap:16px;border-left:0;padding-left:0;border-top:1px solid var(--os-divider);padding-top:16px}.os-catalog-spec div{flex:1;min-width:120px}.os-catalog-spec dd{margin:4px 0}.os-card,.os-panel{padding:16px}.os-table,.os-table tbody,.os-table tr,.os-table td{display:block}.os-table caption{display:block;width:100%}.os-table tbody th{display:block;padding:6px 0}.os-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.os-table tr{padding:16px 0;border-bottom:1px solid var(--os-border)}.os-table td{display:flex;justify-content:space-between;gap:16px;border:0;padding:6px 0;text-align:right}.os-table td::before{content:attr(data-label);font-size:var(--os-size-label);color:var(--os-secondary);text-align:left;flex:0 0 30%;min-width:6ch;overflow-wrap:normal}.os-table td[colspan]{flex-direction:column;gap:8px;text-align:left}.os-table td[colspan]::before{flex:none;width:100%}.os-table td>*{max-width:65%}.os-sheet{margin-bottom:16px}.os-wrap{padding-top:16px}.os-section{margin-block:32px}}
.os-catalog-hero>*{min-width:0}.os-catalog-hero h1{overflow-wrap:anywhere}.os-skip{top:0;transform:translateY(calc(-100% - 16px))}.os-skip:focus{top:16px;transform:none}
@media(max-width:640px){.os-catalog-hero{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.os-button:active:not(:disabled),.os-button[data-state=pressed]{transform:none}}

/* Estados nativos compartidos, disponibles también fuera del catálogo. */
.os-tabs button:disabled{color:var(--os-secondary);background:var(--os-elevated);border-color:var(--os-border);cursor:not-allowed}
@media(hover:hover) and (pointer:fine){.os-input:hover:not(:disabled):not([aria-invalid=true]),.os-select:hover:not(:disabled):not([aria-invalid=true]),.os-textarea:hover:not(:disabled):not([aria-invalid=true]){border-color:var(--os-accent)}}

@media(max-width:400px){.os-table td{flex-direction:column;align-items:stretch;gap:4px;text-align:left}.os-table td::before{flex:none;width:100%;min-width:0}.os-table td>*{max-width:100%}}
/* Marca de Pangea Ink (23-sep, orden de Carlos: «no está el logo de Pangea ni la fuente del logo»). Logo oficial del sello del pug, recortado sin redibujar; fuente Sancreek (OFL), la más cercana a la del sello. */
/* Tipografía de marca y de títulos: Texturina (Google Fonts, OFL 1.1; fonts/OFL-texturina.txt), elegida por Carlos el 25-sep-2026. Variable: wght 100–900, opsz 12–72. */
@font-face{font-family:'Texturina';src:url('/diseno-27/sistema/fonts/texturina-variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.p27-pug{display:inline-block;flex:none;width:34px;height:34px;background:url('/diseno-27/sistema/marca/pug-claro-96.webp') center/contain no-repeat}
[data-theme=light] .p27-pug{background-image:url('/diseno-27/sistema/marca/pug-negro-96.webp')}
.p27-brand-name{font-family:'Texturina',var(--os-font-heading,serif);font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.p27-sello{width:min(200px,42vw);aspect-ratio:1;background:url('/diseno-27/sistema/marca/sello-claro-512.webp') center/contain no-repeat;margin:0 0 20px}
[data-theme=light] .p27-sello{background-image:url('/diseno-27/sistema/marca/sello-negro-512.webp')}